Web development

SVG Path Drawing Animation

Path Drawing Animation

The <path> element is used to define a path. It can draw anything you like!


To see the live output of the animation on the website click here.

To create SVG Path Drawing Animation we’ll use the same SVG path from the tutorial – SVG Draw on Scroll (which I created in Adobe Illustrator).



Get an SVG path (make sure that your shape has a stroke).

SVG Path drawing
<svg id="heart" xmlns="" viewBox="0 0 348.43 311.23"><defs><style>.cls-1{fill:none;stroke:#be1622;stroke-miterlimit:10; }</style></defs><title>heart</title><path class="cls-1" d="M340.67,131.25c18.71-30.63,56.59-48.3,92.07-43s66.5,33.36,75.38,68.13c6.22,24.37,2.19,50.32-5.52,74.26-3.88,12.06-8.72,23.89-15.53,34.57s-15.51,20.05-24.35,29.15a861.3,861.3,0,0,1-120.45,103c-32.42-26.2-66.67-45.07-97.36-71.12-14.78-12.55-27.69-27.18-39.75-42.36-15.45-19.44-29.86-40.37-36.88-64.19-8.22-27.87-5.39-59.21,9.37-84.24C194.56,106.85,227,88,260.28,87.45s63.31,15.29,81.13,43.43Z" transform="translate(-163.24 -86.84)"/></svg>



We will use the stroke-dasharray property for creating dashes in the stroke of SVG shapes, and also a stroke-dashoffset property to define the location along an SVG path where the dash of a stroke will begin.

body {
  background-color: #2a9d8f; 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

svg {
  width: 100%;
  max-width: 400px;
  padding: 150px;

       stroke-width: 3px;
       stroke-dasharray: 1200;
       stroke-dashoffset: 1200;
       animation: draw 3s linear forwards infinite;

@keyframes draw {
  to {
    stroke-dashoffset: 0;

To see the live output of the animation go to

Enjoy coding!

Read also:

Baggage Scan /SVG & JavaScript Animation

SVG Handwriting Animation

SVG Draw on Scroll