Guide to utilizing SVG animations for line drawing rather than just outlines

I've been experimenting with animating an SVG file to resemble the gif below, and I'm getting pretty close, but I seem to be encountering an issue where the outlines are drawn before being filled. I want the entire lines to be animated as shown in the gif.

Can anyone suggest modifications to my CSS or adjustments needed in the SVG itself to achieve this effect? I have limited experience when it comes to animating SVGs.

Current Animation

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1244.41 201.57">
        <defs>
          <style>
          .cls-1 {
            fill:#f59e00;
          }
          .cls-2 {
            fill:#7a1331;
          }
          #Dots circle {
            fill:#1e9a64;
          }
          #Lines path {
            animation: draw 3s linear forwards;
            animation-delay: 1.2s;
          }

          #Years_Text {
            animation: 1s ease-out 0s 1 slideInFromRight;
          }

          .line-1 {
            stroke-dasharray: 2150;
            stroke-dashoffset: 2150;
          }
          .
          .
          .
          
         </svg>

Wanted Animation

https://i.stack.imgur.com/FIYjT.gif

cssanimationsvgcss-animations

Answer №1

The main issue at hand is:

@keyframes draw {
  to {
    stroke-dashoffset: 0;
    fill: #1e9a64; <=== this
  }
}

You are unable to apply the fill property while the path is being drawn, as the path needs to be completed first.

I recommend adjusting the paths so that the space between the sides of the path is roughly half the stroke width.

Alternatively, you can modify the stroke width (for example, stroke-width="7.5") and increase the size of the circles slightly (for instance, r="9.98)...

An approximation could look something like this:

svg {
  margin: 5vh
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1244.41 201.57">
    <defs>
      <style>
      .cls-1 {
        fill:#f59e00;
      }
      .cls-2 {
        fill:#7a1331;
      }
      #Dots circle {
        fill:#1e9a64;
      }
      #Lines path {
        animation: draw 3s linear forwards;
        animation-delay: 1.2s;
      }

      #Years_Text {
        animation: 1s ease-out 0s 1 slideInFromRight;
      }

      .line-1 {
        stroke-dasharray: 2150;
        stroke-dashoffset: 2150;
      }
      .line-2 {
        stroke-dasharray: 1600;
        stroke-dashoffset: 1600;
      }
      .line-3 {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
      }
      .line-4 {
        stroke-dasharray: 650;
        stroke-dashoffset: 650;
      }
      .line-5 {
        stroke-dasharray: 1600;
        stroke-dashoffset: 1600;
      }
      .line-6 {
        stroke-dasharray: 1300;
        stroke-dashoffset: 1300;
      }

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


        .dot-1 {
          animation: 1s ease-out 0s 1 slideInFromLeft;
        }
        .dot-2 {
          animation: 1s ease-out 0s 1 slideInFromCenterToLeft;
        }
        .dot-3 {
          animation: 1s ease-out 0s 1 slideInFromCenterToLeft;
        }
        .dot-4 {
          animation: 1s ease-out 0s 1 slideInFromCenterToLeft;
        }
        .dot-5 {
          animation: 1s ease-out 0s 1 slideInFromLeft;
        }
        .dot-6 {
          animation: 1s ease-out 0s 1 slideInFromLeft;
        }
        .dot-7 {
          animation: 1s ease-out 0s 1 slideInFromCenterToRight;
        }
        .dot-8 {
          animation: 1s ease-out 0s 1 slideInFromCenterToRight;
        }
        .dot-9 {
          animation: 1s ease-out 0s 1 slideInFromTop;
        }
        .dot-10 {
          animation: 1s ease-out 0s 1 slideInFromLeft;
        }
        .dot-11 {
          animation: 1s ease-out 0s 1 slideInFromRight;
        }
        .dot-12 {
          animation: 1s ease-out 0s 1 slideInFromRight;
        }

        @keyframes slideInFromLeft {
          0% {
            transform: translate(-20%, -20%);
          }
          100% {
            transform: translate(0, 0);

          }
        }
        @keyframes slideInFromRight {
          0% {
            transform: translate(+20%, +20%);
          }
          100% {
            transform: translate(0, 0);

          }
        }
        @keyframes slideInFromCenterToRight {
          0% {
            transform: translate(-5%, +50%);
          }
          100% {
            transform: translate(0, 0);

          }
        }
        @keyframes slideInFromCenterToLeft {
          0% {
            transform: translate(+15%, +30%);
          }
          100% {
            transform: translate(0, 0);

          }
        }
        @keyframes slideInFromTop {
          0% {
            transform: translate(-5%, -5%);
          }
          100% {
            transform: translate(0, 0);

          }
        }

        </style>
    </defs>

