Text Animation using SVG Image

Last Updated : 16 Feb, 2023

What is SVG?

SVG stands for Scalable Vector Graphics. It is an image format based on XML. It creates different geometric shapes that can be combined to make two-dimensional graphics.

We are going to use an SVG image to create a text animation effect. The SVG images can be downloaded from the internet or custom SVG images can be created by using software like Figma, Adobe Illustrator or XD, etc.

Prerequisites:

HTML
CSS
JavaScript

Approach:

Create an HTML file with the name index.html. Now create an SVG image or download it from the internet. Create an svg element, copy the path of the image and paste it into the index.html file.
Create a CSS file with the name styles.css and link it to the HTML file.
In the CSS file apply the nth-child property to the path elements of the svg element. For every child, we are going to use two properties stroke-dasharray and stroke-dashoffset. The value of both these properties will be equal to the length of the path of the corresponding child.
The total length of the path can be calculated with the help of JavaScript. So, create a file with the name app.js and link it with the HTML file.
Apply a loop on path elements and get the total length of each path by using getTotalLength() function.
Using @keyframes rules create an animation for the text.

Below is the implementation of the above approach:

Example:

HTML Layout: It creates the basic structure for the animation
CSS Styling: It is used to create the animation effect
JavaScript Code: In this section, we create the logic of the animation

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <!-- SVG Image path -->
    <svg width="940" height="165" viewBox="0 0 940 165" 
        fill="none" xmlns="http://www.w3.org/2000/svg" 
        id="logo"> 
          
        <path
            d= 
"M54.125 102.633C51.0781 107.133 47.7031 110.602 44 113.039C40.2969 115.523 36.2422 116.766 31.8359 116.766C27.3828 116.766 23.4219 115.688 19.9531 113.531C16.4844 111.422 13.5547 108.422 11.1641 104.531C8.82031 100.594 7.01562 95.8828 5.75 90.3984C4.53125 84.8672 3.92188 78.7266 3.92188 71.9766C3.92188 67.1953 4.41406 62.2969 5.39844 57.2812C6.38281 52.2656 7.8125 47.4141 9.6875 42.7266C11.6094 37.9922 13.9297 33.5391 16.6484 29.3672C19.3672 25.1484 22.4609 21.4922 25.9297 18.3984C29.3984 15.2578 33.2188 12.7734 37.3906 10.9453C41.5625 9.11719 46.0391 8.20312 50.8203 8.20312C53.3984 8.20312 55.8125 8.625 58.0625 9.46875C60.3125 10.2656 62.2344 11.4375 63.8281 12.9844C65.4688 14.5312 66.7578 16.4062 67.6953 18.6094C68.6328 20.8125 69.1016 23.2969 69.1016 26.0625C69.1016 28.6875 68.6562 31.2188 67.7656 33.6562C66.875 36.0938 65.6562 38.3906 64.1094 40.5469C62.6094 42.7031 60.8516 44.6719 58.8359 46.4531C56.8203 48.2344 54.7109 49.7812 52.5078 51.0938C50.3047 52.3594 48.0547 53.3438 45.7578 54.0469C43.4609 54.75 41.2578 55.1016 39.1484 55.1016C37.4141 55.1016 35.9141 54.5625 34.6484 53.4844C33.4297 52.3594 32.8203 50.6016 32.8203 48.2109C32.8203 47.6953 32.8438 47.1328 32.8906 46.5234C32.9844 45.9141 33.1016 45.3516 33.2422 44.8359C33.3828 44.3203 33.5469 43.8984 33.7344 43.5703C33.9219 43.1953 34.1562 43.0078 34.4375 43.0078C34.6719 43.0078 34.8828 43.1016 35.0703 43.2891C35.3047 43.4297 35.5859 43.5938 35.9141 43.7812C36.2891 43.9219 36.7812 44.0859 37.3906 44.2734C38 44.4141 38.8438 44.4844 39.9219 44.4844C41.75 44.4844 43.6953 43.9922 45.7578 43.0078C47.8672 42.0234 49.8125 40.7109 51.5938 39.0703C53.375 37.4297 54.8516 35.5547 56.0234 33.4453C57.1953 31.2891 57.7812 29.0625 57.7812 26.7656C57.7812 25.9219 57.6172 25.0312 57.2891 24.0938C57.0078 23.1562 56.5156 22.2891 55.8125 21.4922C55.1562 20.6953 54.2656 20.0391 53.1406 19.5234C52.0156 18.9609 50.6328 18.6797 48.9922 18.6797C45.9922 18.6797 43.0859 19.4062 40.2734 20.8594C37.4609 22.3125 34.8359 24.3281 32.3984 26.9062C29.9609 29.4375 27.7109 32.4141 25.6484 35.8359C23.6328 39.2578 21.8984 42.9375 20.4453 46.875C18.9922 50.8125 17.8672 54.9141 17.0703 59.1797C16.2734 63.4453 15.875 67.6641 15.875 71.8359C15.875 77.0391 16.2734 81.7266 17.0703 85.8984C17.9141 90.0234 19.0625 93.5391 20.5156 96.4453C21.9688 99.3516 23.6797 101.602 25.6484 103.195C27.6641 104.742 29.8203 105.516 32.1172 105.516C34.5547 105.516 36.8047 105.023 38.8672 104.039C40.9297 103.008 42.7812 101.648 44.4219 99.9609C46.0625 98.2734 47.4922 96.3281 48.7109 94.125C49.9297 91.9219 50.9375 89.6484 51.7344 87.3047C52.5781 84.9609 53.2109 82.6406 53.6328 80.3438C54.0547 78 54.2656 75.8438 54.2656 73.875C54.2656 73.125 54.2188 72.2812 54.125 71.3438C54.0312 70.3594 53.9844 69.6094 53.9844 69.0938C53.9844 68.3906 54.1016 67.8516 54.3359 67.4766C54.6172 67.1016 54.9688 66.8203 55.3906 66.6328C55.8125 66.4453 56.3047 66.3281 56.8672 66.2812C57.4297 66.2344 58.0156 66.2109 58.625 66.2109C59.2812 66.2109 60.0312 66.3516 60.875 66.6328C61.7188 66.9141 62.5156 67.3125 63.2656 67.8281C64.0625 68.2969 64.7188 68.8594 65.2344 69.5156C65.7969 70.1719 66.0781 70.8984 66.0781 71.6953C65.7031 75.5859 65.4688 79.2891 65.375 82.8047C65.2812 86.2734 65.2344 89.8125 65.2344 93.4219C65.2344 96.7969 65.2578 100.312 65.3047 103.969C65.3516 107.625 65.375 111.656 65.375 116.062C66.7344 115.828 68.0469 115.664 69.3125 115.57C70.625 115.477 71.8672 115.383 73.0391 115.289C74.7266 115.195 75.8047 115.711 76.2734 116.836C76.7891 118.008 76.8594 119.32 76.4844 120.773C76.1562 122.227 75.5 123.562 74.5156 124.781C73.5312 126 72.4062 126.633 71.1406 126.68C70.0625 126.68 69.0312 126.703 68.0469 126.75C67.1094 126.797 66.125 126.867 65.0938 126.961C64.9531 129.68 64.7422 132.422 64.4609 135.188C64.1797 137.953 63.7109 140.625 63.0547 143.203C62.4453 145.828 61.625 148.266 60.5938 150.516C59.6094 152.812 58.3672 154.805 56.8672 156.492C55.3672 158.18 53.5625 159.516 51.4531 160.5C49.3438 161.484 46.8828 161.977 44.0703 161.977C41.6328 161.977 39.4062 161.531 37.3906 160.641C35.4219 159.797 33.7344 158.602 32.3281 157.055C30.9219 155.555 29.8438 153.773 29.0938 151.711C28.3438 149.648 27.9688 147.398 27.9688 144.961C27.9688 141.305 28.7188 138.047 30.2188 135.188C31.7188 132.375 33.6875 129.891 36.125 127.734C38.6094 125.578 41.4453 123.75 44.6328 122.25C47.8203 120.75 51.0781 119.484 54.4062 118.453V117.047C54.4062 113.953 54.3594 111.211 54.2656 108.82C54.1719 106.43 54.125 104.367 54.125 102.633ZM44.3516 150.867C45.9453 150.867 47.3047 150.281 48.4297 149.109C49.6016 147.938 50.5625 146.344 51.3125 144.328C52.0625 142.312 52.6484 139.992 53.0703 137.367C53.4922 134.789 53.7969 132.047 53.9844 129.141C49.2031 130.641 45.5234 132.703 42.9453 135.328C40.4141 137.953 39.1484 141.07 39.1484 144.68C39.1484 146.883 39.6406 148.453 40.625 149.391C41.6562 150.375 42.8984 150.867 44.3516 150.867Z"
            stroke="#308D46" stroke-width="6" 
            mask="url(#path-1-outside-1)" /> 
  
        <path
            d= 
"M133.859 100.664C133.25 101.695 132.195 103.148 130.695 105.023C129.242 106.852 127.297 108.68 124.859 110.508C122.422 112.289 119.469 113.836 116 115.148C112.531 116.508 108.5 117.188 103.906 117.188C100.438 117.188 97.1797 116.648 94.1328 115.57C91.0859 114.539 88.3906 113.016 86.0469 111C83.75 108.984 81.9219 106.523 80.5625 103.617C79.25 100.664 78.5938 97.3125 78.5938 93.5625C78.5938 90.9375 78.9453 88.5 79.6484 86.25C80.3984 84 81.3594 81.9609 82.5312 80.1328C83.75 78.3047 85.1328 76.6875 86.6797 75.2812C88.2734 73.875 89.9375 72.7266 91.6719 71.8359C90.0781 70.8516 88.5312 69.6797 87.0312 68.3203C85.5312 66.9141 84.1953 65.25 83.0234 63.3281C81.8516 61.4062 80.9141 59.2266 80.2109 56.7891C79.5078 54.3047 79.1562 51.4922 79.1562 48.3516C79.1562 45.1641 79.6016 41.9531 80.4922 38.7188C81.4297 35.4844 82.7188 32.3672 84.3594 29.3672C86.0469 26.3203 88.0625 23.5078 90.4062 20.9297C92.75 18.3047 95.3281 16.0312 98.1406 14.1094C101 12.1406 104.047 10.5938 107.281 9.46875C110.562 8.34375 113.961 7.78125 117.477 7.78125C120.758 7.78125 123.664 8.27344 126.195 9.25781C128.773 10.2422 130.93 11.6016 132.664 13.3359C134.398 15.0234 135.711 17.0391 136.602 19.3828C137.492 21.6797 137.938 24.1406 137.938 26.7656C137.938 30.5156 137.211 34.1719 135.758 37.7344C134.352 41.2969 132.43 44.4844 129.992 47.2969C127.555 50.0625 124.719 52.3125 121.484 54.0469C118.25 55.7344 114.852 56.5781 111.289 56.5781C110.398 56.5781 109.484 56.4609 108.547 56.2266C107.609 55.9922 106.742 55.6172 105.945 55.1016C105.195 54.5391 104.562 53.8125 104.047 52.9219C103.578 52.0312 103.344 50.9531 103.344 49.6875C103.344 49.1719 103.367 48.6094 103.414 48C103.508 47.3906 103.625 46.8281 103.766 46.3125C103.906 45.7969 104.07 45.375 104.258 45.0469C104.445 44.6719 104.68 44.4844 104.961 44.4844C105.195 44.4844 105.406 44.5547 105.594 44.6953C105.828 44.8359 106.109 45 106.438 45.1875C106.812 45.375 107.305 45.5391 107.914 45.6797C108.523 45.8203 109.344 45.8906 110.375 45.8906C112.766 45.8906 114.945 45.3281 116.914 44.2031C118.93 43.0312 120.641 41.5312 122.047 39.7031C123.453 37.875 124.555 35.8125 125.352 33.5156C126.148 31.2188 126.547 28.9219 126.547 26.625C126.547 24 125.703 22.0547 124.016 20.7891C122.328 19.4766 120.148 18.8203 117.477 18.8203C113.867 18.8203 110.445 19.6875 107.211 21.4219C103.977 23.1094 101.117 25.3359 98.6328 28.1016C96.1953 30.8203 94.25 33.8906 92.7969 37.3125C91.3906 40.7344 90.6875 44.1797 90.6875 47.6484C90.6875 50.3203 91.1328 52.8047 92.0234 55.1016C92.9609 57.3984 94.1328 59.4141 95.5391 61.1484C96.9922 62.8359 98.5625 64.1953 100.25 65.2266C101.984 66.2109 103.648 66.7734 105.242 66.9141C105.477 66.8203 105.688 66.7734 105.875 66.7734C106.062 66.7734 106.273 66.7734 106.508 66.7734C107.398 66.7734 108.031 67.125 108.406 67.8281C108.781 68.4844 108.969 69.2812 108.969 70.2188C108.969 71.0156 108.852 71.8594 108.617 72.75C108.43 73.5938 108.172 74.3906 107.844 75.1406C107.562 75.8438 107.211 76.4531 106.789 76.9688C106.367 77.4375 105.945 77.6953 105.523 77.7422C104.023 77.9297 102.359 78.3047 100.531 78.8672C98.75 79.4297 97.0859 80.3203 95.5391 81.5391C93.9922 82.7109 92.7031 84.2578 91.6719 86.1797C90.6406 88.0547 90.125 90.4219 90.125 93.2812C90.125 95.1094 90.4766 96.7969 91.1797 98.3438C91.8828 99.8906 92.8672 101.227 94.1328 102.352C95.3984 103.43 96.875 104.273 98.5625 104.883C100.297 105.492 102.172 105.797 104.188 105.797C107.188 105.797 109.883 105.375 112.273 104.531C114.711 103.688 116.82 102.656 118.602 101.438C120.383 100.219 121.836 98.9297 122.961 97.5703C124.086 96.2109 124.883 95.0156 125.352 93.9844C125.727 93.1406 126.172 92.5312 126.688 92.1562C127.25 91.7812 127.812 91.5938 128.375 91.5938C129.078 91.5938 129.781 91.8047 130.484 92.2266C131.188 92.6484 131.82 93.2109 132.383 93.9141C132.945 94.5703 133.391 95.3203 133.719 96.1641C134.094 96.9609 134.281 97.7812 134.281 98.625C134.281 99.375 134.141 100.055 133.859 100.664Z"
            stroke="#308D46" stroke-width="6" 
            mask="url(#path-1-outside-1)" /> 
  
        <path
            d= 
"M198.125 100.664C197.516 101.695 196.461 103.148 194.961 105.023C193.508 106.852 191.562 108.68 189.125 110.508C186.688 112.289 183.734 113.836 180.266 115.148C176.797 116.508 172.766 117.188 168.172 117.188C164.703 117.188 161.445 116.648 158.398 115.57C155.352 114.539 152.656 113.016 150.312 111C148.016 108.984 146.188 106.523 144.828 103.617C143.516 100.664 142.859 97.3125 142.859 93.5625C142.859 90.9375 143.211 88.5 143.914 86.25C144.664 84 145.625 81.9609 146.797 80.1328C148.016 78.3047 149.398 76.6875 150.945 75.2812C152.539 73.875 154.203 72.7266 155.938 71.8359C154.344 70.8516 152.797 69.6797 151.297 68.3203C149.797 66.9141 148.461 65.25 147.289 63.3281C146.117 61.4062 145.18 59.2266 144.477 56.7891C143.773 54.3047 143.422 51.4922 143.422 48.3516C143.422 45.1641 143.867 41.9531 144.758 38.7188C145.695 35.4844 146.984 32.3672 148.625 29.3672C150.312 26.3203 152.328 23.5078 154.672 20.9297C157.016 18.3047 159.594 16.0312 162.406 14.1094C165.266 12.1406 168.312 10.5938 171.547 9.46875C174.828 8.34375 178.227 7.78125 181.742 7.78125C185.023 7.78125 187.93 8.27344 190.461 9.25781C193.039 10.2422 195.195 11.6016 196.93 13.3359C198.664 15.0234 199.977 17.0391 200.867 19.3828C201.758 21.6797 202.203 24.1406 202.203 26.7656C202.203 30.5156 201.477 34.1719 200.023 37.7344C198.617 41.2969 196.695 44.4844 194.258 47.2969C191.82 50.0625 188.984 52.3125 185.75 54.0469C182.516 55.7344 179.117 56.5781 175.555 56.5781C174.664 56.5781 173.75 56.4609 172.812 56.2266C171.875 55.9922 171.008 55.6172 170.211 55.1016C169.461 54.5391 168.828 53.8125 168.312 52.9219C167.844 52.0312 167.609 50.9531 167.609 49.6875C167.609 49.1719 167.633 48.6094 167.68 48C167.773 47.3906 167.891 46.8281 168.031 46.3125C168.172 45.7969 168.336 45.375 168.523 45.0469C168.711 44.6719 168.945 44.4844 169.227 44.4844C169.461 44.4844 169.672 44.5547 169.859 44.6953C170.094 44.8359 170.375 45 170.703 45.1875C171.078 45.375 171.57 45.5391 172.18 45.6797C172.789 45.8203 173.609 45.8906 174.641 45.8906C177.031 45.8906 179.211 45.3281 181.18 44.2031C183.195 43.0312 184.906 41.5312 186.312 39.7031C187.719 37.875 188.82 35.8125 189.617 33.5156C190.414 31.2188 190.812 28.9219 190.812 26.625C190.812 24 189.969 22.0547 188.281 20.7891C186.594 19.4766 184.414 18.8203 181.742 18.8203C178.133 18.8203 174.711 19.6875 171.477 21.4219C168.242 23.1094 165.383 25.3359 162.898 28.1016C160.461 30.8203 158.516 33.8906 157.062 37.3125C155.656 40.7344 154.953 44.1797 154.953 47.6484C154.953 50.3203 155.398 52.8047 156.289 55.1016C157.227 57.3984 158.398 59.4141 159.805 61.1484C161.258 62.8359 162.828 64.1953 164.516 65.2266C166.25 66.2109 167.914 66.7734 169.508 66.9141C169.742 66.8203 169.953 66.7734 170.141 66.7734C170.328 66.7734 170.539 66.7734 170.773 66.7734C171.664 66.7734 172.297 67.125 172.672 67.8281C173.047 68.4844 173.234 69.2812 173.234 70.2188C173.234 71.0156 173.117 71.8594 172.883 72.75C172.695 73.5938 172.438 74.3906 172.109 75.1406C171.828 75.8438 171.477 76.4531 171.055 76.9688C170.633 77.4375 170.211 77.6953 169.789 77.7422C168.289 77.9297 166.625 78.3047 164.797 78.8672C163.016 79.4297 161.352 80.3203 159.805 81.5391C158.258 82.7109 156.969 84.2578 155.938 86.1797C154.906 88.0547 154.391 90.4219 154.391 93.2812C154.391 95.1094 154.742 96.7969 155.445 98.3438C156.148 99.8906 157.133 101.227 158.398 102.352C159.664 103.43 161.141 104.273 162.828 104.883C164.562 105.492 166.438 105.797 168.453 105.797C171.453 105.797 174.148 105.375 176.539 104.531C178.977 103.688 181.086 102.656 182.867 101.438C184.648 100.219 186.102 98.9297 187.227 97.5703C188.352 96.2109 189.148 95.0156 189.617 93.9844C189.992 93.1406 190.438 92.5312 190.953 92.1562C191.516 91.7812 192.078 91.5938 192.641 91.5938C193.344 91.5938 194.047 91.8047 194.75 92.2266C195.453 92.6484 196.086 93.2109 196.648 93.9141C197.211 94.5703 197.656 95.3203 197.984 96.1641C198.359 96.9609 198.547 97.7812 198.547 98.625C198.547 99.375 198.406 100.055 198.125 100.664Z"
            stroke="#308D46" stroke-width="6" 
            mask="url(#path-1-outside-1)" /> 
  
        <path
            d= 
