Animating Dots & Dashes
27 Jan 2017 |svg
tutorial
Using dashed-dotted-lines to create sweet and simple animations.
These are the dotted and dashed lines.
But we can’t animate those lines [yet].
They are made using CSS’s border property and it is up to the browser to decide how much space must be between individual dots and dashes.
<style>
#demo-1 {
border-width: 4px;
border-color: silver;
border-bottom-style: dashed;
border-top-style: dotted;
}
</style>
<div id="demo-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
CSS animations
With CSS animations,
<style>
#demo-2 {
background-image: linear-gradient(
to right,
silver 50%,
transparent 0%
);
background-size: 8px 4px;
background-repeat: repeat-x;
background-position: 0% bottom;
animation-name: border-dance;
animation-duration: 24s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes border-dance {
from {
background-position: 0% bottom;
}
to {
background-position: 100% bottom;
}
}
</style>
<div id="demo-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
Psuedo selector classes
Add ::before and ::after to the mix and we have this
<style>
#demo-3 {
position: relative;
}
#demo-3:before {
content: ' ';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-image: linear-gradient(
to right,
silver 50%,
transparent 0%
);
background-size: 20px 4px;
background-repeat: repeat-x;
background-position: 0% bottom;
animation-name: demo-3-before;
animation-duration: 24s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes demo-3-before {
0% {
background-position: 0% bottom;
}
100% {
background-position: 100% bottom;
}
}
#demo-3:after {
content: ' ';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-image: linear-gradient(
to right,
silver 50%,
transparent 0%
);
background-size: 20px 4px;
background-repeat: repeat-x;
background-position: 0% bottom;
animation-name: demo-3-after;
animation-duration: 28s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes demo-3-after {
0% {
background-position: 0% bottom;
}
100% {
background-position: 100% bottom;
}
}
</style>
<div id="demo-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
SVG
Even with CSS animations and psuedo-selector classes, there’s strict limitation to what can be achieved. It’s possible to create complex animations, but this post aims to keep things simple.
For even finer control, we turn to SVG. As we all know, SVG stands for Scalable Vector Graphics - Graphics being the keyword here.
SVG provides fine tuned control over out dots and dashes.
<?xml version="1.0"?>
<style>
#demo-4 {
display: table;
margin: auto;
}
#demo-4 line {
stroke: black;
stroke-width: 2;
}
</style>
<svg
version="1.1" xmlns="http://www.w3.org/2000/svg"
id="demo-4" width="30%" height="130"
>
<line
x1="0" y1="10" x2="100%" y2="10"
stroke-dasharray="10"
/>
<line
x1="0" y1="30" x2="100%" y2="30"
stroke-dasharray="10, 10"
/>
<line
x1="0" y1="50" x2="100%" y2="50"
stroke-dasharray="15, 10, 5"
/>
<line
x1="0" y1="70" x2="100%" y2="70"
stroke-dasharray="10" stroke-dashoffset="1"
/>
<line
x1="0" y1="90" x2="100%" y2="90"
stroke-dasharray="10" stroke-dashoffset="4"
/>
<line
x1="0" y1="110" x2="100%" y2="110"
stroke-dasharray="10" stroke-dashoffset="7"
/>
</svg>
You can try out the interactive demo below to test out the parameters.
If you set Dash Array to the max and vary Dash Offset, you will see a line, not a small dashes, running from one end to the other.
We will use combinations of these two parameters to create animations
The code for the final demos are a bit bulky to display here. You can view them here on github: