Animating Dots & Dashes

Using dashed-dotted-lines to create sweet and simple animations.

These are the dotted and dashed lines.

Lorem ipsum dolor sit amet, consectetur adipisicing elit


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,

Lorem ipsum dolor sit amet, consectetur adipisicing elit


<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

Lorem ipsum dolor sit amet, consectetur adipisicing elit


<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.

Dash Array 10
Dash Offset 0


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: