Create and animate SVG polygons

In this tutorial we will be creating a range of images out of SVG triangles, and setting up an animated transition from one image to another on click. It’ll look something like the Faces of Power website. These animations can really add interest to a site, particularly a landing page, as well as enhance user experience. If you've got a complex site to maintain, you will need a super web hosting service. building something less complicated? A website builder might do the job.

To kick off we are going to start with two arrays: one with the values we’re animating to, and one with the values we’re animating from. Every time a link is clicked, we are going to find the SVG that matches the href of that link and get the points attribute of each of the polygons in that specific SVG. 

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Nataliya is a web developer specialising in HTML, CSS and JavaScript.
Latest in 2D Animation
Character design
How to simplify figures for animation
art tutorial
How to create dynamic action scenes in Clip Studio Paint
iOS 17
Apple's joyful iOS 17 animations mesmerise iPhone fans
Studio ghibli food
The tantalising secret behind Studio Ghibli's iconic food animation
Reallusion
How to make broadcast-quality children's animations with Cartoon Animator
Reallusion
Hi From the Future - remotely making an animated music video
Latest in How to
Gesture drawing: all you need to know plus ways to practise in 2 and 5 minutes
How to draw a male figure
drawing of a naked woman with someone drawing it
How to draw a female figure
GIMP in pro work
Making GIMP 3.0 work for pro results: is it possible?
Pejman Rajabi 3D tutorial of Super Mario fan art
“One of the best creative experiences of my life, working with such an amazing artistic crew” – how VFX artist Pejman Rajabi and friends created a heartfelt tribute to Super Mario
Marco Teixeira 3D tutorial
“The challenge was to create a cool character design”: concept artist Marco Teixeira reveals the techniques and inspiration behind his superb 3D character render