<g id="Lines">
        <path class="line-1" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M1155.49,188.09h-69.85A3.74,3.74,0,0,1,1083,187l-20.2-20.19a3.73,3.73,0,0,1-1.09-2.64v-137a3.73,3.73,0,0,1,1.09-2.64L1083,4.35a3.74,3.74,0,0,1,2.64-1.1h24.21a3.74,3.74,0,0,1,0,7.47h-22.67l-18,18V162.61l18,18h66.76l18-18V28.73l-18-18h-23.45a3.74,3.74,0,1,1,0-7.47h25a3.74,3.74,0,0,1,2.64,1.1l20.2,20.19a3.73,3.73,0,0,1,1.09,2.64v137a3.73,3.73,0,0,1-1.09,2.64L1158.13,187A3.74,3.74,0,0,1,1155.49,188.09Z" />
        <path class="line-2" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M1145.2,169.43h-14.71a3.74,3.74,0,1,1,0-7.47h13.11l9.7-10.21V39.25l-9.67-9.87H1098.2l-10.37,9.93V151.68l10.4,10.28h11.62a3.74,3.74,0,0,1,0,7.47H1096.7a3.73,3.73,0,0,1-2.62-1.08l-12.6-12.46a3.71,3.71,0,0,1-1.11-2.65V37.72a3.69,3.69,0,0,1,1.15-2.69L1094.12,23a3.71,3.71,0,0,1,2.58-1h48.5a3.79,3.79,0,0,1,2.67,1.12l11.82,12.08a3.72,3.72,0,0,1,1.07,2.61V153.24a3.72,3.72,0,0,1-1,2.57l-11.82,12.45A3.73,3.73,0,0,1,1145.2,169.43Z" />
        <path class="line-3" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M1131.61,150.77h-23.15a3.76,3.76,0,0,1-2.6-1.05l-5.69-5.51a3.71,3.71,0,0,1-1.14-2.68V106a3.73,3.73,0,1,1,7.46,0v34l3.48,3.36h20.31l4.36-3.55V52.26L1130.13,48h-20l-3.63,4V85.35a3.73,3.73,0,0,1-7.46,0V50.64a3.73,3.73,0,0,1,1-2.49l5.7-6.34a3.74,3.74,0,0,1,2.78-1.24h23.15a3.73,3.73,0,0,1,2.55,1l6.76,6.34a3.75,3.75,0,0,1,1.18,2.72v90.89a3.74,3.74,0,0,1-1.38,2.89l-6.76,5.51A3.73,3.73,0,0,1,1131.61,150.77Z" />
        <path class="line-4" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M974.43,150.77H938a3.74,3.74,0,0,1,0-7.47H970.7v-84l-11.33,5.72A3.73,3.73,0,0,1,956,58.41L972.75,50a3.72,3.72,0,0,1,5.41,3.33V147A3.73,3.73,0,0,1,974.43,150.77Z" />
        <path class="line-5" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M1048.22,188.09H938a3.73,3.73,0,0,1-3.73-3.74V165.69A3.73,3.73,0,0,1,938,162h51.39V29.38h-6.5L949.75,46.73a3.73,3.73,0,1,1-3.46-6.61l33.92-17.78a3.72,3.72,0,0,1,1.73-.43h11.15a3.73,3.73,0,0,1,3.73,3.73V165.69a3.73,3.73,0,0,1-3.73,3.74H941.7v11.19h106.52a3.74,3.74,0,0,1,0,7.47Z" />
        <path class="line-6" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M1048.22,169.43h-36.47a3.74,3.74,0,0,1,0-7.47h32.73V150.77h-32.73A3.73,3.73,0,0,1,1008,147V10.72H975.33L940.84,28.36a3.73,3.73,0,1,1-3.4-6.64L972.73,3.66a3.74,3.74,0,0,1,1.7-.41h37.32A3.73,3.73,0,0,1,1015.48,7V143.3h32.74A3.73,3.73,0,0,1,1052,147v18.66A3.73,3.73,0,0,1,1048.22,169.43Z" />
    </g>


    <g id="Dots">
        <circle class="dot-1" cx="941.03" cy="147.03" r="9.98" />
        <circle class="dot-2" cx="941.23" cy="23.59" r="9.98" />
        <circle class="dot-3" cx="958.83" cy="61.32" r="9.98" />
        <circle class="dot-4" cx="949.22" cy="42.96" r="9.98" />
        <circle class="dot-5" cx="1014.77" cy="165.69" r="9.98" />
        <circle class="dot-6" cx="1045.08" cy="184.35" r="9.98" />
        <circle class="dot-7" cx="1109.85" cy="6.98" r="9.98" />
        <circle class="dot-8" cx="1130.49" cy="6.98" r="9.98" />
        <circle class="dot-9" cx="1109.85" cy="165.69" r="9.98" />
        <circle class="dot-10" cx="1130.49" cy="165.69" r="9.98" />
        <circle class="dot-11" cx="1102.87" cy="105.99" r="9.98" />
        <circle class="dot-12" cx="1102.87" cy="85.35" r="9.98" />
    </g>