"M250.297 66.9141C254.938 65.9766 258.5 64.3359 260.984 61.9922C263.469 59.6484 265.297 56.8594 266.469 53.625C267.641 50.3438 268.391 46.7344 268.719 42.7969C269.094 38.8125 269.469 34.6875 269.844 30.4219C270.266 26.1094 270.945 21.7969 271.883 17.4844C272.82 13.125 274.461 8.92969 276.805 4.89844C276.945 4.57031 277.273 4.17188 277.789 3.70312C278.305 3.23438 278.984 3 279.828 3C280.719 3 281.656 3.11719 282.641 3.35156C283.672 3.58594 284.609 3.91406 285.453 4.33594C286.297 4.71094 286.977 5.15625 287.492 5.67188C288.055 6.1875 288.336 6.72656 288.336 7.28906C288.336 7.99219 287.961 8.53125 287.211 8.90625C285.711 11.1562 284.516 13.6641 283.625 16.4297C282.781 19.1484 282.102 22.0078 281.586 25.0078C281.07 27.9609 280.625 31.0078 280.25 34.1484C279.875 37.2891 279.43 40.4062 278.914 43.5C278.445 46.5469 277.812 49.5469 277.016 52.5C276.219 55.4062 275.141 58.1484 273.781 60.7266C272.422 63.2578 270.664 65.5547 268.508 67.6172C266.398 69.6797 263.75 71.4141 260.562 72.8203C263.938 74.6484 266.727 76.8516 268.93 79.4297C271.18 82.0078 273.078 84.8203 274.625 87.8672C276.172 90.8672 277.484 94.0312 278.562 97.3594C279.688 100.641 280.812 103.898 281.938 107.133C283.109 110.367 284.398 113.484 285.805 116.484C287.211 119.531 289.016 122.273 291.219 124.711C291.406 124.945 291.641 125.109 291.922 125.203C292.25 125.344 292.555 125.461 292.836 125.555C293.164 125.695 293.422 125.836 293.609 125.977C293.844 126.164 293.961 126.398 293.961 126.68C293.961 127.383 293.562 128.156 292.766 129C291.969 129.891 291.008 130.711 289.883 131.461C288.805 132.258 287.727 132.914 286.648 133.43C285.57 133.945 284.75 134.203 284.188 134.203C283.484 134.203 282.852 133.898 282.289 133.289C280.273 130.758 278.586 128.133 277.227 125.414C275.867 122.742 274.672 120.023 273.641 117.258C272.656 114.492 271.789 111.75 271.039 109.031C270.289 106.266 269.516 103.617 268.719 101.086C267.969 98.5078 267.102 96.0703 266.117 93.7734C265.18 91.4766 264.008 89.3906 262.602 87.5156C261.195 85.5938 259.484 83.9297 257.469 82.5234C255.5 81.0703 253.109 79.9453 250.297 79.1484V111.703C250.297 112.922 249.898 113.766 249.102 114.234C248.305 114.75 247.367 115.008 246.289 115.008C245.445 115.008 244.602 114.891 243.758 114.656C242.914 114.422 242.141 114.117 241.438 113.742C240.781 113.367 240.219 112.922 239.75 112.406C239.328 111.938 239.117 111.422 239.117 110.859V21.4219C235.883 21.8438 232.812 22.7578 229.906 24.1641C227.047 25.5703 224.539 27.4922 222.383 29.9297C220.273 32.3672 218.586 35.3203 217.32 38.7891C216.102 42.2578 215.492 46.2656 215.492 50.8125C215.492 53.7188 215.797 56.3438 216.406 58.6875C217.016 60.9844 217.742 62.9531 218.586 64.5938C219.43 66.1875 220.273 67.4297 221.117 68.3203C221.961 69.2109 222.617 69.6562 223.086 69.6562C223.508 69.6562 223.906 69.5625 224.281 69.375C224.656 69.1875 225.031 69.0938 225.406 69.0938C226.156 69.0938 226.531 69.6797 226.531 70.8516C226.531 72.3516 226.18 73.8047 225.477 75.2109C224.82 76.5703 223.977 77.6953 222.945 78.5859C221.914 79.4297 220.789 79.9688 219.57 80.2031C218.352 80.4375 217.227 80.1797 216.195 79.4297C214.93 78.5859 213.57 77.2969 212.117 75.5625C210.711 73.8281 209.398 71.7422 208.18 69.3047C207.008 66.8203 206.023 64.0312 205.227 60.9375C204.477 57.8438 204.102 54.4688 204.102 50.8125C204.102 45.75 204.711 41.2266 205.93 37.2422C207.148 33.2109 208.766 29.6953 210.781 26.6953C212.844 23.6953 215.234 21.1406 217.953 19.0312C220.672 16.9219 223.531 15.2109 226.531 13.8984C229.531 12.5859 232.578 11.6484 235.672 11.0859C238.766 10.4766 241.719 10.1719 244.531 10.1719C245.281 10.1719 246.008 10.3359 246.711 10.6641C247.414 10.9453 248.023 11.3672 248.539 11.9297C249.055 12.4453 249.477 13.0781 249.805 13.8281C250.133 14.5781 250.297 15.375 250.297 16.2188V66.9141Z"
            stroke="#308D46" stroke-width="6" 
            mask="url(#path-1-outside-1)" /> 
  
        <path
            d= 
"M316.25 116.203C313.203 116.203 310.672 115.852 308.656 115.148C306.641 114.492 305.047 113.742 303.875 112.898C302.703 112.055 301.883 111.258 301.414 110.508C300.945 109.711 300.711 109.195 300.711 108.961C300.711 108.117 300.898 107.227 301.273 106.289C301.648 105.305 302.117 104.414 302.68 103.617C303.242 102.773 303.852 102.07 304.508 101.508C305.164 100.945 305.75 100.664 306.266 100.664C306.922 100.664 307.461 101.086 307.883 101.93C307.977 102.023 308.211 102.258 308.586 102.633C308.961 103.008 309.477 103.406 310.133 103.828C310.836 104.203 311.68 104.555 312.664 104.883C313.695 105.211 314.891 105.375 316.25 105.375C319.203 105.375 321.617 104.484 323.492 102.703C325.367 100.875 326.305 98.4141 326.305 95.3203C326.305 93.1641 325.789 91.2422 324.758 89.5547C323.773 87.8672 322.461 86.2969 320.82 84.8438C319.18 83.3906 317.305 81.9844 315.195 80.625C313.086 79.2188 310.93 77.7656 308.727 76.2656C306.523 74.7656 304.367 73.1484 302.258 71.4141C300.148 69.6797 298.273 67.6875 296.633 65.4375C294.992 63.1875 293.656 60.6562 292.625 57.8438C291.641 54.9844 291.148 51.7266 291.148 48.0703C291.148 44.9297 291.688 41.7656 292.766 38.5781C293.844 35.3906 295.32 32.3672 297.195 29.5078C299.117 26.6016 301.367 23.9062 303.945 21.4219C306.523 18.8906 309.312 16.7109 312.312 14.8828C315.312 13.0078 318.43 11.5547 321.664 10.5234C324.945 9.44531 328.227 8.90625 331.508 8.90625C334.32 8.90625 336.852 9.35156 339.102 10.2422C341.352 11.1328 343.25 12.3984 344.797 14.0391C346.344 15.6328 347.539 17.5781 348.383 19.875C349.227 22.125 349.648 24.6562 349.648 27.4688C349.648 30.1406 349.18 32.7656 348.242 35.3438C347.305 37.9219 346.062 40.3594 344.516 42.6562C342.969 44.9531 341.211 47.0859 339.242 49.0547C337.32 50.9766 335.328 52.6641 333.266 54.1172C331.25 55.5234 329.281 56.625 327.359 57.4219C325.438 58.2188 323.75 58.6172 322.297 58.6172C321.031 58.6172 319.883 58.3359 318.852 57.7734C317.867 57.1641 317.023 56.4375 316.32 55.5938C315.664 54.7031 315.148 53.7891 314.773 52.8516C314.398 51.8672 314.211 51 314.211 50.25C314.211 49.6406 314.281 49.2422 314.422 49.0547C314.609 48.8672 314.844 48.7969 315.125 48.8438C315.453 48.8438 315.852 48.9141 316.32 49.0547C316.789 49.1484 317.328 49.1953 317.938 49.1953C319.906 49.1953 322.086 48.5156 324.477 47.1562C326.867 45.7969 329.117 44.0625 331.227 41.9531C333.336 39.8438 335.094 37.5234 336.5 34.9922C337.953 32.4609 338.68 30 338.68 27.6094C338.68 25.1719 338.07 23.25 336.852 21.8438C335.68 20.4375 333.664 19.7344 330.805 19.7344C329.023 19.7344 327.078 20.0859 324.969 20.7891C322.906 21.4453 320.82 22.3828 318.711 23.6016C316.602 24.8203 314.562 26.2969 312.594 28.0312C310.625 29.7656 308.891 31.6875 307.391 33.7969C305.891 35.8594 304.672 38.1094 303.734 40.5469C302.844 42.9375 302.398 45.4453 302.398 48.0703C302.398 50.8359 302.891 53.3203 303.875 55.5234C304.906 57.6797 306.242 59.6484 307.883 61.4297C309.57 63.2109 311.469 64.8516 313.578 66.3516C315.688 67.8516 317.844 69.3516 320.047 70.8516C322.25 72.3047 324.406 73.8281 326.516 75.4219C328.625 76.9688 330.5 78.7031 332.141 80.625C333.828 82.5 335.164 84.6094 336.148 86.9531C337.18 89.25 337.695 91.8984 337.695 94.8984C337.695 97.8047 337.133 100.57 336.008 103.195C334.93 105.773 333.43 108.023 331.508 109.945C329.586 111.867 327.312 113.391 324.688 114.516C322.062 115.641 319.25 116.203 316.25 116.203Z"
            stroke="#308D46" stroke-width="6" 
            mask="url(#path-1-outside-1)" /> 
  
        <path
            d= 
