Speckyboy RSS: 8 Awesome Examples of CSS & JavaScript Polygons

Your latest Speckyboy content is here!.

Speckyboy Design Magazine

Design News, Resources & Inspiration

8 Awesome Examples of CSS & JavaScript Polygons


By Eric Karkovack on Mar 08, 2021 09:01 am


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!

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.



Read in browser »

Recent Articles:

Weekly News for Designers № 582
The Right Way to Add Recurring Revenue to Your Web Design Business
Tips to Help You Power Through Projects with the WordPress Gutenberg Block Editor
Leveraging the Power of Sushi to Improve Your Designs
Weekly News for Designers № 581
Share
Tweet
+1
Share
Forward
Copyright © 2021 Speckyboy Design Magazine, All rights reserved.
You signed up for daily Speckyboy Design Magazine email alerts either via Feedburner or directly through our site.

Our mailing address is:
Speckyboy Design Magazine
27 Braeside Park
Inverness, Scotland IV2 7HL
United Kingdom

Add us to your address book


Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list.

Older messages

Speckyboy RSS: Weekly News for Designers № 582

Friday, March 5, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Weekly News for Designers № 582 By Speckyboy on Mar 05, 2021 09:43 am Envato Elements Gradient

Speckyboy RSS: The Right Way to Add Recurring Revenue to Your Web Design Business

Wednesday, March 3, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration The Right Way to Add Recurring Revenue to Your Web Design Business By Eric Karkovack on Mar 03

Speckyboy RSS: Tips to Help You Power Through Projects with the WordPress Gutenberg Block Editor

Tuesday, March 2, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Tips to Help You Power Through Projects with the WordPress Gutenberg Block Editor By Eric

Speckyboy RSS: Leveraging the Power of Sushi to Improve Your Designs

Monday, March 1, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Leveraging the Power of Sushi to Improve Your Designs By Addison Duvall on Mar 01, 2021 07:39

Speckyboy RSS: Weekly News for Designers № 581

Friday, February 26, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Weekly News for Designers № 581 By Speckyboy on Feb 26, 2021 09:54 am Envato Elements Finding

The 25 Best Accent Chairs, According to AD100 Designers

Friday, June 18, 2021

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image Welcome to the PROcurement, our new weekly roundup of the best designs to source

✏ 40 Javascript Memes, CSS Specificity Calculator, HTML Semantic Tags Sheet, and more...

Friday, June 18, 2021

The Problem with UX/UI Portfolios MARKBOULTON.CO.UK COMMENTS CSS Specificity Calculator POLYPANE.APP COMMENTS Your Image is Probably not Decorative SMASHINGMAGAZINE.COM COMMENTS Top 40+ Javascript

What Will Back-To-Normal Look Like?

Friday, June 18, 2021

A weekly dispatch from Architectural Digest's Editor in Chief. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

UX/UI Portfolios, Feels, Bear Plus Snowflake, Optical Size, Aspect Ratio

Friday, June 18, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 18 2021 The problem with UX/UI portfolios markboulton.co.

RWD Weekly #462— the one about the little yellow book

Friday, June 18, 2021

No preview text for you this week, you've got to commit to reading this one by opening it first :) Read online Hello again, welcome back to RWD Weekly #462 happy Friday! This week I've been

Meet Image Optimization, A New Smashing Book

Thursday, June 17, 2021

Meet Addy Osmani's new book on image optimization: from formats and compression to delivery and maintenance. Brand new book: Image Optimization by Addy Osmani. Dearest Friend, How do we deliver

🔥 Dashing Mobile UI Designs and more

Thursday, June 17, 2021

Round Up The Newest UpLabs Weekly Freebies 🤠 Check out some fresh high-quality Freebies that have been handpicked for you by the UpLabs team this week. The New Super Fast Way to Build a Website

Holly Hunt Reinvents Herself Once Again

Thursday, June 17, 2021

Plus, a houseplant sells for almost $20000 at auction (image) Architectural Digest AD PRO Logo house plant - philodendron Think You Love Houseplants? This One Just Sold for Almost $20000 Read More →

✏ 3 Ways to Design More Inclusively, What is a Design System?2021 Fun Typefaces, and more...

Thursday, June 17, 2021

3 Ways to Design More Inclusively WEBDESIGNERDEPOT.COM COMMENTS What is a Design System? ROBERTCREATIVE.COM COMMENTS Animal Crossing Font FONTSPANDA.COM COMMENTS Some Fun Typefaces for 2021 KOTTKE.ORG

✏ Issue #491: Google Page Experience Update, 22 Exciting New Tools for Designers, Diversity In Design, Invision Freehand, and more…

Thursday, June 17, 2021

View this newsletter online Unsubscribe NEWSLETTER ISSUE #491 JUNE 17, 2021 Work at the Intersection of Data, Design, and Technology Prepare for a range of dynamic communication roles in Northwestern