</svg>

By the way, there exists an attribute in SVG known as pathLength which can be manually set, for example, pathLength="`"`.

Referencing information from CSS-Tricks

This attribute does not have any direct impact on its own (to my knowledge). It doesn't draw only a portion of the path — it still draws the entire path as if no modification was made, just with the path length value set to 1.

Now, you can set the stroke-dasharray to 1 and animate the offset using CSS!

For instance,

@keyframes dash {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

This method helps reduce repetition within your CSS code significantly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing the empty space to the right of an image in HTML

What could be causing the empty space to the right of my image? This is how the HTML file appears: ... <body> <div class="image"> <img src="image.jpg" alt="Picture here" id="image" align="middle"></img> </div> ...

htmlcssimage

Despite being positioned absolutely, they are able to make z-index work effectively

Currently, I am facing an issue with two elements in my design. The first element consists of dotted circles that should have a z-index of -999 so they remain in the background entirely. The second element is a login form that needs to have a z-index of 99 ...

htmlcssz-index

The CSS table-cell element causes adjacent table-cell content to reposition

The table inside the "center" div is causing the contents in the "left" div to be offset by a few pixels from the top (about 8 in my browser). When you add some text before the table, this offset disappears. Why is this happening? Is there a way to preven ...

htmlcsscss-tables

Apply the CSS style to make one element identical to another, while modifying a single property

I am currently working with the following CSS: input[type="text"] { border: 2px solid rgb(173, 204, 204); height: 31px; box-shadow: 0px 0px 27px rgb(204, 204, 204) inset; transition:500ms all ease; padding:3px 3px 3px 3px; } My goal i ...

css

How can one determine the dimensions of the browser window using a property?

Can someone please clarify how to find the width and height of the browser window specifically? Thanks in advance! ...

javascripthtmlcss

Need jQuery solution for changing CSS in numerous locations upon hover

Currently, I am working on a WordPress website and I am trying to figure out how to change the CSS color of a side navigation element when a remote image is hovered over. In a typical scenario, I would accomplish this using CSS by assigning a hover class ...

javascriptjquerycss

Delete the top row from the table

After extensive searching on various websites, I am still unable to resolve my html or CSS issue. An unexpected line is appearing above the table here. Here's the code snippet that is causing trouble: <table border="0" width="840" cellspacing="0" ...

htmlcsshtml-table

Ways to position an absolute element in the middle of two CSS Grid cells

Is it possible to position an element with position: absolute between two grid cells, where half of the element is on the sidebar and the other half is on the rest of the page? The challenge arises when there is overflow set on both the sidebar and the pag ...

css

I'm curious why this is happening. Is it due to the default padding or margin property?

I am currently working on a website project. The genre navigation menu is located in the bottom left container, and I had to use a negative margin property to position the li elements correctly. However, there seems to be an unexpected top padding of aro ...

htmlcss

Exploring the possibilities of toggling between a personalized CSS design and a Bootstrap CSS layout

Is it possible to implement a dropdown menu on my sample-page using javascript/jquery in order to switch between a custom layout and a bootstrap layout? ...

javascriptjqueryhtmlcss

Creating a Hover Effect for DIV Elements Using Pure CSS, No JavaScript Needed

Imagine a straightforward, horizontal navigation on a website: | Home | About | Products | Contact | Impress | ... or something like that... A rectangular element is positioned above the navigation. Now, I want this rectangle to automatically shift hori ...

htmlcssanimationhover

Simple HTML files on a local server are having trouble loading images and JavaScript, yet the CSS is loading

Having worked in web design for quite some time, I recently began working on a basic Angular app that is meant to be very simple. For this project, I am only using the angular files and a single html file as the foundation. As I started setting up the bas ...

javascripthtmlcssangularjscss-selectors

I have exhausted all possible solutions in my attempts to eliminate the whitespace below my footer. Is there something I have overlooked or not tried yet?

After updating the CSS stylesheet, I noticed a white space below my footer. A screenshot has been included for reference. Despite including a CSS reset, the issue still persists. /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author ...

htmlcss

Unable to view sidebar navigation on the screen

I've been experimenting with the sidebar navigation from w3 schools, specifically trying to create a side-nav that opens from one div. You can see an example here: http://www.w3schools.com/w3css/tryit.aspfilename=tryw3css_sidenav_left_right&stack ...

javascriptjqueryhtmlcssw3.css

Employing [style.something.px]="2" in Angular to specify the thickness of the border

Presently, I am setting the width of the element using this code format: <div [style.width.px]="size" [style.height.px]="size"></div> What I am aiming for is to utilize a comparable format but to define the border-width css attribute, such as ...

htmlcssangulartypescript

Ways to replace CSS classes created using makeStyles

To clarify, my development environment is using MUI version 4.12.3. Inside file A, I have a simplified code snippet for a functional component, along with the usage of makeStyles to style a JSX element within the return statement (not displayed here). Ever ...

javascriptcssreactjsmaterial-uimakestyles

Create a cohesive user experience by implementing the same CSS animation when hovering over two distinct elements

For a learning exercise, I attempted to create an animation. My goal was to have the circle trigger an animation when hovered over, while also revealing the text in the .hide element. However, as soon as I hover over the circle and then move my mouse onto ...

htmlcss

Using SCSS to target a sibling class when hovering over an element with CSS

Is there a way to alter styles of a sibling element on hover using only CSS? I attempted something similar but was unsuccessful. HTML: <ul> <li class="item active">name1</li> <li class="item">name2</li> <li clas ...

htmlcsssasssiblings

"Utilizing CSS to Format Academic Publications in the Style of APA Guidelines

Is there a way to automatically format a list of academic papers for an updated page using CSS rules? I want to style published articles similar to the following example: https://i.stack.imgur.com/jO56V.png I don't want to manually enter &nbsp;& ...

htmlcss

The CSS stylesheet appears to be properly linked, however, it is not displaying correctly on the preview page

Here are the locations of my folders: index.ejs can be found inside Markdown Blog/views/articles This is where my css stylesheet is located: ../../css/styles.css Despite ctrl+clicking the path and successfully navigating to the css file, the styles do no ...

htmlcss