SVG’s path is a very powerful attribute! It can be used to achieve a lot of interesting animation effects, such as now very popular stroke drawing animation effect and so on.

Today’s article uses SVG Path to animate a cool page transition. To improve development efficiency, Pug and Sass are used to write HTML and CSS in the two HTML and CSS precompiled languages.

The effect to be achieved is shown in the picture below, which was inspired by Clement Brichon’s Dribble effect.

One idea for this effect is to use SVG Path to create a black layer on top of the background image, and then change the path property to create the animation shown along the way.

It is important to note that SVG is not currently supported by all browsers, especially desktop devices. But it works on modern browsers like Chrome.

SVG path animation

This animation is mainly implemented using SVG Path, which is a stroke drawing animation effect. Check out the previous article on the effects of stroke drawing animations. Also check out the introduction of these two articles:

Animated Line Drawing in SVG by Jake Archibald.

How SVG Line Animation Works by Chris Coyier.

This time we are using a slightly different technique. We are using stroke-dasharray to animate strokes instead of using stroke-dasharray to animate strokes. Using stroke-Dasharray gives you more flexibility, such as controlling the direction of your path. For more details, check out a previous article.

Use Pug to write HTML

To get started, use the efficient template engine Pug(better known as Jade) to write HTML, as shown in this tutorial.

Pug’s syntax is very simple, using features such as variables to write HTML. Take a look at the code below to see how simple it is.

//- Background image and button <div class="background-image"></div> <button>Toggle Animation</button> //- Some variables to help with maths - var circlesNumber = 5; - var strokeWidth = 150; - var radius = 100; - var width = radius * 2; - var height = radius * 2; - var left = width / 2; - var top = height / 2; //- The main function to build a circle (SVG path) //- Formula taken from this answer: http://stackoverflow.com/a/10477334 mixin circle(className) <path class="#{className}" d="M #{left} #{top} m -#{radius} 0 a #{radius} #{radius} 0 1 0 #{radius * 2} 0 a #{radius} #{radius} 0 1 0 -#{radius * 2} 0"/> //- Center circle <svg class="svg-center" width="#{width}" height="#{height}"> + circle('path-center') </svg> //- Reset some variables to build  the other circles - width = 10000; - height = 5000; - left = width / 2; - top = height / 2; - radius += strokeWidth / 2 - 1; //- Very big SVG <svg class="svg-borders" width="#{width}" height="#{height}"> //- Build the circles, increasing the radius at each iteration while circlesNumber-- + circle('path-borders') - radius += strokeWidth - 1; </svg>Copy the code

From the code above, we used SVG Path to generate some circles and then used some styles to make the circles large enough to cover the background image.

SVG Path (path) draws animation

With the basic structure in place, let’s use SVG Path to animate. The code is as follows:

// Same variables used in HTML $circlesNumber: 6; $strokeWidth: 150; $radius: 100; // Approximately $PI: 3.15; // A big length $maxLen: 10000; // Loop to generate convenient stroke-* values @while $circlesNumber > 0 { // Calculate the SVG path length (approximately) $currentRadius: $radius + ($circlesNumber) * $strokeWidth - $strokeWidth / 2; $len: 2 * $pi * $currentRadius; // Draw the entire path .path-borders:nth-child(#{$circlesNumber}) { stroke-dashoffset: $maxLen; stroke-dasharray: $maxLen 0 $len; } .open-state { // "Erase" the path, with alternating direction .path-borders:nth-child(#{$circlesNumber}) { @if ($circlesNumber % 2 == 0) { stroke-dasharray: $maxLen 0 0; } @else { stroke-dasharray: $maxLen $len $len; } } } // Next iteration $circlesNumber: $circlesNumber - 1; }Copy the code

Let’s take a look at the compiled CSS animation output:

.path-borders:nth-child(2) { stroke-dashoffset: 10000; Stroke - dasharray: 10000 0, 2047.5; } .open-state .path-borders:nth-child(2) { stroke-dasharray: 10000 0 0; }Copy the code

As you can see, if you write in CSS, you have to calculate the length of each path manually, which is a bit of work. If you use SCSS, you can calculate the length of each path automatically, rather than manually.

Some animation details

Finally, in order to make the animation more delicate, we need to polish some animation details.

.open-state { // Scaling down the image .background-image { transform: scale(1); } // Rotating SVG paths (except the center circle) .svg-borders { transform: translate(-50%, -50%) rotate(90deg); } // Animating the center circle .path-center { stroke-width: 400px; }}Copy the code

A cool transition animation is done. Demo experience address.

For more details on the code, go to Github.

This article is mainly compiled from the article Creative Splash Transition with CSS and SVG, there are omissions, omissions or inadequacies in understanding, please give me more advice!