Blog
Select Page

Draw any SVG path from 0 to 100% – using GSAP

Misc

See the Pen Draw any SVG path from 0 to 100% by Puneet Sharma (@webdevpuneet) on CodePen.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Animation</title>
  <!-- GSAP and DrawSVGPlugin -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
  <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js"></script>
</head>

<body>
<!--   <h2>Below commented SVG has double stroke and it follows those both stokes </h2> -->
<!--   <svg width="328" height="169" viewBox="0 0 328 169" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="path" fill-rule="evenodd" clip-rule="evenodd" d="M241.547 61.9962C256.279 65.6963 267.386 71.2506 278.413 77.1542C314.573 96.5295 323.726 115.765 293.607 125.649C246.787 140.951 147.301 135.092 74.7818 110.489C58.7195 105.048 36.794 98.4612 22.3352 86.6437C8.88441 75.6542 11.5699 66.896 20.4271 60.2566C29.4588 53.4378 44.9124 48.8086 56.9428 46.3164C109.53 35.4657 209.342 37.5978 293.066 67.9112C294.79 68.5209 296.641 68.5829 297.292 68.0709C297.943 67.559 297.212 66.6806 295.615 66.1001C209.432 34.8987 106.485 32.4924 52.3602 43.6581C37.389 46.7726 17.2827 53.0981 9.74045 62.7005C4.62836 69.2733 5.29621 77.3511 16.9412 86.9291C32.2907 99.5052 55.5555 106.639 72.6049 112.421C147.47 137.824 250.353 143.967 298.626 128.144C331.044 117.531 321.418 96.8874 282.53 76.0568C270.68 69.6778 258.468 63.7106 242.477 59.6949C240.714 59.2527 239.08 59.4104 238.928 60.0697C238.649 60.6997 239.911 61.5831 241.547 61.9962Z" stroke="#33833F" stroke-width="5"/>
</svg> -->

  <h2>Follows single stroke path, not fill </h2>
<svg width="311" height="101" viewBox="0 0 311 101" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="path" d="M289.495 31.2048C234.206 1.09257 28.3241 -11.9617 4.33036 28.1296C3.70999 29.1661 3.29755 30.3284 3.13526 31.5255C-4.05044 84.5298 277.327 120.254 306.495 80.7048C313.496 71.7048 298 45 231 25" stroke="#33833F" stroke-width="5" stroke-linecap="round"/>
</svg>

</body>

</html>

Script

 // Initial setup: set path to be invisible by setting drawSVG to "0 0"
  gsap.set("#path", { drawSVG: "0 0" });

  // Animate on page load to go from "0 100%"
  gsap.to("#path", {
    drawSVG: "0 100%", // vary this for diff. parts of svg's start & end positions
    duration: 1.5, // in seconds
    ease: "power1.inOut"
  });