"M406.109 102.914C406.109 106.102 405.898 108.82 405.477 111.07C405.102 113.32 404.562 115.148 403.859 116.555C403.156 117.961 402.289 118.992 401.258 119.648C400.273 120.305 399.195 120.633 398.023 120.633C397.133 120.633 396.148 120.328 395.07 119.719C393.992 119.109 392.961 118.359 391.977 117.469C391.039 116.578 390.242 115.664 389.586 114.727C388.977 113.789 388.672 112.969 388.672 112.266C388.672 111.797 388.719 111.492 388.812 111.352C388.953 111.258 389.117 111.211 389.305 111.211C389.539 111.258 389.797 111.328 390.078 111.422C390.406 111.516 390.758 111.562 391.133 111.562C392.445 111.562 393.383 110.742 393.945 109.102C394.555 107.414 394.859 104.742 394.859 101.086V78.4453H387.406C386.656 78.4453 385.953 78.2109 385.297 77.7422C384.688 77.2734 384.148 76.6875 383.68 75.9844C383.211 75.2812 382.836 74.5078 382.555 73.6641C382.32 72.8203 382.203 72.0234 382.203 71.2734C382.203 70.4766 382.367 69.7969 382.695 69.2344C383.07 68.6719 383.633 68.3906 384.383 68.3906H394.859V21.5625C389.797 21.8906 385.18 22.6406 381.008 23.8125C376.836 24.9844 373.25 26.7656 370.25 29.1562C367.25 31.5469 364.906 34.6641 363.219 38.5078C361.578 42.3047 360.758 47.0391 360.758 52.7109C360.758 55.1953 360.992 57.4453 361.461 59.4609C361.977 61.4297 362.633 63.2109 363.43 64.8047C364.227 66.3984 365.094 67.8047 366.031 69.0234C367.016 70.2422 367.977 71.3203 368.914 72.2578C369.711 72.0234 370.273 72.1172 370.602 72.5391C370.93 72.9609 371.094 73.5469 371.094 74.2969C371.094 75.2344 370.883 76.2188 370.461 77.25C370.086 78.2344 369.57 79.1484 368.914 79.9922C368.258 80.7891 367.508 81.4688 366.664 82.0312C365.867 82.5469 365.047 82.8047 364.203 82.8047C363.828 82.8047 363.453 82.7578 363.078 82.6641C362.75 82.5703 362.398 82.3594 362.023 82.0312C360.992 81.2812 359.75 80.0625 358.297 78.375C356.844 76.6406 355.461 74.5078 354.148 71.9766C352.836 69.4453 351.711 66.5625 350.773 63.3281C349.836 60.0469 349.367 56.5078 349.367 52.7109C349.367 38.8828 353.773 28.3359 362.586 21.0703C371.445 13.8047 384.5 10.1719 401.75 10.1719C403.062 10.1719 404.703 10.1953 406.672 10.2422C408.688 10.2422 410.82 10.2422 413.07 10.2422C415.32 10.2422 417.594 10.2656 419.891 10.3125C422.234 10.3594 424.391 10.3828 426.359 10.3828C428.375 10.3828 430.086 10.4062 431.492 10.4531C432.945 10.4531 433.93 10.4531 434.445 10.4531C435.148 10.4531 435.734 10.4062 436.203 10.3125C436.672 10.1719 437.047 10.0312 437.328 9.89062C437.656 9.75 437.891 9.63281 438.031 9.53906C438.219 9.39844 438.383 9.32812 438.523 9.32812C438.758 9.32812 438.992 9.49219 439.227 9.82031C439.461 10.1016 439.672 10.4766 439.859 10.9453C440.047 11.3672 440.188 11.8594 440.281 12.4219C440.422 12.9844 440.492 13.5469 440.492 14.1094C440.492 14.9531 440.352 15.8438 440.07 16.7812C439.836 17.6719 439.438 18.4922 438.875 19.2422C438.312 19.9453 437.609 20.5312 436.766 21C435.969 21.4688 435.008 21.7031 433.883 21.7031C433.461 21.7031 432.688 21.7031 431.562 21.7031C430.438 21.6562 429.078 21.6328 427.484 21.6328C425.938 21.5859 424.227 21.5625 422.352 21.5625C420.477 21.5156 418.578 21.4922 416.656 21.4922C414.781 21.4453 412.93 21.4219 411.102 21.4219C409.273 21.375 407.609 21.3281 406.109 21.2812V68.3906H424.109C424.859 67.8281 425.422 67.6875 425.797 67.9688C426.172 68.25 426.383 68.7656 426.43 69.5156C426.523 70.2656 426.477 71.1562 426.289 72.1875C426.148 73.2188 425.891 74.2031 425.516 75.1406C425.188 76.0312 424.789 76.8047 424.32 77.4609C423.852 78.1172 423.336 78.4453 422.773 78.4453H406.109V102.914Z"
            stroke="#308D46" stroke-width="6" 
            mask="url(#path-1-outside-1)" /> 
  
        <path
            d= 
"M487.039 62.0625C487.039 59.25 486.898 56.3203 486.617 53.2734H483.875C480.875 53.2734 478.062 52.8516 475.438 52.0078C472.812 51.1641 470.516 49.9453 468.547 48.3516C466.625 46.7578 465.102 44.8594 463.977 42.6562C462.852 40.4062 462.289 37.8984 462.289 35.1328C462.289 33.2578 462.594 31.5 463.203 29.8594C463.859 28.1719 464.75 26.7188 465.875 25.5C467.047 24.2344 468.43 23.25 470.023 22.5469C471.617 21.7969 473.398 21.4219 475.367 21.4219C477.992 21.4219 480.336 21.9141 482.398 22.8984C484.508 23.8828 486.359 25.2188 487.953 26.9062C489.547 28.5469 490.93 30.4922 492.102 32.7422C493.273 34.9453 494.258 37.3125 495.055 39.8438C495.805 39.4219 496.508 38.9062 497.164 38.2969C497.82 37.6875 498.477 37.0078 499.133 36.2578C499.555 34.9922 500.117 34.3594 500.82 34.3594C501.336 34.3594 501.852 34.5938 502.367 35.0625C502.93 35.4844 503.445 36.0703 503.914 36.8203C504.383 37.5703 504.758 38.4141 505.039 39.3516C505.32 40.2422 505.461 41.1797 505.461 42.1641C505.461 43.9453 504.711 45.5625 503.211 47.0156C501.711 48.4219 499.766 49.6406 497.375 50.6719C497.656 52.6875 497.867 54.6562 498.008 56.5781C498.195 58.5 498.289 60.3281 498.289 62.0625C498.289 71.1562 497.375 79.0312 495.547 85.6875C493.719 92.3438 491.281 97.8516 488.234 102.211C485.188 106.523 481.695 109.734 477.758 111.844C473.867 113.953 469.812 115.008 465.594 115.008C460.344 115.008 455.727 113.766 451.742 111.281C447.758 108.844 444.406 105.492 441.688 101.227C439.016 96.9609 437 91.9922 435.641 86.3203C434.281 80.6016 433.602 74.5312 433.602 68.1094C433.602 59.9531 434.305 52.8047 435.711 46.6641C437.164 40.4766 438.969 35.1562 441.125 30.7031C443.328 26.25 445.719 22.5469 448.297 19.5938C450.875 16.6406 453.266 14.2734 455.469 12.4922C457.719 10.7109 459.617 9.44531 461.164 8.69531C462.758 7.94531 463.648 7.52344 463.836 7.42969C464.07 7.33594 464.305 7.26562 464.539 7.21875C464.82 7.17188 465.125 7.14844 465.453 7.14844C466.25 7.14844 466.953 7.40625 467.562 7.92188C468.172 8.39062 468.688 9 469.109 9.75C469.531 10.4531 469.859 11.25 470.094 12.1406C470.328 13.0312 470.445 13.875 470.445 14.6719C470.445 15.6094 470.305 16.4062 470.023 17.0625C469.742 17.6719 469.273 17.9766 468.617 17.9766C468.289 17.9766 468.031 17.9297 467.844 17.8359C467 18.3047 465.852 18.9844 464.398 19.875C462.992 20.7656 461.445 22.0078 459.758 23.6016C458.07 25.1484 456.359 27.1172 454.625 29.5078C452.891 31.8984 451.32 34.8281 449.914 38.2969C448.508 41.7188 447.359 45.7734 446.469 50.4609C445.578 55.1016 445.133 60.4922 445.133 66.6328C445.133 73.1484 445.742 78.7734 446.961 83.5078C448.18 88.2422 449.773 92.1562 451.742 95.25C453.711 98.2969 455.938 100.57 458.422 102.07C460.906 103.523 463.438 104.25 466.016 104.25C469.016 104.25 471.781 103.312 474.312 101.438C476.891 99.5625 479.094 96.8438 480.922 93.2812C482.797 89.6719 484.273 85.2656 485.352 80.0625C486.43 74.8125 486.992 68.8125 487.039 62.0625ZM485.141 43.2891C484.766 41.6484 484.32 40.125 483.805 38.7188C483.289 37.3125 482.656 36.1172 481.906 35.1328C481.156 34.1016 480.312 33.3047 479.375 32.7422C478.484 32.1328 477.477 31.8281 476.352 31.8281C474.898 31.8281 473.938 32.2266 473.469 33.0234C473 33.8203 472.766 34.6172 472.766 35.4141C472.766 36.2578 472.953 37.1484 473.328 38.0859C473.75 39.0234 474.383 39.8906 475.227 40.6875C476.117 41.4375 477.242 42.0703 478.602 42.5859C479.961 43.0547 481.578 43.2891 483.453 43.2891H485.141Z"
            stroke="#308D46" stroke-width="6" 
            mask="url(#path-1-outside-1)" /> 
  
        <path
            d= 
"M532.812 35.5547C532.812 34.1953 532.695 33.2109 532.461 32.6016C532.273 31.9922 532.18 31.4297 532.18 30.9141C532.18 30.2109 532.555 29.625 533.305 29.1562C534.055 28.6875 534.945 28.4531 535.977 28.4531C538.367 28.4531 540.289 29.0859 541.742 30.3516C543.242 31.5703 543.992 33.0703 543.992 34.8516V81.8906C545.82 81.5625 547.812 81 549.969 80.2031C552.172 79.4062 554.352 78.3516 556.508 77.0391C558.711 75.6797 560.82 74.0391 562.836 72.1172C564.898 70.1953 566.703 67.9453 568.25 65.3672C569.844 62.7891 571.109 59.8828 572.047 56.6484C573.031 53.3672 573.523 49.6875 573.523 45.6094C573.523 42.8906 573.055 40.0781 572.117 37.1719C571.227 34.2656 569.82 31.6172 567.898 29.2266C565.977 26.8359 563.492 24.8672 560.445 23.3203C557.445 21.7734 553.836 21 549.617 21C544.086 21 539.305 21.9141 535.273 23.7422C531.242 25.5703 527.914 28.0312 525.289 31.125C522.664 34.1719 520.719 37.6641 519.453 41.6016C518.188 45.5391 517.555 49.6172 517.555 53.8359C517.555 57.0234 517.812 59.7188 518.328 61.9219C518.891 64.0781 519.5 65.8594 520.156 67.2656C520.812 68.625 521.422 69.6328 521.984 70.2891C522.547 70.9453 522.875 71.3203 522.969 71.4141C523.766 71.1797 524.328 71.2734 524.656 71.6953C524.984 72.1172 525.148 72.6797 525.148 73.3828C525.148 74.0391 524.914 75.0234 524.445 76.3359C524.023 77.6484 523.438 78.8906 522.688 80.0625C521.938 81.1875 521.07 82.0547 520.086 82.6641C519.102 83.2266 518.094 83.1094 517.062 82.3125C516.5 81.7969 515.633 80.8594 514.461 79.5C513.289 78.1406 512.117 76.3359 510.945 74.0859C509.82 71.7891 508.812 69.0469 507.922 65.8594C507.031 62.625 506.586 58.8984 506.586 54.6797C506.586 48.0234 507.617 41.9766 509.68 36.5391C511.742 31.0547 514.648 26.3672 518.398 22.4766C522.195 18.5391 526.719 15.5156 531.969 13.4062C537.219 11.25 543.055 10.1719 549.477 10.1719C554.727 10.1719 559.508 11.0391 563.82 12.7734C568.133 14.5078 571.836 16.9453 574.93 20.0859C578.023 23.1797 580.414 26.8828 582.102 31.1953C583.789 35.5078 584.633 40.2188 584.633 45.3281C584.633 50.25 583.906 54.8672 582.453 59.1797C581.047 63.4922 579.102 67.4297 576.617 70.9922C574.133 74.5547 571.227 77.7188 567.898 80.4844C564.617 83.25 561.078 85.5 557.281 87.2344C559.672 88.5938 561.641 90.2578 563.188 92.2266C564.781 94.1484 566.117 96.2344 567.195 98.4844C568.32 100.688 569.281 103.008 570.078 105.445C570.922 107.883 571.766 110.273 572.609 112.617C573.453 115.008 574.414 117.305 575.492 119.508C576.57 121.711 577.93 123.68 579.57 125.414C579.758 125.648 579.992 125.812 580.273 125.906C580.602 126.047 580.906 126.164 581.188 126.258C581.516 126.398 581.773 126.539 581.961 126.68C582.195 126.867 582.312 127.102 582.312 127.383C582.312 128.086 581.914 128.859 581.117 129.703C580.32 130.594 579.383 131.414 578.305 132.164C577.227 132.961 576.125 133.617 575 134.133C573.922 134.648 573.102 134.906 572.539 134.906C571.836 134.906 571.203 134.625 570.641 134.062C568.297 131.391 566.469 128.602 565.156 125.695C563.844 122.836 562.742 119.977 561.852 117.117C560.961 114.305 560.141 111.562 559.391 108.891C558.641 106.219 557.656 103.758 556.438 101.508C555.266 99.2578 553.719 97.2891 551.797 95.6016C549.875 93.9141 547.273 92.625 543.992 91.7344V111.703C543.992 112.922 543.594 113.766 542.797 114.234C542 114.75 541.062 115.008 539.984 115.008C539.141 115.008 538.297 114.891 537.453 114.656C536.609 114.422 535.836 114.117 535.133 113.742C534.477 113.367 533.914 112.922 533.445 112.406C533.023 111.938 532.812 111.422 532.812 110.859V35.5547Z"
            stroke="#308D46" stroke-width="6" 
            mask="url(#path-1-outside-1)" /> 
  
        <path
            d= 
