Skip to content

Instantly share code, notes, and snippets.

@veltman

veltman/README.md

Last active February 12, 2022 07:14
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save veltman/e23c36540c7e89f774d5c663090933c7 to your computer and use it in GitHub Desktop.
Save veltman/e23c36540c7e89f774d5c663090933c7 to your computer and use it in GitHub Desktop.
Download ZIP
Animated dash
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:

  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.
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment