Creating an animated dashed line background with SVG and CSS
In this tutorial I will show you how to create a neat SVG background animation using CSS animation. This pattern was built for the Pancakes Builder landing page. Pancakes is an upcoming free website builder for Hugo, a powerful static site generator.
Creating the SVG
Start off by making a straight line with the <line> tag wrapped in the <svg> tag like this:
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<line x1="0" y1="15" x2="100%" y2="15" />
</svg>The width and height should be to 100% since the SVG will need to be stretched to fit the screen width and height. On <line>, the x1 and x2 values are defined as the horizontal starting and ending points of a line, while y1 and y2 are the vertical starting and ending points. The current values will create a simple, straight line that fills the screen width at 100%.
To create the dashes, we will use the stroke-dasharray property. The first value is the stroke size and the second is the space in between each dash. Let’s use CSS to define the values 66 and 16 to start like so:
line {
stroke: #f4f4f4;
stroke-dasharray: 66, 16;
}Now you should have one simple dashed line. To increase the line stroke weight and give it rounded edges, you can define them with CSS:
line {
...
stroke-width: 10;
stroke-linecap: round;
...
}Time to create the pattern. Adjust the code in the <svg>:
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<defs>
<pattern id="pancakes-pattern" x="0" y="0" width="100%" height="200" patternUnits="userSpaceOnUse">
<line x1="0" y1="15" x2="100%" y2="15" />
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pancakes-pattern)"></rect>
</svg>With CSS, set the height of <svg> to 100vh. The pattern will then cover 100% of the current viewport height. However, you will notice that there are some blank space in the pattern.
At this point it is just all about calculating how much space for each <line> on each row by changing the y1 and y2 values. Starting from the first <line> having y1 and y2 values of 15, add 25 each time for each row. In this instance, the next few <line> tags would look like the following:
...
<line x1="0" y1="40" x2="100%" y2="40" />
<line x1="0" y1="65" x2="100%" y2="65" />
<line x1="0" y1="90" x2="100%" y2="90" />
...Keep adding the values until the pattern does not have anymore blank space.
Nesting the <pattern>
To add the colored area to the pattern, the <svg> code is edited to be:
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<defs>
<pattern id="pancakes-pattern" x="0" y="0" width="100%" height="200" patternUnits="userSpaceOnUse">
<line x1="0" y1="15" x2="100%" y2="15" />
...
<line x1="0" y1="215" x2="100%" y2="215" />
</pattern>
<pattern id="logo" x="0" y="0" width="100%" height="200" patternUnits="userSpaceOnUse">
<line x1="0" y1="15" x2="100%" y2="15" />
...
<line x1="0" y1="215" x2="100%" y2="215" />
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pancakes-pattern)"></rect>
<rect x="22%" y="27%" width="250" height="150" fill="url(#logo)"/>
</svg>And add this to the CSS:
#logo line {
stroke: #ffd05e;
}Animating the <pattern>
Using CSS animations, we can use the stroke-dashoffset property to animate the lines. First, set the <line> to have a value for stroke-dashoffset:
line {
...
stroke-dashoffset: 82;
}Then create a @keyframes rule and set the stroke-dashoffset to 0:
@keyframes lineMove {
to {
stroke-dashoffset: 0;
}
}Finally, use the CSS :nth-child selector for the <line> tag. Define them with odd and even values and have the even value play the animation in reverse like this:
line:nth-child(odd) {
animation: lineMove 2s infinite linear;
}line:nth-child(even) {
animation: lineMove 2s infinite linear reverse;
}
Wrapping Up
Here is how the SVG code should look when completed:
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<defs>
<pattern id="pancakes-pattern" x="0" y="0" width="100%" height="200" patternUnits="userSpaceOnUse">
<line x1="0" y1="15" x2="100%" y2="15" />
<line x1="0" y1="40" x2="100%" y2="40" />
<line x1="0" y1="65" x2="100%" y2="65" />
<line x1="0" y1="90" x2="100%" y2="90" />
<line x1="0" y1="115" x2="100%" y2="115" />
<line x1="0" y1="140" x2="100%" y2="140" />
<line x1="0" y1="165" x2="100%" y2="165" />
<line x1="0" y1="190" x2="100%" y2="190" />
<line x1="0" y1="215" x2="100%" y2="215" />
</pattern>
<pattern id="logo" x="0" y="0" width="100%" height="200" patternUnits="userSpaceOnUse">
<line x1="0" y1="15" x2="100%" y2="15" />
<line x1="0" y1="40" x2="100%" y2="40" />
<line x1="0" y1="65" x2="100%" y2="65" />
<line x1="0" y1="90" x2="100%" y2="90" />
<line x1="0" y1="115" x2="100%" y2="115" />
<line x1="0" y1="140" x2="100%" y2="140" />
<line x1="0" y1="165" x2="100%" y2="165" />
<line x1="0" y1="190" x2="100%" y2="190" />
<line x1="0" y1="215" x2="100%" y2="215" />
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pancakes-pattern)"></rect>
<rect x="22%" y="27%" width="250" height="150" fill="url(#logo)"/>
</svg>And the CSS:
svg {
height: 100vh;
}line {
stroke: #f4f4f4;
stroke-width: 10;
stroke-linecap: round;
stroke-dasharray: 66, 16;
stroke-dashoffset: 82;
}line:nth-child(odd) {
animation: lineMove 2s infinite linear;
}line:nth-child(even) {
animation: lineMove 2s infinite linear reverse;
}#logo line {
stroke: #ffd05e;
}@keyframes lineMove {
to {
stroke-dashoffset: 0;
}
}
That’s it! This is my first article here on Medium and I wanted to share my process on how I made this SVG line animation background. Referencing the MDN Web Docs and Using SVG with CSS3 and HTML5 (O’Reilly) helped me with understanding and creating this animation.
When I’m not writing, I’m helping businesses go further, faster at Fullstack Digital. We provide digital brand strategy, design, development, and marketing for forward-thinking companies. Check out some of our work here.