"M640.812 102.633C637.766 107.133 634.391 110.602 630.688 113.039C626.984 115.523 622.93 116.766 618.523 116.766C614.07 116.766 610.109 115.688 606.641 113.531C603.172 111.422 600.242 108.422 597.852 104.531C595.508 100.594 593.703 95.8828 592.438 90.3984C591.219 84.8672 590.609 78.7266 590.609 71.9766C590.609 67.1953 591.102 62.2969 592.086 57.2812C593.07 52.2656 594.5 47.4141 596.375 42.7266C598.297 37.9922 600.617 33.5391 603.336 29.3672C606.055 25.1484 609.148 21.4922 612.617 18.3984C616.086 15.2578 619.906 12.7734 624.078 10.9453C628.25 9.11719 632.727 8.20312 637.508 8.20312C640.086 8.20312 642.5 8.625 644.75 9.46875C647 10.2656 648.922 11.4375 650.516 12.9844C652.156 14.5312 653.445 16.4062 654.383 18.6094C655.32 20.8125 655.789 23.2969 655.789 26.0625C655.789 28.6875 655.344 31.2188 654.453 33.6562C653.562 36.0938 652.344 38.3906 650.797 40.5469C649.297 42.7031 647.539 44.6719 645.523 46.4531C643.508 48.2344 641.398 49.7812 639.195 51.0938C636.992 52.3594 634.742 53.3438 632.445 54.0469C630.148 54.75 627.945 55.1016 625.836 55.1016C624.102 55.1016 622.602 54.5625 621.336 53.4844C620.117 52.3594 619.508 50.6016 619.508 48.2109C619.508 47.6953 619.531 47.1328 619.578 46.5234C619.672 45.9141 619.789 45.3516 619.93 44.8359C620.07 44.3203 620.234 43.8984 620.422 43.5703C620.609 43.1953 620.844 43.0078 621.125 43.0078C621.359 43.0078 621.57 43.1016 621.758 43.2891C621.992 43.4297 622.273 43.5938 622.602 43.7812C622.977 43.9219 623.469 44.0859 624.078 44.2734C624.688 44.4141 625.531 44.4844 626.609 44.4844C628.438 44.4844 630.383 43.9922 632.445 43.0078C634.555 42.0234 636.5 40.7109 638.281 39.0703C640.062 37.4297 641.539 35.5547 642.711 33.4453C643.883 31.2891 644.469 29.0625 644.469 26.7656C644.469 25.9219 644.305 25.0312 643.977 24.0938C643.695 23.1562 643.203 22.2891 642.5 21.4922C641.844 20.6953 640.953 20.0391 639.828 19.5234C638.703 18.9609 637.32 18.6797 635.68 18.6797C632.68 18.6797 629.773 19.4062 626.961 20.8594C624.148 22.3125 621.523 24.3281 619.086 26.9062C616.648 29.4375 614.398 32.4141 612.336 35.8359C610.32 39.2578 608.586 42.9375 607.133 46.875C605.68 50.8125 604.555 54.9141 603.758 59.1797C602.961 63.4453 602.562 67.6641 602.562 71.8359C602.562 77.0391 602.961 81.7266 603.758 85.8984C604.602 90.0234 605.75 93.5391 607.203 96.4453C608.656 99.3516 610.367 101.602 612.336 103.195C614.352 104.742 616.508 105.516 618.805 105.516C621.242 105.516 623.492 105.023 625.555 104.039C627.617 103.008 629.469 101.648 631.109 99.9609C632.75 98.2734 634.18 96.3281 635.398 94.125C636.617 91.9219 637.625 89.6484 638.422 87.3047C639.266 84.9609 639.898 82.6406 640.32 80.3438C640.742 78 640.953 75.8438 640.953 73.875C640.953 73.125 640.906 72.2812 640.812 71.3438C640.719 70.3594 640.672 69.6094 640.672 69.0938C640.672 68.3906 640.789 67.8516 641.023 67.4766C641.305 67.1016 641.656 66.8203 642.078 66.6328C642.5 66.4453 642.992 66.3281 643.555 66.2812C644.117 66.2344 644.703 66.2109 645.312 66.2109C645.969 66.2109 646.719 66.3516 647.562 66.6328C648.406 66.9141 649.203 67.3125 649.953 67.8281C650.75 68.2969 651.406 68.8594 651.922 69.5156C652.484 70.1719 652.766 70.8984 652.766 71.6953C652.391 75.5859 652.156 79.2891 652.062 82.8047C651.969 86.2734 651.922 89.8125 651.922 93.4219C651.922 96.7969 651.945 100.312 651.992 103.969C652.039 107.625 652.062 111.656 652.062 116.062C653.422 115.828 654.734 115.664 656 115.57C657.312 115.477 658.555 115.383 659.727 115.289C661.414 115.195 662.492 115.711 662.961 116.836C663.477 118.008 663.547 119.32 663.172 120.773C662.844 122.227 662.188 123.562 661.203 124.781C660.219 126 659.094 126.633 657.828 126.68C656.75 126.68 655.719 126.703 654.734 126.75C653.797 126.797 652.812 126.867 651.781 126.961C651.641 129.68 651.43 132.422 651.148 135.188C650.867 137.953 650.398 140.625 649.742 143.203C649.133 145.828 648.312 148.266 647.281 150.516C646.297 152.812 645.055 154.805 643.555 156.492C642.055 158.18 640.25 159.516 638.141 160.5C636.031 161.484 633.57 161.977 630.758 161.977C628.32 161.977 626.094 161.531 624.078 160.641C622.109 159.797 620.422 158.602 619.016 157.055C617.609 155.555 616.531 153.773 615.781 151.711C615.031 149.648 614.656 147.398 614.656 144.961C614.656 141.305 615.406 138.047 616.906 135.188C618.406 132.375 620.375 129.891 622.812 127.734C625.297 125.578 628.133 123.75 631.32 122.25C634.508 120.75 637.766 119.484 641.094 118.453V117.047C641.094 113.953 641.047 111.211 640.953 108.82C640.859 106.43 640.812 104.367 640.812 102.633ZM631.039 150.867C632.633 150.867 633.992 150.281 635.117 149.109C636.289 147.938 637.25 146.344 638 144.328C638.75 142.312 639.336 139.992 639.758 137.367C640.18 134.789 640.484 132.047 640.672 129.141C635.891 130.641 632.211 132.703 629.633 135.328C627.102 137.953 625.836 141.07 625.836 144.68C625.836 146.883 626.328 148.453 627.312 149.391C628.344 150.375 629.586 150.867 631.039 150.867Z"
            stroke="#308D46" stroke-width="6" 
            mask="url(#path-1-outside-1)" /> 
  
        <path
            d= 
"M720.547 100.664C719.938 101.695 718.883 103.148 717.383 105.023C715.93 106.852 713.984 108.68 711.547 110.508C709.109 112.289 706.156 113.836 702.688 115.148C699.219 116.508 695.188 117.188 690.594 117.188C687.125 117.188 683.867 116.648 680.82 115.57C677.773 114.539 675.078 113.016 672.734 111C670.438 108.984 668.609 106.523 667.25 103.617C665.938 100.664 665.281 97.3125 665.281 93.5625C665.281 90.9375 665.633 88.5 666.336 86.25C667.086 84 668.047 81.9609 669.219 80.1328C670.438 78.3047 671.82 76.6875 673.367 75.2812C674.961 73.875 676.625 72.7266 678.359 71.8359C676.766 70.8516 675.219 69.6797 673.719 68.3203C672.219 66.9141 670.883 65.25 669.711 63.3281C668.539 61.4062 667.602 59.2266 666.898 56.7891C666.195 54.3047 665.844 51.4922 665.844 48.3516C665.844 45.1641 666.289 41.9531 667.18 38.7188C668.117 35.4844 669.406 32.3672 671.047 29.3672C672.734 26.3203 674.75 23.5078 677.094 20.9297C679.438 18.3047 682.016 16.0312 684.828 14.1094C687.688 12.1406 690.734 10.5938 693.969 9.46875C697.25 8.34375 700.648 7.78125 704.164 7.78125C707.445 7.78125 710.352 8.27344 712.883 9.25781C715.461 10.2422 717.617 11.6016 719.352 13.3359C721.086 15.0234 722.398 17.0391 723.289 19.3828C724.18 21.6797 724.625 24.1406 724.625 26.7656C724.625 30.5156 723.898 34.1719 722.445 37.7344C721.039 41.2969 719.117 44.4844 716.68 47.2969C714.242 50.0625 711.406 52.3125 708.172 54.0469C704.938 55.7344 701.539 56.5781 697.977 56.5781C697.086 56.5781 696.172 56.4609 695.234 56.2266C694.297 55.9922 693.43 55.6172 692.633 55.1016C691.883 54.5391 691.25 53.8125 690.734 52.9219C690.266 52.0312 690.031 50.9531 690.031 49.6875C690.031 49.1719 690.055 48.6094 690.102 48C690.195 47.3906 690.312 46.8281 690.453 46.3125C690.594 45.7969 690.758 45.375 690.945 45.0469C691.133 44.6719 691.367 44.4844 691.648 44.4844C691.883 44.4844 692.094 44.5547 692.281 44.6953C692.516 44.8359 692.797 45 693.125 45.1875C693.5 45.375 693.992 45.5391 694.602 45.6797C695.211 45.8203 696.031 45.8906 697.062 45.8906C699.453 45.8906 701.633 45.3281 703.602 44.2031C705.617 43.0312 707.328 41.5312 708.734 39.7031C710.141 37.875 711.242 35.8125 712.039 33.5156C712.836 31.2188 713.234 28.9219 713.234 26.625C713.234 24 712.391 22.0547 710.703 20.7891C709.016 19.4766 706.836 18.8203 704.164 18.8203C700.555 18.8203 697.133 19.6875 693.898 21.4219C690.664 23.1094 687.805 25.3359 685.32 28.1016C682.883 30.8203 680.938 33.8906 679.484 37.3125C678.078 40.7344 677.375 44.1797 677.375 47.6484C677.375 50.3203 677.82 52.8047 678.711 55.1016C679.648 57.3984 680.82 59.4141 682.227 61.1484C683.68 62.8359 685.25 64.1953 686.938 65.2266C688.672 66.2109 690.336 66.7734 691.93 66.9141C692.164 66.8203 692.375 66.7734 692.562 66.7734C692.75 66.7734 692.961 66.7734 693.195 66.7734C694.086 66.7734 694.719 67.125 695.094 67.8281C695.469 68.4844 695.656 69.2812 695.656 70.2188C695.656 71.0156 695.539 71.8594 695.305 72.75C695.117 73.5938 694.859 74.3906 694.531 75.1406C694.25 75.8438 693.898 76.4531 693.477 76.9688C693.055 77.4375 692.633 77.6953 692.211 77.7422C690.711 77.9297 689.047 78.3047 687.219 78.8672C685.438 79.4297 683.773 80.3203 682.227 81.5391C680.68 82.7109 679.391 84.2578 678.359 86.1797C677.328 88.0547 676.812 90.4219 676.812 93.2812C676.812 95.1094 677.164 96.7969 677.867 98.3438C678.57 99.8906 679.555 101.227 680.82 102.352C682.086 103.43 683.562 104.273 685.25 104.883C686.984 105.492 688.859 105.797 690.875 105.797C693.875 105.797 696.57 105.375 698.961 104.531C701.398 103.688 703.508 102.656 705.289 101.438C707.07 100.219 708.523 98.9297 709.648 97.5703C710.773 96.2109 711.57 95.0156 712.039 93.9844C712.414 93.1406 712.859 92.5312 713.375 92.1562C713.938 91.7812 714.5 91.5938 715.062 91.5938C715.766 91.5938 716.469 91.8047 717.172 92.2266C717.875 92.6484 718.508 93.2109 719.07 93.9141C719.633 94.5703 720.078 95.3203 720.406 96.1641C720.781 96.9609 720.969 97.7812 720.969 98.625C720.969 99.375 720.828 100.055 720.547 100.664Z"
            stroke="#308D46" stroke-width="6"
            mask="url(#path-1-outside-1)" /> 
  
        <path
            d= 
