• SVG stands for Scalable Vector Graphics
• SVG is used to define vector-based graphics for the Web
• SVG defines the graphics in XML format
• SVG graphics do NOT loose any quality if they are zoomed or resized
• >Every element and every attribute in SVG files can be animated
• SVG is a W3C recommendation
• SVG integrates with other W3C standards such as the DOM and XSL

SVG Path – <path>

The <path> element is used to define a path.

The following commands are available for path data:

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bézier curve
• T = smooth quadratic Bézier curveto
• A = elliptical Arc
• Z = closepath

so we can use adobe illustrator,inscape or many more online drawing tools for create our svg. I’m using adobe illustrator.in this post we are going to add animation to svg path drawing

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 474.25 474.25">

<title>Wordpress-Logo</title>
<path class="wp" d="M250,35A214.15,214.15,0,0,1,395.39,91.69c-18.76-.5-37.48,10.65-38.25,36.18-1.58,51.62,61.73,62.62,27.62,166.45l-28.22,85.89L279.69,153.85c-1.19-3.5.19-5.5,4.5-5.5h21.73A2.11,2.11,0,0,0,308,146.2V133.33a2.08,2.08,0,0,0-2.05-2.14q-61.71,2.7-122.7,0a2.08,2.08,0,0,0-2.05,2.15v12.87a2.11,2.11,0,0,0,2.05,2.14h21.84c4.86,0,6.22,1.62,7.37,4.75L244,239.45l-47.5,143.42-78.07-230c-1-2.88.2-4.56,3-4.56h24.89a2.11,2.11,0,0,0,2.05-2.14V133.34a2.07,2.07,0,0,0-2.05-2.14c-26.12,1.39-52.33,1.67-76.75,1.92A214.78,214.78,0,0,1,250,35h0ZM439,147.62a215.07,215.07,0,0,1-85.89,291l67-189.88c10.39-29.39,20-69.1,18.85-101.08h0ZM322,452.57a215.77,215.77,0,0,1-134.49,3.13l66.22-189.78L322,452.58h0ZM158,444.3A215.1,215.1,0,0,1,54.34,160.84L158,444.3h0ZM250,14.85C379.81,14.85,485.1,120.14,485.1,250S379.81,485.1,250,485.1,14.85,379.81,14.85,250,120.15,14.85,250,14.85Z" transform="translate(-12.85 -12.85)"/>
</svg>

now we are going to add animation to the svg path.

according to this svg we are adding animaton to the line path drawing.

.wp{
display:inline;
fill:none;
stroke:#000000;
stroke-width:4;
stroke-linecap:round;
stroke-linejoin:round;
stroke-dasharray: 1800;
stroke-dashoffset: 800;
animation: drawline 9s linear infinite;
}
@keyframes drawline {
from {stroke-dashoffset: 2000;}
to { stroke-dashoffset: 0;}
}

Have you ever seen those cool demos where an SVG shape appears to draw itself? That’s a trick that animates the stroke-dashoffset of an element in conjunction with the stroke-dasharray property.

  See the Pen Sbg Animation Dashoffset
1

by kushan