HTML5 Tutorial: SVG Shape Morphing

Step 1 Introduction

It’s very easy to animate svg (Scalable Vector Graphics) and comfortable. We can make batter graphics using svg. Here, we need to define actual path of shape and will convert it into different shape. Let’s see how it’s possible.

Step 2 Most Important

The shapes should be the same number of points
We need same numbers of points of shapes, Otherwise it’s not possible to convert into different shape. We are just re-arranging points. Let’s make it possible.

2.1 Select a shape

Select a shape which you want to convert it into different shape.
Here is the demo of shape which selected.

2.2 Select different shape with those same points.

Need to select shape which has same points as first shape.
Here is the demo of shape which into convert.

2.3 Starting element of SVG tag

<svg viewBox="0 0 194.6 185.1">
<polygon Fill="#FFFFFF" points="points first shape">
</polygon>
</svg>

2.4 Animation element which convert into different shape

<svg viewBox="0 0 194.6 185.1">
<polygon Fill="#FFFFFF" points="...points first shape...">
<animate attributeName="points" dur="500ms" to="... points second shape...">
</polygon>
</svg>

That animation will run immediately, so we'll need to fix that up a bit.

2.5 Animation Trigger

This SVG is just a part of a <button> and you can run the animation on click of that button.
First need to give the animation an ID so we can use it with JavaScript, and then prevent it from running with:

<animate id="animation-to-open" begin="indefinite".../>

You can use it in JavaScript as follows:

animationToOpen = document.getElementById("animation-to-close")
// run this on a click or whenever you want
animationToOpen.beginElement();

Step 3 DEMO

3.1 CSS

<style type="text/css">
button { border: 0;
background: linear-gradient(
to bottom,
#444,
#111
);
border-radius: 10px;
padding:4px 30px 11px;
outline: 0;
display: inline-block;
width: 220px;
text-align: left;
}
button:hover, button:active {
background: black;
}
button svg {
width: 40px;
height: 40px;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
button span {
font-size: 22px;
position: relative;
top: 10px;
color: white;
}
body {
padding: 20px;
text-align:center;
background:#993030;
}
</style>

3.2 JS

$(document).ready(function(e) {
var icon = document.getElementById("button"),
buttonText = document.getElementById("button-text"),
animationToClose = document.getElementById("animation-to-open"),
animationToOpen = document.getElementById("animation-to-close"),
animationToYellow = document.getElementById("animation-to-white");
 
button.addEventListener('click', function() {
if (button.classList.contains("opened")) {
button.classList.remove("opened");
animationToOpen.beginElement();
animationToYellow.beginElement();
buttonText.innerHTML = "Open";
} else {
button.classList.add("opened");
animationToClose.beginElement();
//animationToGreen.beginElement();
buttonText.innerHTML = "Opened!";
}
}, false);
 
});

3.3 HTML

<button id="button">
    <svg viewBox="0 0 194.6 185.1" xmlns="http://www.w3.org/2000/svg">
        <polygon fill="#FFFFFF" points="77.3,120 0,60.9 145.6,60.7 145.9,80.1 143.4,185.1 0,183.5 0,70.1 98.6,158.1 50,170.7 147.2,60.9">
        <animate id="animation-to-open" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="77.3,10 0,60.9 145.6,60.7 145.9,80.1 143.4,185.1 0,183.5 0,70.1 98.6,158.1 50,170.7 147.2,60.9"/>
        <animate id="animation-to-close" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="77.3,120 0,60.9 145.6,60.7 145.9,80.1 143.4,185.1 0,183.5 0,70.1 98.6,158.1 50,170.7 147.2,60.9"/>
        <animate id="animation-to-white" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#FFFFFF"></animate>
        </polygon>
    </svg>
    <span id="button-text">Open</span>  
</button>

I hope you found this blog helpful while working on SVG Shape Morphing. Let me know if you have any questions or concerns regarding HTML 5, please put a comment here and we will get back to you ASAP

Got an Idea of Web Development? What are you still waiting for? Contact us now and see the Idea live soon. Our company has been named as one of the best Web Development Company in India.

Milind Goratela

I am passionate Web Designer. Love to develop website with HTML 5 and CSS 3. And also like to share tips & tricks about latest web trends