block by veltman e23c36540c7e89f774d5c663090933c7

Animated dash

Full Screen

Animating a path’s dashed stroke without JavaScript using stroke-dasharray and stroke-dashoffset. As long as you animate the offset to be equal to one full dash group (e.g. stroke-dasharray: 10,5 and stroke-dashoffset: -15), the animation will appear continuous.

Two caveats:

  1. You can only animate the dash “backwards” in this way, so you may need to reverse the path’s direction for the desired effect.
  2. If the path is closed, you might get a tiny “seam” at the start/end of the path where the dash doesn’t line up. To fix that, you can ensure that the dash group is a factor of the path length like in this example.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <style>
    path {
      fill: none;
      stroke: black;
      stroke-width: 2px;
      stroke-dasharray: 12,8,4,8;
      -webkit-animation: move 0.4s infinite linear;
      animation: move 0.4s infinite linear;
    }

    @-webkit-keyframes move {
      0% {
        stroke-dashoffset: 0;
      }

      100% {
        stroke-dashoffset: -32;
      }
    }

    @keyframes move {
      0% {
        stroke-dashoffset: 0;
      }

      100% {
        stroke-dashoffset: -32;
      }
    }

  </style>
</head>
<body>
  <svg version="1.1" xmlns="//www.w3.org/2000/svg" width="960" height="500">
    <path d="M636.5,315c-0.4-18.7,1.9-27.9-5.3-35.9
    	c-22.7-25-107.3-2.8-118.3,35.9c-7,24.4,20.6,37.2,16,71c-4,29.6-30.8,60.7-56.5,61.1c-30.8,0.4-32.9-43.8-81.7-70.2
    	c-50.9-27.6-110.1-12.9-125.2-9.2c-66.1,16.4-82.2,56.9-109.2,47.3c-38-13.6-55.9-112.1-19.8-143.5c39-34,121.2,27.7,148.1-3.8
    	c18-21.1,3.1-74.3-25.2-105.3c-31.1-34.1-70.1-32.4-105.3-76.3c-8.2-10.2-16.9-23.8-15.3-39.7c1.2-11.4,7.5-23.3,15.3-29
    	c33.8-25,101.6,62.6,193.1,59.5c40.1-1.3,38.7-18.5,99.2-38.9c126.2-42.6,242.4-4.9,297.7,13c54.7,17.7,105.4,35,129.8,82.4
    	c13,25.3,22.9,67.7,4.6,87c-11.6,12.3-25.1,5.1-46.6,20.6c-2.8,2-28.9,21.4-32.1,49.6c-3.1,27.4,18.7,35,29,70.2
    	c8.8,30.1,8.5,77.8-18.3,99.2c-32.3,25.8-87,0.6-100-5.3c-69.6-32-67.2-88.4-73.3-109.2z"/>
  </svg>