Categories
#SVG Web development

SVG Path Drawing Animation

Path Drawing Animation

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

*animation opened in the Safari browser.
To see the live output of the animation 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).

Step1.

Add HTML

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

SVG Path drawing
<svg id="heart" xmlns="http://www.w3.org/2000/svg" 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>

Step2.

Add CSS

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;
  
}

.cls-1{
       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 lenastanley.com.

Enjoy coding!

Leave a Reply