Skip to content
Related Articles

Related Articles

Improve Article

How to create Drawing Effect Animation using CSS ?

  • Last Updated : 02 Jul, 2021
Geek Week

Drawing effect animation can be implemented using CSS animation. The used images can be modified or edited as per requirement. Save the images in SVG file format. The animation is created by drawing a simple art using lines and curved lines.

The CSS stroke-dashoffset property defines the location along an SVG path where the dash of a stroke will begin.

The stroke-dasharray is used for creating dashes in the stroke of SVG Shapes. The animation completes one cycle in 5 seconds. The linear function specifies an animation with the same speed from start to end. The forwards option specifies that the element will retain the style values that are set by the last keyframe. The @keyframes rule specifies the animation code.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
  
    <style>
        .path {
            stroke-dasharray: 3000;
            stroke-dashoffset: 3000;
            animation: dash 5s linear forwards infinite;
        }
  
        @keyframes dash {
            to {
                stroke-dashoffset: 0;
            }
        }
    </style>
</head>
  
<body>
    <svg viewBox="0 0 640 640">
        <path class="path" fill="white" 
        stroke="black" stroke-width="4" 
        d="M70.74 411.89L91.42 411.89L112.09 411.89L114.39 
        391.22L114.39 370.54L110.95 349.86L114.39 329.19L115.54 
        308.51L115.54 287.84L125.88 270.61L146.55 269.46L167.23 
        269.46L176.42 287.84L172.97 308.51L172.97 329.19L172.97 
        351.01L172.97 371.69L174.12 392.36L184.46 409.59L205.14
        409.59L225.81 410.74L230.41 390.07L229.26 369.39L226.96 
        348.72L226.96 328.04L231.55 307.36L235 286.69L228.11 
        267.16L247.64 259.12L268.31 259.12L288.99 261.42L303.92 
        275.2L299.32 297.03L297.03 317.7L297.03 339.53L298.18 
        360.2L298.18 380.88L299.32 401.55L318.85 406.15L339.53 
        406.15L349.86 388.92L352.16 368.24L355.61 347.57L355.61 
        326.89L354.46 305.07L352.16 284.39L351.01 263.72L370.54 
        256.82L391.22 256.82L411.89 260.27L411.89 280.95L411.89 
        302.77L413.04 323.45L416.49 345.27L418.78 365.95L421.08 
        386.62L436.01 401.55L456.69 402.7L477.36 403.85L481.96 
        384.32L484.26 363.65L484.26 342.97L484.26 320L479.66 
        300.47L473.92 279.8L469.32 260.27L465.88 239.59L465.88 
        218.92L448.65 208.58L427.97 208.58L406.15 208.58L384.32 
        208.58L362.5 208.58L341.82 208.58L321.15 208.58L299.32 
        207.43L277.5 205.14L255.68 205.14L232.7 202.84L212.03 
        201.69L190.2 201.69L168.38 202.84L144.26 206.28L122.43 
        208.58L101.76 210.88L81.08 210.88L60.41 210.88L53.51 
        231.55L50.07 252.23L47.77 274.05L47.77 295.88L46.62 
        317.7L45.47 338.38L45.47 360.2L48.92 380.88L54.66 
        400.41L69.59 414.19" />
    </svg>
</body>
  
</html>

Output: Now, as you can see in the output, we have created a simple art using lines and curved lines.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :