How to Create SVG Animation using CSS and Javascript
A simple website can become more visually appealing and appealing by using animation. A better user experience is produced by the animated website, which also gives users a method to engage with it in an engaging manner. Using SVG, CSS, and Javascript, you can make an animated website.
In this article, we will learn how to create animation on a website using SVG with CSS and Javascript. We’ll also provide you with some examples of SVG and CSS animations.
What is SVG CSS Animation?
A specific picture format used for vector graphics on the web is called Scalable Vector Graphics (SVG). SVGs allow you to store shape and color data as code rather than as pixel data. You may scale designs in this way without sacrificing their quality or level of detail.
When building animations that must be responsive across various sizes and resolutions, SVGs’ scalability gives them a major benefit. Web designers use code to make SVG images move as intended with SVG CSS animation.
Do you want to learn HTML to React? 🔥
If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions
Get your eBook now! 👇
Now let’s discuss how to create SVG animation with CSS.
How to create SVG animations with CSS
1. Adding a Static SVG in HTML
The first step in creating animation is adding a graphic vector, or static SVG, inside our HTML file. We will be adding a basic structure, which we will be using later on with CSS to add animation.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" width="2000" height="1000" version="1.0">
2. Adding the CSS properties
The group is first moved to a new place (300, 250) on the canvas, then it is rotated by 0 degrees about the point (-200, 130), and finally by 0 degrees around the origin (0, 0). The elements’ position or orientation on the canvas, however, remain unchanged because both rotations are 0 degrees.
<g transform="translate(300, 250)">
<g transform="rotate(0, -200, 130)">
<g transform="rotate(0, 0, 0)">3. Creating the structure and adding CSS animation
A red line that smoothly transitions according to time into different shapes makes up an animated path. The ‘animate’ element in the manner uses the ‘values’ attribute to change the path’s d attribute within 8 seconds, enabling the line to move and change shape at particular time intervals. The animation runs infinitely since the repeatCount parameter is set to “infinite.”
<!-- arms-->
<path d="M0 -100 l0 -45 l0 -45" fill="none" stroke="red" stroke-width="3">
<animate dur="8s" repeatCount="indefinite" attributeName="d" values="
M0 -90 l-5 40 l10 40;
M0 -100 l0 -45 l0 -45;
M0 -100 l45 10 l45 10;
M0 -100 l45 0 l45 0;
M0 -100 l45 -8 l45 -8;
M0 -100 l45 -8 l45 -8;
M0 -80 l45 -18 l45 -18;
M0 -80 l50 10 l50 10;
M0 -80 l-10 50 l50 -50;
M-60 -75 l50 10 l50 -15;
M-60 -50 l50 -15 l50 -15;
M-60 -40 l50 -20 l50 -20;
M-60 -50 l50 -15 l70 -15;
M0 -100 l45 -8 l70 -8;
M0 -100 l45 -8 l45 -8;
M0 -90 l-5 40 l10 40;">
</path>
4. Creating the arms and adding css animation
The stick figure’s arms are created by the <path> element with red strokes, and the ‘animate’ element adjusts the d attribute to animate the movement of the arms. A <circle> element with a radius of 30 is used to indicated the stick figure’s head and is animated to move up and down and left and right to provide the bobbing effect.
5. Creating Legs and adding css animation
On the canvas, it produces two white and two red lines. The red line moves horizontally, simulating walking, while the white line is motionless. A synchronized animation for the stick figure and a looping animation for the lines both run 8 seconds. A walking stick figure, moving lines, and an interactive, dynamic scene are the end result.
<!-- ani leg -->
<g>
<path d="M0 -10 l0 45 l0 45" fill="none" stroke="red" stroke-width="3">
<animate dur="8s" repeatCount="indefinite" attributeName="d" values="
M0 0 l5 65 l-10 65;
M0 -10 l0 70 l0 70;
M0 -10 l0 70 l0 70;
M0 -10 l0 70 l0 70;
M0 -10 l0 70 l0 70;
M0 -10 l70 40 l-70 40;
M0 -10 l0 70 l0 70;
M0 -10 l0 70 l0 70;
M0 -10 l0 70 l0 70;
M0 -10 l0 70 l0 70;
M-60 24 l60 10 l0 80;
M-136 -13 l70 60 l70 60;
M-60 24 l60 10 l0 80;
M0 -10 l70 40 l-70 40;
M0 -10 l0 70 l0 70;
M0 0 l5 65 l-10 65;">
</path>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" fill="freeze" values="
0,0,-10;
0,0,-10;
0,0,-10;
0, 0, -10;
0, 0, -10;
120, 0, -10;
130, -5 , -20;
130, -5 , -20;
130, -5 , -20;
130, -5 , -20;
130, -5 , -20;
130, -5 , -20;
130, -5 , -20;
120, 0 , -10;
0, 0, -10;
0, 0, -10" dur="8s" repeatCount="indefinite" />
</g>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" fill="freeze" values="
0, 25, 80;
0, 25, 80;
0, 25, 80;
0, 25, 80;
0, 25, 80;
0, 25, 80;
0, 25, 80;
-65, 25, 80;
-65, 25, 80;
-65, 25, 80;
-65, 25, 80;
-65, 25, 80;
-65, 25, 80;
0, 25, 80;
0, 25, 80;
0, 25, 80;" dur="8s" repeatCount="indefinite" />
</g>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" fill="freeze" values="
0, -200, 130;
0, -200, 130
0, -200, 130;
0, -200, 130;
0, -200, 130;
0, -200, 130;
0, -200, 130;
0, -200, 130;
15, -200, 130;
15, -200, 130;
15, -200, 130;
15, -200, 130;
15, -200, 130;
0, -200, 130;
0, -200, 130;
0, -200, 130;" dur="8s" repeatCount="indefinite" />
</g>
<path d="M-250 155 l300 0" fill="none" stroke="white" stroke-width="50" />
<path d="M-250 130 l300 0" fill="none" stroke="red" stroke-width="3" />
</g>
</svg>Video Output:
Code By : MikeHarris
How to create SVG animations with Javascript
Javascript is a powerful tool for adding SVG animation, while CSS is a bit easier but offers less options. Javascript allows us to add any kind of animation. We may control the animation’s pace, movement, direction, and many other factors with javascript.
JavaScript and CSS are somewhat similar in how they provide animation. The primary difference will be that we will add animation to our static SVGs using JavaScript functions.
1. Adding Static SVG in HTML
<svg width="108" height="150" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round">
<path id="tip" d="M55,1c22,0,0,48,0,48S33,1,55,1z" fill="none" />
<path d="M21.3,117.5c0-17.4,14.1-31.5,31.5-31.5s31.5,14.1,31.5,31.5" stroke="#333"/>
<path id="lvl" d="M21.3,117.5c0-17.4,14.1-31.5,31.5-31.5s31.5,14.1,31.5,31.5"/>
<g id="arm">
<path d="M2,65 55,117"/>
<circle cx="2" cy="65" r="2">
</g>
<g id="toggle">
<path d="M45.5,145 60.5,145" stroke-width="20" stroke="#444"/>
<circle cx="45.5" cy="145" r="8" stroke="none" fill="#000"/>
</g>
<g id="slower">
<circle cx="20" cy="145" r="10" stroke="none" fill="#444"/>
<path d="M16,145 24,145" />
</g>
<g id="faster">
<circle cx="86" cy="145" r="10" stroke="none" fill="#444"/>
<path d="M82,145 91,145 M86.5,141 86.5,149.5" />
</g>
</svg>
<audio id="snd" src="https://assets.codepen.io/721952/tick.mp3">A basic audio control interface with buttons for play/pause, speed adjustment, and a level indicator is present in this section of the SVG code. The interface is visually appealing thanks to the use of numerous graphical elements including lines, circles, and paths. Buttons and indicators in the present version do nothing specific, and there is no interactive activity.
2. Style SVG using CSS
html, body {
width:100%;
height:100%;
overflow:hidden;
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
background:#111;
}
svg {
overflow:visible
}
#toggle, #slower, #faster {
cursor:pointer;
}
We will set the width and height to 100% to fill the whole viewport of the elements using the html and body tag selectors.
In order to hide any overflowing material, the overflow attribute is set to “hidden”. The items are aligned to the center both horizontally and vertically (align-items: center; justify-content: center).
We have added thr background colors as black . it can be used to produce images or visual elements that extend beyond its borders, the SVG element is allowed to display overflowing content (overflow: visible).
ADVERTISEMENT
ADVERTISEMENT
3. Adding Animation to SVG with Javascript
let tempo = 3
const toggle = document.querySelector('#toggle')
const slower = document.querySelector('#slower')
const faster = document.querySelector('#faster')
const snd = document.querySelector('#snd')
const tl = gsap.timeline({repeat:-1, paused:true})
.to('#arm', {duration:1, rotate:90, ease:'power2.inOut', yoyo:true, repeat:1, transformOrigin:'100% 100%'}, 0)
.add(()=>{ swing(-1) }, 0.5)
.add(()=>{ swing(1) }, 1.5)
function swing(dir){
gsap.timeline()
.to('#tip', {duration:0.25, rotate:40*dir, transformOrigin:'50% 19%', ease:'power3'})
.to('#tip', {duration:0.35, rotate:0, ease:CustomEase.create('ez', 'M0,0 C0.06,0.002 0.148,0.026 0.186,0.17 0.211,0.274 0.27,1.074 0.552,1.086 0.635,1.089 0.736,0.991 0.81,0.976 0.894,0.957 0.938,1.012 1,1 ')}, '-=0.1')
const s = snd.cloneNode()
s.volume = 0.33
s.play()
}
slower.onclick =()=>{
(tempo>1) ? tempo-- : tempo=1
setTempo()
gsap.fromTo('#slower circle', {attr:{fill:'#999'}},{attr:{fill:'#444'}, ease:'expo'})
}
faster.onclick =()=>{
(tempo<10) ? tempo++ : tempo=10
setTempo()
gsap.fromTo('#faster circle', {attr:{fill:'#999'}},{attr:{fill:'#444'}, ease:'expo'})
}
toggle.onclick =()=>{
if (tl.isActive()) {
gsap.to('#toggle path', {attr:{stroke:'#333'}})
gsap.to('#toggle circle', {duration:0.3, x:0, ease:'power3.inOut'})
tl.pause()
} else {
gsap.to('#toggle path', {attr:{stroke:'#fff'}})
gsap.to('#toggle circle', {duration:0.3, x:15, ease:'power3.inOut'})
tl.play()
}
}
function setTempo(){ //console.log(tempo)
gsap.set('#lvl', {attr:{'stroke-dasharray':tempo+'0 '+(10-tempo)*10}})
tl.timeScale( gsap.utils.mapRange(1,10,0.7,4,tempo) )
}
setTempo()We’ll create a variable called “tempo” using the let keyword and initialize it with the value “3,” . Using document.querySelector(), it then chooses the audio element with the ID’snd’, three elements with the IDs ‘toggle’,’slower’, and ‘faster’. The ‘arm’ element’s swing animations are produced by a timeline (‘tl’) defined by the GSAP library. Additionally, it creates click event handlers for the’slower’, ‘faster’, and ‘toggle’ components so that users can change the audio playback speed and switch between the animations.
ADVERTISEMENT
The ‘tempo’ variable is changed when the’slower’ or ‘faster’ buttons are selected, and the’setTempo()’ function changes the playback speed and visual indicator on the ‘lvl’ element. The timeline (‘tl’) button’s ‘toggle’ feature enables users to halt or resume the animation. It switches from active to pause mode when the animation is in progress, and vice versa. Additionally, the’swing()’ function is used when any button is clicked to animate the ‘tip’ element and play an audio file.
ADVERTISEMENT
Video Output:
ADVERTISEMENT
Code By: Tom Miller
Now We have Successfully provided you with the ways through which you can add SVG animation using CSS and javascript. We hope you understood the project, If you have any doubts feel free to comment!!
If you find out this Blog helpful, then make sure to search Codewithrandom on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
Follow: CodewithRandom
Author: Arun
