CSS Polygon Animated Artwork using clip-path: polygon() property.

Peter
Peter
1,101
0
Published 2022-10-14
I've been working on an animated CSS project that uses the clip-path: polygon() property. All animations and static images in this video were made using only the clip-path: polygon--there aren't any vectors or other images.

The basic idea is as follows: create a finished polygon artwork using colored divs and the clip-path property. Then set their opacity to 0. You can then use JavaScript to gather all of the divs you need using QuerySelectorAll, which will create a node list of your divs. You can then turn this node list into an array, and then loop through the array and add various CSS classes to the respective polygons.

There are two big downsides to animating and creating artwork like this: time and performance. The time it takes to create the animations and artworks is extremely time consuming. Additionally, on some phones and slower devices, the polygon animations will lag--which completely ruins the effect.

The full project has been posted on my website. Visit petermichael.dev/projects/polygonproject/polygon to view the full project. For now, I'm pausing the project, but I have a few ideas I'd like to come back to in the future.
All Comments (4)
  • @diego1552
    This is an amazing beginner project! I recently started on my coding journey and I cant wait to make some of my own. Wish you success on your journey!