How to animated SVG to draw the lines instead of outlines? - css

Question

I am trying to animate an SVG file to look like the gif below as much as possible, i'm getting pretty close i think but i'm stuck on an issue where i don't know why the outlines are drawed then the entire thing is filled. I would like the entire lines to be animated as shown in the gif.
Do anyone know what i could change in my CSS or if i there is something in the SVG that i need to modify to make this possible, i'm quite new 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;
}
.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;
fill: #1e9a64;
}
}
.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="2" 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="2" 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="2" 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="2" 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="2" 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="2" 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="6.98" />
<circle class="dot-2" cx="941.23" cy="23.59" r="6.98" />
<circle class="dot-3" cx="958.83" cy="61.32" r="6.98" />
<circle class="dot-4" cx="949.22" cy="42.96" r="6.98" />
<circle class="dot-5" cx="1014.77" cy="165.69" r="6.98" />
<circle class="dot-6" cx="1045.08" cy="184.35" r="6.98" />
<circle class="dot-7" cx="1109.85" cy="6.98" r="6.98" />
<circle class="dot-8" cx="1130.49" cy="6.98" r="6.98" />
<circle class="dot-9" cx="1109.85" cy="165.69" r="6.98" />
<circle class="dot-10" cx="1130.49" cy="165.69" r="6.98" />
<circle class="dot-11" cx="1102.87" cy="105.99" r="6.98" />
<circle class="dot-12" cx="1102.87" cy="85.35" r="6.98" />
</g>
</svg>
Wanted Animation

Answer 1

The basic issue is:
#keyframes draw {
to {
stroke-dashoffset: 0;
fill: #1e9a64; <=== this
}
}
You can't fill as the path draws only after the path is complete.
I'd suggest adjusting the paths so that the space between the path "sides* is approximately half the stroke width.
Alternatively, adjust the stroke width (say stroke-width="7.5") and make the circles a little larger (say r="9.98)...
Something like this (poor approximation):
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>
BTW, there is an attribute in SVG called pathLength which can be set manually say to pathLength=""`.
From CSS-Tricks
That doesn't do anything by itself (as far as I know). It's not like that only draws part of the path — it still draws the whole thing like as if you did nothing, only now the "math" of the path length is based on a value of 1.
Now we can set the stroke-dasharray to 1, and animate the offset in CSS!
E.g
#keyframes dash {
from {
stroke-dashoffset: 1;
}
to {
stroke-dashoffset: 0;
}
}
You can use significantly reduce repetition in your CSS.