"M784.812 100.664C784.203 101.695 783.148 103.148 781.648 105.023C780.195 106.852 778.25 108.68 775.812 110.508C773.375 112.289 770.422 113.836 766.953 115.148C763.484 116.508 759.453 117.188 754.859 117.188C751.391 117.188 748.133 116.648 745.086 115.57C742.039 114.539 739.344 113.016 737 111C734.703 108.984 732.875 106.523 731.516 103.617C730.203 100.664 729.547 97.3125 729.547 93.5625C729.547 90.9375 729.898 88.5 730.602 86.25C731.352 84 732.312 81.9609 733.484 80.1328C734.703 78.3047 736.086 76.6875 737.633 75.2812C739.227 73.875 740.891 72.7266 742.625 71.8359C741.031 70.8516 739.484 69.6797 737.984 68.3203C736.484 66.9141 735.148 65.25 733.977 63.3281C732.805 61.4062 731.867 59.2266 731.164 56.7891C730.461 54.3047 730.109 51.4922 730.109 48.3516C730.109 45.1641 730.555 41.9531 731.445 38.7188C732.383 35.4844 733.672 32.3672 735.312 29.3672C737 26.3203 739.016 23.5078 741.359 20.9297C743.703 18.3047 746.281 16.0312 749.094 14.1094C751.953 12.1406 755 10.5938 758.234 9.46875C761.516 8.34375 764.914 7.78125 768.43 7.78125C771.711 7.78125 774.617 8.27344 777.148 9.25781C779.727 10.2422 781.883 11.6016 783.617 13.3359C785.352 15.0234 786.664 17.0391 787.555 19.3828C788.445 21.6797 788.891 24.1406 788.891 26.7656C788.891 30.5156 788.164 34.1719 786.711 37.7344C785.305 41.2969 783.383 44.4844 780.945 47.2969C778.508 50.0625 775.672 52.3125 772.438 54.0469C769.203 55.7344 765.805 56.5781 762.242 56.5781C761.352 56.5781 760.438 56.4609 759.5 56.2266C758.562 55.9922 757.695 55.6172 756.898 55.1016C756.148 54.5391 755.516 53.8125 755 52.9219C754.531 52.0312 754.297 50.9531 754.297 49.6875C754.297 49.1719 754.32 48.6094 754.367 48C754.461 47.3906 754.578 46.8281 754.719 46.3125C754.859 45.7969 755.023 45.375 755.211 45.0469C755.398 44.6719 755.633 44.4844 755.914 44.4844C756.148 44.4844 756.359 44.5547 756.547 44.6953C756.781 44.8359 757.062 45 757.391 45.1875C757.766 45.375 758.258 45.5391 758.867 45.6797C759.477 45.8203 760.297 45.8906 761.328 45.8906C763.719 45.8906 765.898 45.3281 767.867 44.2031C769.883 43.0312 771.594 41.5312 773 39.7031C774.406 37.875 775.508 35.8125 776.305 33.5156C777.102 31.2188 777.5 28.9219 777.5 26.625C777.5 24 776.656 22.0547 774.969 20.7891C773.281 19.4766 771.102 18.8203 768.43 18.8203C764.82 18.8203 761.398 19.6875 758.164 21.4219C754.93 23.1094 752.07 25.3359 749.586 28.1016C747.148 30.8203 745.203 33.8906 743.75 37.3125C742.344 40.7344 741.641 44.1797 741.641 47.6484C741.641 50.3203 742.086 52.8047 742.977 55.1016C743.914 57.3984 745.086 59.4141 746.492 61.1484C747.945 62.8359 749.516 64.1953 751.203 65.2266C752.938 66.2109 754.602 66.7734 756.195 66.9141C756.43 66.8203 756.641 66.7734 756.828 66.7734C757.016 66.7734 757.227 66.7734 757.461 66.7734C758.352 66.7734 758.984 67.125 759.359 67.8281C759.734 68.4844 759.922 69.2812 759.922 70.2188C759.922 71.0156 759.805 71.8594 759.57 72.75C759.383 73.5938 759.125 74.3906 758.797 75.1406C758.516 75.8438 758.164 76.4531 757.742 76.9688C757.32 77.4375 756.898 77.6953 756.477 77.7422C754.977 77.9297 753.312 78.3047 751.484 78.8672C749.703 79.4297 748.039 80.3203 746.492 81.5391C744.945 82.7109 743.656 84.2578 742.625 86.1797C741.594 88.0547 741.078 90.4219 741.078 93.2812C741.078 95.1094 741.43 96.7969 742.133 98.3438C742.836 99.8906 743.82 101.227 745.086 102.352C746.352 103.43 747.828 104.273 749.516 104.883C751.25 105.492 753.125 105.797 755.141 105.797C758.141 105.797 760.836 105.375 763.227 104.531C765.664 103.688 767.773 102.656 769.555 101.438C771.336 100.219 772.789 98.9297 773.914 97.5703C775.039 96.2109 775.836 95.0156 776.305 93.9844C776.68 93.1406 777.125 92.5312 777.641 92.1562C778.203 91.7812 778.766 91.5938 779.328 91.5938C780.031 91.5938 780.734 91.8047 781.438 92.2266C782.141 92.6484 782.773 93.2109 783.336 93.9141C783.898 94.5703 784.344 95.3203 784.672 96.1641C785.047 96.9609 785.234 97.7812 785.234 98.625C785.234 99.375 785.094 100.055 784.812 100.664Z"
            stroke="#308D46" stroke-width="6" 
            mask="url(#path-1-outside-1)" /> 
  
        <path
            d= 
"M836.984 66.9141C841.625 65.9766 845.188 64.3359 847.672 61.9922C850.156 59.6484 851.984 56.8594 853.156 53.625C854.328 50.3438 855.078 46.7344 855.406 42.7969C855.781 38.8125 856.156 34.6875 856.531 30.4219C856.953 26.1094 857.633 21.7969 858.57 17.4844C859.508 13.125 861.148 8.92969 863.492 4.89844C863.633 4.57031 863.961 4.17188 864.477 3.70312C864.992 3.23438 865.672 3 866.516 3C867.406 3 868.344 3.11719 869.328 3.35156C870.359 3.58594 871.297 3.91406 872.141 4.33594C872.984 4.71094 873.664 5.15625 874.18 5.67188C874.742 6.1875 875.023 6.72656 875.023 7.28906C875.023 7.99219 874.648 8.53125 873.898 8.90625C872.398 11.1562 871.203 13.6641 870.312 16.4297C869.469 19.1484 868.789 22.0078 868.273 25.0078C867.758 27.9609 867.312 31.0078 866.938 34.1484C866.562 37.2891 866.117 40.4062 865.602 43.5C865.133 46.5469 864.5 49.5469 863.703 52.5C862.906 55.4062 861.828 58.1484 860.469 60.7266C859.109 63.2578 857.352 65.5547 855.195 67.6172C853.086 69.6797 850.438 71.4141 847.25 72.8203C850.625 74.6484 853.414 76.8516 855.617 79.4297C857.867 82.0078 859.766 84.8203 861.312 87.8672C862.859 90.8672 864.172 94.0312 865.25 97.3594C866.375 100.641 867.5 103.898 868.625 107.133C869.797 110.367 871.086 113.484 872.492 116.484C873.898 119.531 875.703 122.273 877.906 124.711C878.094 124.945 878.328 125.109 878.609 125.203C878.938 125.344 879.242 125.461 879.523 125.555C879.852 125.695 880.109 125.836 880.297 125.977C880.531 126.164 880.648 126.398 880.648 126.68C880.648 127.383 880.25 128.156 879.453 129C878.656 129.891 877.695 130.711 876.57 131.461C875.492 132.258 874.414 132.914 873.336 133.43C872.258 133.945 871.438 134.203 870.875 134.203C870.172 134.203 869.539 133.898 868.977 133.289C866.961 130.758 865.273 128.133 863.914 125.414C862.555 122.742 861.359 120.023 860.328 117.258C859.344 114.492 858.477 111.75 857.727 109.031C856.977 106.266 856.203 103.617 855.406 101.086C854.656 98.5078 853.789 96.0703 852.805 93.7734C851.867 91.4766 850.695 89.3906 849.289 87.5156C847.883 85.5938 846.172 83.9297 844.156 82.5234C842.188 81.0703 839.797 79.9453 836.984 79.1484V111.703C836.984 112.922 836.586 113.766 835.789 114.234C834.992 114.75 834.055 115.008 832.977 115.008C832.133 115.008 831.289 114.891 830.445 114.656C829.602 114.422 828.828 114.117 828.125 113.742C827.469 113.367 826.906 112.922 826.438 112.406C826.016 111.938 825.805 111.422 825.805 110.859V21.4219C822.57 21.8438 819.5 22.7578 816.594 24.1641C813.734 25.5703 811.227 27.4922 809.07 29.9297C806.961 32.3672 805.273 35.3203 804.008 38.7891C802.789 42.2578 802.18 46.2656 802.18 50.8125C802.18 53.7188 802.484 56.3438 803.094 58.6875C803.703 60.9844 804.43 62.9531 805.273 64.5938C806.117 66.1875 806.961 67.4297 807.805 68.3203C808.648 69.2109 809.305 69.6562 809.773 69.6562C810.195 69.6562 810.594 69.5625 810.969 69.375C811.344 69.1875 811.719 69.0938 812.094 69.0938C812.844 69.0938 813.219 69.6797 813.219 70.8516C813.219 72.3516 812.867 73.8047 812.164 75.2109C811.508 76.5703 810.664 77.6953 809.633 78.5859C808.602 79.4297 807.477 79.9688 806.258 80.2031C805.039 80.4375 803.914 80.1797 802.883 79.4297C801.617 78.5859 800.258 77.2969 798.805 75.5625C797.398 73.8281 796.086 71.7422 794.867 69.3047C793.695 66.8203 792.711 64.0312 791.914 60.9375C791.164 57.8438 790.789 54.4688 790.789 50.8125C790.789 45.75 791.398 41.2266 792.617 37.2422C793.836 33.2109 795.453 29.6953 797.469 26.6953C799.531 23.6953 801.922 21.1406 804.641 19.0312C807.359 16.9219 810.219 15.2109 813.219 13.8984C816.219 12.5859 819.266 11.6484 822.359 11.0859C825.453 10.4766 828.406 10.1719 831.219 10.1719C831.969 10.1719 832.695 10.3359 833.398 10.6641C834.102 10.9453 834.711 11.3672 835.227 11.9297C835.742 12.4453 836.164 13.0781 836.492 13.8281C836.82 14.5781 836.984 15.375 836.984 16.2188V66.9141Z"
            stroke="#308D46" stroke-width="6" 
            mask="url(#path-1-outside-1)" /> 
  
        <path
            d= 
