The complete guide to SVG

Web Animations API

Animation on the web has always been possible through the use of Flash, jQuery, CSS or SMIL. The Web Animations API aims to achieve a mixture of all of these by using the power and simplicity of CSS animations and the flexibility of Javascript to interact with elements on the page, including SVG, leaving the browser to deal with performance. Whether you're animating in CSS or Javascript, they will both harness the power of the same underlying engine.

Complex animation

For simple animations, the Web Animations API in Javascript is sufficient and although it is capable of complex animations there are a number of libraries you can use to speed up your workflow and again easier cross browser support. The standard is GSAP; having been around for ten years now, these libraries are mature and battle tested with many award winning websites and animations utilising them.

How to create SVG animation

01. Edit the SVG

In order to target the stars to animate them we'll need to edit the SVG to add a class to the group containing the stars. We can identify this group using devtools.

02. Set the default opacity

If we were to leave the opacity set to the default of 1 the stars would all be bright to begin with. Setting them to '0.3' will fade them by default and set a default opacity.

.stars-group path {
 opacity: 0.3; }

03. Create the animation

Next, we need to create our animated blinking effect. Since we've already set the default opacity our keyframe animation will only need to change at the middle point.

@keyframes blink {
  50% {
    opacity: 1;
  }	
}

04. Apply the animation

In order to apply animation we target the stars group and then the path's inside of it and apply our animation. This will apply the same animation which is fine except they all blink at the same time.

.stars-group path {
 animation: blink 2s infinite; }

05. nth:child

To stop all of the stars blinking at the same time we can use nth-child to target groups of stars. We will use '8n' in order to target every eighth star.

.stars-group path:nth-child(8n) {
 animation: blink 2s infinite; }

06. Delays

Since we're only targeting every 8th star with our nth-child selector we need to provide the remaining stars using the nth-child and then taking a number away all the way up to '- 7'. Each time we do this we increase the delay of the animation to stagger the blinking.

.stars-group path:nth-child(8n – 1) {
 animation: blink 2s 0.25s infinite; }
.stars-group path:nth-child(8n – 2) {
animation: blink 2s 0.5s infinite; }

Next: The power of sprites