Polygons just seem to be a natural fit for web design. For one, they’re incredibly versatile. These shapes can both stand out on their own or be combined to create something altogether different. Whether you want to craft an element that is abstract or realistic – it’s within reach.
We’ve collected some stunning examples of what polygons can do. You might just be amazed at some of these implementations – let’s get started!
Foldable Fish by Yusuke Nakaya
A series of shaded triangles has been turned into…a school of fish? That’s right. This pure CSS animation brings a little bit of ocean right to your screen. Notice the lifelike movement of each fish – complete with a perspective shadow below.
Origami Bird by Simin
Here we have a masterful representation of an origami bird. The use of both shapes and shadows makes this look just like the real thing. A gentle animation serves as the perfect finishing touch. This entire piece is done with HTML and CSS.
Over the Falls by CJ Gammon
This nature scene uses polygons to create depth and a little bit of fantasy. The jello-like liquid motion is recognizable, but still tame enough avoid conflicting with the content overlay. A fun illustration that lends itself to storytelling.
A Fitting Tribute by Yuanchuan
Ikko Tanaka was a Japanese graphic designer whose work often made interesting usage of polygons. Therefore, it’s only fitting that his creations are remade via CSS. This presentation captures Tanaka’s style and is also a great example of CSS grid, clip paths and other advanced techniques.
David Bowie by Joe Harry
Speaking of beautiful tributes, here’s one to the late great David Bowie. The rock music icon is the star of this jQuery-powered low-poly animation. Ever into technology, Bowie himself may well have loved this depiction.
Virtual Library by Andy Barefoot
Sporting an eye-catching CSS grid layout, this book display would be a perfect fit for an eCommerce shop. Thanks to the diamond-shaped grid, it’s at once complex, symmetrical and easy to digest. A snazzy hover effect also adds to the atmosphere.
Matchmaker by Paulina Hetman
A Beautiful Background by Chris Johnson
Background textures are a common use for geometric shapes. You can see why when viewing this example. It utilizes Delaunay triangulation to create a colorful-yet-subtle animation that would be sure to grab a user’s attention. Imagine using it in a hero area or other prominent place.
Shaping the User Experience
The level of detail in the above code snippets are an inspiration. Each takes simple polygonal shapes and turns them into works of art. It’s a testament to the power of both code and creativity.