"M902.938 116.203C899.891 116.203 897.359 115.852 895.344 115.148C893.328 114.492 891.734 113.742 890.562 112.898C889.391 112.055 888.57 111.258 888.102 110.508C887.633 109.711 887.398 109.195 887.398 108.961C887.398 108.117 887.586 107.227 887.961 106.289C888.336 105.305 888.805 104.414 889.367 103.617C889.93 102.773 890.539 102.07 891.195 101.508C891.852 100.945 892.438 100.664 892.953 100.664C893.609 100.664 894.148 101.086 894.57 101.93C894.664 102.023 894.898 102.258 895.273 102.633C895.648 103.008 896.164 103.406 896.82 103.828C897.523 104.203 898.367 104.555 899.352 104.883C900.383 105.211 901.578 105.375 902.938 105.375C905.891 105.375 908.305 104.484 910.18 102.703C912.055 100.875 912.992 98.4141 912.992 95.3203C912.992 93.1641 912.477 91.2422 911.445 89.5547C910.461 87.8672 909.148 86.2969 907.508 84.8438C905.867 83.3906 903.992 81.9844 901.883 80.625C899.773 79.2188 897.617 77.7656 895.414 76.2656C893.211 74.7656 891.055 73.1484 888.945 71.4141C886.836 69.6797 884.961 67.6875 883.32 65.4375C881.68 63.1875 880.344 60.6562 879.312 57.8438C878.328 54.9844 877.836 51.7266 877.836 48.0703C877.836 44.9297 878.375 41.7656 879.453 38.5781C880.531 35.3906 882.008 32.3672 883.883 29.5078C885.805 26.6016 888.055 23.9062 890.633 21.4219C893.211 18.8906 896 16.7109 899 14.8828C902 13.0078 905.117 11.5547 908.352 10.5234C911.633 9.44531 914.914 8.90625 918.195 8.90625C921.008 8.90625 923.539 9.35156 925.789 10.2422C928.039 11.1328 929.938 12.3984 931.484 14.0391C933.031 15.6328 934.227 17.5781 935.07 19.875C935.914 22.125 936.336 24.6562 936.336 27.4688C936.336 30.1406 935.867 32.7656 934.93 35.3438C933.992 37.9219 932.75 40.3594 931.203 42.6562C929.656 44.9531 927.898 47.0859 925.93 49.0547C924.008 50.9766 922.016 52.6641 919.953 54.1172C917.938 55.5234 915.969 56.625 914.047 57.4219C912.125 58.2188 910.438 58.6172 908.984 58.6172C907.719 58.6172 906.57 58.3359 905.539 57.7734C904.555 57.1641 903.711 56.4375 903.008 55.5938C902.352 54.7031 901.836 53.7891 901.461 52.8516C901.086 51.8672 900.898 51 900.898 50.25C900.898 49.6406 900.969 49.2422 901.109 49.0547C901.297 48.8672 901.531 48.7969 901.812 48.8438C902.141 48.8438 902.539 48.9141 903.008 49.0547C903.477 49.1484 904.016 49.1953 904.625 49.1953C906.594 49.1953 908.773 48.5156 911.164 47.1562C913.555 45.7969 915.805 44.0625 917.914 41.9531C920.023 39.8438 921.781 37.5234 923.188 34.9922C924.641 32.4609 925.367 30 925.367 27.6094C925.367 25.1719 924.758 23.25 923.539 21.8438C922.367 20.4375 920.352 19.7344 917.492 19.7344C915.711 19.7344 913.766 20.0859 911.656 20.7891C909.594 21.4453 907.508 22.3828 905.398 23.6016C903.289 24.8203 901.25 26.2969 899.281 28.0312C897.312 29.7656 895.578 31.6875 894.078 33.7969C892.578 35.8594 891.359 38.1094 890.422 40.5469C889.531 42.9375 889.086 45.4453 889.086 48.0703C889.086 50.8359 889.578 53.3203 890.562 55.5234C891.594 57.6797 892.93 59.6484 894.57 61.4297C896.258 63.2109 898.156 64.8516 900.266 66.3516C902.375 67.8516 904.531 69.3516 906.734 70.8516C908.938 72.3047 911.094 73.8281 913.203 75.4219C915.312 76.9688 917.188 78.7031 918.828 80.625C920.516 82.5 921.852 84.6094 922.836 86.9531C923.867 89.25 924.383 91.8984 924.383 94.8984C924.383 97.8047 923.82 100.57 922.695 103.195C921.617 105.773 920.117 108.023 918.195 109.945C916.273 111.867 914 113.391 911.375 114.516C908.75 115.641 905.938 116.203 902.938 116.203Z"
            stroke="#308D46" stroke-width="6" 
            mask="url(#path-1-outside-1)" /> 
    </svg> 
      
    <!-- JS file -->
    <script src="app.js"></script> 
</body> 
  
</html> 

CSS

*{   
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
} 
  
body{ 
    width: 100vw; 
    height: 100vh; 
    background: rgb(32,35,48); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
#logo{ 
    animation: fill 0.5s ease forwards 4s; 
} 
  
#logo path:nth-child(1){ 
    stroke-dasharray: 743; 
    stroke-dashoffset: 743; 
    animation: anims 2s ease forwards; 
} 
#logo path:nth-child(2){ 
    stroke-dasharray: 501; 
    stroke-dashoffset: 501; 
    animation: anims 2s ease forwards  0.3s; 
      
} 
#logo path:nth-child(3){ 
    stroke-dasharray: 501; 
    stroke-dashoffset: 501; 
    animation: anims 2s ease forwards 0.6s; 
      
} 
#logo path:nth-child(4){ 
    stroke-dasharray: 683; 
    stroke-dashoffset: 683; 
    animation: anims 2s ease forwards 0.9s; 
      
} 
#logo path:nth-child(5){ 
    stroke-dasharray: 454; 
    stroke-dashoffset: 454; 
    animation: anims 2s ease forwards 1.2s; 
      
} 
#logo path:nth-child(6){ 
    stroke-dasharray: 554; 
    stroke-dashoffset: 554; 
    animation: anims 2s ease forwards 1.5s; 
      
} 
#logo path:nth-child(7){ 
    stroke-dasharray: 549; 
    stroke-dashoffset: 549; 
    animation: anims 2s ease forwards 1.8s; 
      
} 
#logo path:nth-child(8){ 
    stroke-dasharray: 680; 
    stroke-dashoffset: 680; 
    animation: anims 2s ease forwards 2.1s; 
      
} 
#logo path:nth-child(9){ 
    stroke-dasharray: 743; 
    stroke-dashoffset: 743; 
    animation: anims 2s ease forwards 2.4s; 
      
} 
#logo path:nth-child(10){ 
    stroke-dasharray: 501; 
    stroke-dashoffset: 501; 
    animation: anims 2s ease forwards 2.7s; 
      
} 
#logo path:nth-child(11){ 
    stroke-dasharray: 501; 
    stroke-dashoffset: 501; 
    animation: anims 2s ease forwards 3.0s; 
      
} 
#logo path:nth-child(12){ 
    stroke-dasharray: 683; 
    stroke-dashoffset: 683; 
    animation: anims 2s ease forwards 3.1s; 
      
} 
#logo path:nth-child(13){ 
    stroke-dasharray: 454; 
    stroke-dashoffset: 454; 
    animation: anims 2s ease forwards 3.1s; 
      
} 
  
@keyframes anims{ 
    to{ 
        stroke-dashoffset: 0; 
    } 
} 
  
@keyframes fill{ 
    from{ 
        fill: transparent; 
    } 
    to{ 
        fill: #308D46; 
    } 
}

Javascript

const logo = document.querySelectorAll('#logo path'); 
  
// Loop to calculate length of path 
logo.forEach((logos) => { 
    console.log(logos.getTotalLength()); 
})