CODEWITHSUNDEEP
csssvg
Nizzy
Nizzy

Reputation: 379

Why is my SVG path start drawing in two places at once?

I am new to learning SVG and css animations. I am simply trying to draw the letter "T". My issue is that the path begins animating in two different spots. I want it to draw the horizontal line first before drawing the vertical line. What am I not understanding? Below is what i have thus far. Thanks.

.letter_loader {
	fill: none;
    stroke: #000;
    stroke-width: 8px;
    stroke-dasharray: 200px;
    stroke-dashoffset: 200px;
    animation: move 5s linear forwards;
}

@keyframes move {
    100% {
        stroke-dashoffset: 0;
    }
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="129.204 94.714 359.102 415.224" width="355.1" height="411.22">
<path class="letter_loader"
d="M175.2 250.76 L275.2 250.76 M225.2 250.76 L225.2 350.76" />
</svg>

Upvotes: 1

Views: 287

Answers (2)

Rojo
Rojo

Reputation: 2869

The way I would approach this wouldn't be the best way...

First, setup a box/line that blends in with the background. It should be compiled before the <path>. It should be as wide as the line and be as tall as the horizontal line's width. Then, start the vertical line at the top of the box/line that is supposed to blend in with the background. What is supposed to happen is although the animations start a the same time, the vertical line won't be seen by the viewer until the horizontal line finishes. This may be a bit more difficult if your background is a linear gradient.

Here is what I am thinking:

.letter_loader {
	fill: none;
    stroke: #000;
    stroke-width: 8px;
    stroke-dasharray: 200px;
    stroke-dashoffset: 200px;
    animation: move 5s linear forwards;
}

@keyframes move {
    100% {
        stroke-dashoffset: 0;
    }
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" style='background-color: #f1f1f1;'>
<path class="letter_loader"
d="M150 150 L250 150 M200 50 L200 250" />
<path style="stroke: #f1f1f1; stroke-width: 8px;" d="M200 50 L 200 146"/>
</svg>

Upvotes: 1

Calvin Nunes
Calvin Nunes

Reputation: 6516

You are drawing a single svg path with a single class, so, the entire path will be drawn with the same animation that starts with stroke-dashoffset:200px and after 5 seconds become 0px.

One option that I think (I'm not an expert with svg or animations, if someone is and I'm saying bullshit, please tell me) you can use, is to separate the path in two, one for top of T other for the base. So in the T base you add another class with another animation, that starts a little later than the top part.

See below code to understand it better.

/* class and animation for T Top*/
.letter_loader {
  fill: none;
  stroke: #000;
  stroke-width: 8px;
  stroke-dasharray: 200px;
  stroke-dashoffset: 200px;
  animation: move 5s ease forwards;
}

@keyframes move {
  100% {
    stroke-dashoffset: 0;
  }
}

/* class and animation for T Base*/
.letter_loader_later {
  fill: none;
  stroke: #000;
  stroke-width: 8px;
  stroke-dasharray: 200px;
  stroke-dashoffset: 200px;
  animation: move_later 5s ease forwards;
}

@keyframes move_later {
  /* until 25% it stills with 200px to have a "later start*/
  25% {
    stroke-dashoffset: 200px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="129.204 94.714 359.102 415.224" width="355.1" height="411.22">
  <path class="letter_loader" d="M175.2 250.76 L275.2 250.76" /> <!-- T TOP -->
  <path class="letter_loader_later" d="M225.2 250.76 L225.2 350.76"/> <!-- T BASE -->
</svg>

Upvotes: 0

Related Questions