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.
At the very basic end of the scale, a polygon may be used to create a button or a simple background. But they can also serve as incredibly detailed UI elements as well. The trick is in leveraging the power of both CSS and JavaScript to put these creative ideas together.
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!
2,000+ Templates
270+ Templates
150+ Templates
1,200+ Themes
550+ Plugins
8,200+ Templates
Foldable Fish
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.
See the Pen Only CSS: Polygon Fish by Yusuke Nakaya.
Origami Bird
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.
See the Pen Origami Bird by Simin.
Over the Falls
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.
See the Pen The Great Fall by CJ Gammon.
A Fitting Tribute
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.
See the Pen Ikko Tanaka (pure CSS) by yuanchuan.
David Bowie
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.
See the Pen Long Live Ziggy Stardust by Joe Harry.
Virtual Library
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.
See the Pen Responsive CSS Grid – Books by Andy Barefoot.
Matchmaker
Check out this fun memory matching game. It utilizes super-cute polygon illustrations of animals and other common objects. CSS makes it enjoyable to look at, while JavaScript powers all the behind-the-scenes functionality.
See the Pen Tangram Memory Game by Paulina Hetman.
A Beautiful Background
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.
See the Pen Tesselation Transition by Chris Johnson.
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.
Looking for even more incredible polygon examples? Be sure to check out our CodePen collection for a complete set!
The post 8 Awesome Examples of CSS & JavaScript Polygons appeared first on Speckyboy Design Magazine.
