17Animate Along a Path

II · Drawing with SVG
SMIL sends a dash of light around a tangled scribble.
Click
Source

2 files
<head>
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <svg width="250" viewBox="0 0 15 18">
    <!-- background -->
    <path
      d="M14 5.90968C14 5.90968 12.8403 1.19575 7.91139 1.00639C2.98244 0.817033 1.42001 4.88117 1.12694 6.92737C0.833871 8.97357 0.881464 13.037 3.12748 15.2537C5.3735 17.4704 8.11821 17.075 9.56208 16.734C11.006 16.3929 12.9214 15.2174 13.2172 12.8483C13.5129 10.4792 12.0864 8.96269 9.47703 8.50011C6.86763 8.03754 5.28195 8.77766 5.07004 10.6679C4.85814 12.5581 8.25931 13.7735 9.65099 11.9232C11.0427 10.0729 10.5208 7.01987 9.91193 6.18724C9.30307 5.3546 7.91139 4.98454 7.04159 5.16957C5.75156 5.444 5.21501 6.37227 5.21501 6.37227"
      stroke="var(--gray6)"
      stroke-width="1.5"
      fill="none"
    />
    <path
      d="M14 5.90968C14 5.90968 12.8403 1.19575 7.91139 1.00639C2.98244 0.817033 1.42001 4.88117 1.12694 6.92737C0.833871 8.97357 0.881464 13.037 3.12748 15.2537C5.3735 17.4704 8.11821 17.075 9.56208 16.734C11.006 16.3929 12.9214 15.2174 13.2172 12.8483C13.5129 10.4792 12.0864 8.96269 9.47703 8.50011C6.86763 8.03754 5.28195 8.77766 5.07004 10.6679C4.85814 12.5581 8.25931 13.7735 9.65099 11.9232C11.0427 10.0729 10.5208 7.01987 9.91193 6.18724C9.30307 5.3546 7.91139 4.98454 7.04159 5.16957C5.75156 5.444 5.21501 6.37227 5.21501 6.37227"
      stroke="currentColor"
      stroke-width="1.5"
      stroke-dasharray="8 70"
      stroke-linecap="round"
      fill="none"
    >
      <animate attributeName="stroke-dashoffset" to=-70" dur="1.5s"
      begin="play.click" calcMode="spline" keyTimes="0;1" keySplines="0.37 0
      0.63 1;" fill="freeze" />
    </path>
  </svg>
  <button id="play">Play</button>
  <script src="/index.js" type="module"></script>
</body>