veltman/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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:

You can only animate the dash "backwards" in this way, so you may need to reverse the path's direction for the desired effect.
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="http://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>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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="http://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>