SVG outlines fade-in animation - css
I'm having some trouble with a SVG logo animation. I made the outlines animation using the vivus tool (https://maxwellito.github.io/vivus-instant/). That works great.
Now I want the paths to fill in at about 80%.
So that at the end the whole logo is visible, not just the outlines. I tried adding a piece of code I found here: https://codepen.io/kay8/pen/GgEQra
But that just makes the whole logo fill in at 80%, but the outlines animation isn't working anymore.
Here's my code:
<svg version="1.1" id="wino" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 662.1 176.1" style="background-color: #e97965;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
.st1{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}
.HqJTsNPU_0 {
stroke-dasharray: 1397 1399;
stroke-dashoffset: 1398;
animation: HqJTsNPU_draw 2000ms ease-out 0ms forwards;
}
.HqJTsNPU_1 {
stroke-dasharray: 821 823;
stroke-dashoffset: 822;
animation: HqJTsNPU_draw 2000ms ease-out 111ms forwards;
}
.HqJTsNPU_2 {
stroke-dasharray: 227 229;
stroke-dashoffset: 228;
animation: HqJTsNPU_draw 2000ms ease-out 222ms forwards;
}
.HqJTsNPU_3 {
stroke-dasharray: 92 94;
stroke-dashoffset: 93;
animation: HqJTsNPU_draw 2000ms ease-out 333ms forwards;
}
.HqJTsNPU_4 {
stroke-dasharray: 457 459;
stroke-dashoffset: 458;
animation: HqJTsNPU_draw 2000ms ease-out 444ms forwards;
}
.HqJTsNPU_5 {
stroke-dasharray: 426 428;
stroke-dashoffset: 427;
animation: HqJTsNPU_draw 2000ms ease-out 555ms forwards;
}
.HqJTsNPU_6 {
stroke-dasharray: 96 98;
stroke-dashoffset: 97;
animation: HqJTsNPU_draw 2000ms ease-out 666ms forwards;
}
.HqJTsNPU_7 {
stroke-dasharray: 462 464;
stroke-dashoffset: 463;
animation: HqJTsNPU_draw 2000ms ease-out 777ms forwards;
}
.HqJTsNPU_8 {
stroke-dasharray: 227 229;
stroke-dashoffset: 228;
animation: HqJTsNPU_draw 2000ms ease-out 888ms forwards;
}
.HqJTsNPU_9 {
stroke-dasharray: 92 94;
stroke-dashoffset: 93;
animation: HqJTsNPU_draw 2000ms ease-out 1000ms forwards;
}
#keyframes HqJTsNPU_draw {
100% {
stroke-dashoffset: 0;
}
}
/*fill in animation*/
.st0{
fill: #000000;
fill-opacity: 1;
animation: fill-element 3s ease-in-out 0s forwards;
}
.st1{
fill: #ffffff;
fill-opacity: 1;
animation: fill-element 3s ease-in-out 0s forwards;
}
#keyframes fill-element{
0% {fill-opacity: 0;}
80% {fill-opacity: 0;}
100% {fill-opacity: 1;}
}
</style>
<path id="black-outline_2_" class="st0 HqJTsNPU_0" d="M17.4,126.9L17.4,91.6L645.2,91.6L645.2,162.1L17.4,162.1L17.4,126.9"></path>
<path class="st1 HqJTsNPU_1" d="M97.8,137.7L68,137.7L42.4,23.1L71.4,23.1L85.3,93.8L105.3,23.1L131.6,23.1L151.6,93.8L165.5,23.1L
193.5,23.1L168,137.7L138.2,137.7L118,64.7Z"></path>
<path class="st1 HqJTsNPU_2" width="26.5" height="86.6" d="M205.5 51.1 L232 51.1 L232 137.7 L205.5 137.7 Z"></path>
<path class="st1 HqJTsNPU_3" d="M218.7,43.1c3.9,0.1,7.6-1.5,10.3-4.3c2.8-2.7,4.3-6.4,4.2-10.3c0.1-3.9-1.5-7.6-4.2-10.3
c-5.7-5.7-14.9-5.7-20.6,0c-2.8,2.7-4.3,6.4-4.2,10.3c-0.1,3.9,1.5,7.6,4.2,10.3C211.1,41.6,214.8,43.1,218.7,43.1"></path>
<path class="st1 HqJTsNPU_4" d="M274.9,137.7V79c1.8-2.2,4-3.9,6.5-5c2.8-1.2,5.9-1.8,9-1.8c0.6,0,1.1,0,1.7,0c8.2,0.5,14.5,7.5,14,15.7v49.8
h26.5V84.3c0-10.1-3.2-18.5-9.6-25s-14.7-9.8-24.9-9.8c-4.3,0-8.5,0.6-12.5,2c-3.9,1.2-7.5,3.1-10.7,5.6v-5.9h-26.5v86.6h26.5V137.7
z"></path>
<path class="st1 HqJTsNPU_5" d="M391.4,116.4c-5.7,0.1-11.1-2.2-15-6.4c-4.1-4.1-6.3-9.8-6.1-15.5c-0.1-5.8,2.1-11.5,6.1-15.7
c0.2-0.2,0.4-0.4,0.6-0.6c8.3-8,21.4-7.7,29.4,0.6c4.1,4.2,6.3,9.9,6.1,15.7c0.1,5.8-2.1,11.4-6.1,15.5
C402.5,114.2,397.1,116.5,391.4,116.4 M344.4,94.4c0,6.1,1.2,12.1,3.7,17.6c2.4,5.4,5.8,10.2,10,14.3c4.3,4.1,9.4,7.3,14.9,9.5
c11.9,4.6,25,4.6,36.8,0c5.5-2.2,10.6-5.4,14.9-9.5c4.2-4.1,7.6-8.9,10-14.3c4.9-11.2,4.9-24,0-35.2c-2.4-5.4-5.8-10.2-10-14.3
c-4.3-4.1-9.4-7.4-14.9-9.6c-11.8-4.7-25-4.7-36.8,0c-5.5,2.2-10.6,5.4-14.9,9.5c-4.2,4.1-7.6,8.9-10,14.3
C345.7,82.4,344.4,88.4,344.4,94.4"></path>
<path class="st1 HqJTsNPU_6" d="M460.7,109c-4,0-7.9,1.6-10.7,4.5c-2.9,2.9-4.6,6.8-4.5,10.9c0.1,8.4,6.9,15.1,15.3,15
c8.4,0,15.2-6.8,15.2-15.2S469.1,109,460.7,109"></path>
<path class="st1 HqJTsNPU_7" d="M483.3,128c5.4,3.9,11.6,6.8,18.1,8.4c7.5,2,15.1,2.9,22.8,2.9c5.3,0,10.5-0.7,15.6-2.2
c4.5-1.3,8.6-3.4,12.4-6.1c3.3-2.5,6.1-5.7,8.1-9.3c2-3.6,3-7.6,3-11.6c0.2-6.3-2.4-12.4-7-16.8c-4.6-4.4-11.2-7.2-19.7-8.4
l-17.2-2.6c-3.7-0.6-6.3-1.3-7.9-2.4c-1.5-0.9-2.3-2.5-2.3-4.2c0.1-2,1.3-3.8,3.2-4.5c2.5-1.3,5.4-1.8,8.2-1.7
c4.3,0,8.6,0.6,12.7,1.8c4.7,1.5,9.2,3.5,13.4,6l12.6-17c-5.4-3.4-11.3-6-17.4-7.8c-6.1-1.8-12.4-2.7-18.8-2.7
c-11.6,0-20.7,2.5-27.3,7.6c-6.7,5-10,11.9-10,20.6c0,7.1,2.3,12.9,6.9,17.3c4.6,4.4,11.1,7.3,19.6,8.6l17.2,2.6
c2.4,0.2,4.7,1,6.7,2.2c1.3,0.9,2.1,2.4,2.1,4c0,2.1-1.3,3.8-3.8,5c-3.3,1.4-6.8,2-10.4,1.9c-4.5,0-9-0.8-13.3-2.2
c-5.2-1.8-10.2-4.2-14.9-7.1L483.3,128"></path>
<path class="st1 HqJTsNPU_8" width="26.5" height="86.6" d="M573.3 51.1 L599.8 51.1 L599.8 137.7 L573.3 137.7 Z"></path>
<path class="st1 HqJTsNPU_9" d="M586.5,43.1c3.9,0.1,7.6-1.5,10.4-4.3c2.8-2.7,4.3-6.4,4.3-10.3c0.1-3.9-1.5-7.6-4.3-10.3
c-5.7-5.7-14.9-5.7-20.6,0c-2.8,2.7-4.3,6.4-4.2,10.3c-0.1,3.9,1.5,7.6,4.2,10.3C578.9,41.6,582.7,43.1,586.5,43.1"></path>
</svg>
Related
How to animated SVG to draw the lines instead of outlines?
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
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.
Problem with starting point of SVG animation for a path/arc
I'm trying to animate this SVG path/arc, from the beginning point to the end point, but I can not achieve that. Actually, the animation starts at the midpoint of the arc.
My arc's code is:
#arc {
display: block;
stroke-dashoffset: 3925px;
stroke-dasharray: 3925px;
}
#arc {
-webkit-animation: dashAnim 1s 1s linear alternate forwards;
animation: dashAnim 1s 1s linear alternate forwards;
}
#keyframes dashAnim {
0% {
stroke-dashoffset: 3925px;
}
100% {
stroke-dashoffset: 0px;
}
}
<svg id="arc" viewBox="0 0 1922 100.2">
<path id="arc-stroke" fill="none" stroke="#FF0000" strokeWidth="5"
strokeMiterlimit="10" d="M969.3,21.9c-344.4,0-669.8,82.4-956.8,229.7v6
h1922.3C1646,106.7,1317.2,21.9,969.3,21.9z"/>
</svg>
Can anyone help?
When opened in application like Illustrator, your path had additional points off canvas. I cleaned them up and the animation seems to work as you wanted.
There were no other obvious problems with the path that I could find.
My guess is - when you animate a closed path that is effectively a circle, something has to be the beginning and the end. In this case it was the middle of the arc.
#arc {
display: block;
stroke-dashoffset: 3925px;
stroke-dasharray: 3925px;
}
#arc {
-webkit-animation: dashAnim 1s 1s linear alternate forwards;
animation: dashAnim 1s 1s linear alternate forwards;
}
#keyframes dashAnim {
0% {
stroke-dashoffset: 3925px;
}
100% {
stroke-dashoffset: 0px;
}
}
<svg id="arc" viewBox="0 0 1922 100.2">
<path id="arc-stroke" fill="none" stroke="#FF0000" strokeWidth="5"
strokeMiterlimit="10" d="M1591.4,115.8c-196.6-61.1-405.6-93.9-622.1-93.9c-218.8,0-430,33.3-628.5,95.3"/>
</svg>
Start and end of stroke animation
What I want is in green And what I already have Is in red in the image. And I want it to be done in CSS animation. The edge of the triangle (start and end of stroke) should be angled like in picture.
My so far code is :
.path {
stroke-dasharray: 504;
animation: dash 2.5s linear infinite;
-webkit-animation: dash 2.5s linear infinite;
-moz-animation: dash 2.5s linear infinite;
-ms-animation: dash 2.5s linear infinite -o-animation: dash 2.5s linear infinite;
}
#keyframes dash {
0% {
stroke-dashoffset: 0;
stroke-width: 30;
}
50% {
stroke-dashoffset: 500;
stroke-width: 30;
}
100% {
stroke-dashoffset: 1000;
stroke-width: 30;
}
}
div svg {
width: 20%;
}
<div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 252.7 251.9" style="enable-background:new 0 0 252.7 251.9;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #fff;
}
</style>
<g>
<path stroke="#C5C5C5" stroke-width="20" stroke-linejoin="square" stroke-linecap="butt" class="path" d="M151 45 L79 200 L213 200 L152.324 50 L156 45" fill="url(#fagl)" />
</g>
</svg>
</div>
The issue you are facing is the way the stoke end is rendered. I am not aware of a way to make it end exaclty at the angle you need. None of the stoke-linecap values would fit.
You should also note that the path element in your SVG doesn't have the same start and end points.
Workaround:
A way would be to make the path go further than you need it and hide the overflow with clipPath. This way, the sroke will end at the desired angle:
.path {
stroke-dasharray: 23;
animation: dash 2.5s linear infinite;
}
#keyframes dash {
to { stroke-dashoffset: -46; }
}
svg { width: 20%; }
<svg viewBox="0 0 10 10">
<clipPath id="clip">
<path d="M5 1 L8 9 H2z" />
</clipPath>
<path stroke="#C5C5C5" stroke-width="2" class="path" d="M5 1 L8 9 H2 L5 1" fill="url(#fagl)" clip-path="url(#clip)" />
</svg>
Note that I also simplified your SVG and CSS
If you change the 45 values to 60 (the degrees) in your path it will give you the output you desired AFAICT
Snippet
.path {
stroke-dasharray: 504;
animation: dash 2.5s linear infinite;
-webkit-animation: dash 2.5s linear infinite;
-moz-animation: dash 2.5s linear infinite;
-ms-animation: dash 2.5s linear infinite -o-animation: dash 2.5s linear infinite;
}
#keyframes dash {
0% {
stroke-dashoffset: 0;
stroke-width: 30;
}
50% {
stroke-dashoffset: 500;
stroke-width: 30;
}
100% {
stroke-dashoffset: 1000;
stroke-width: 30;
}
}
div svg {
width: 20%;
}
<div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 252.7 251.9" style="enable-background:new 0 0 252.7 251.9;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #fff;
}
</style>
<g>
<path stroke="#C5C5C5" stroke-width="20" stroke-linejoin="square" stroke-linecap="butt" class="path" d="M151 60 L79 200 L213 200 L152.324 50 L156 60" fill="url(#fagl)" />
</g>
</svg>
</div>
CSS how to revert SVG animation on mouseout from current frame
I'm doing some button animation with SVG and can't make it to work exactly I want. I tried find same case but no luck. So I end up here, because I spend too much time on this already. Any help would be much appreciated.
Here is the code: http://jsfiddle.net/wq4djg9z/2/
It works fine, but with one flaw. It's always starts animation from fixed value.
#button-border {
stroke-dasharray: 150;
stroke-dashoffset: 150;
stroke-width: 4px;
-webkit-animation: dash-back 1.0s linear;
fill: none;
pointer-events: all;
}
#button-border:hover {
-webkit-animation: dash 1.0s linear forwards;
pointer-events: all;
}
#-webkit-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes dash-back {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 150;
}
}
Is there a way to start animation from current animation frame when mouse out the button to smooth animation?
What about using transitions instead of animations to do the reverse part ?
#button-border {
stroke-dasharray: 150;
stroke-dashoffset: 150;
stroke-width: 4px;
-webkit-animation: dash-back 1.0s linear;
animation: dash-back 1.0s linear;
fill: none;
pointer-events: all;
transition: stroke-dashoffset 1s linear;
-webkit-transition: stroke-dashoffset 1s linear;
}
#button-border:hover {
stroke-dashoffset: 0;
pointer-events: all;
}
#-webkit-keyframes dash-back {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 150;
}
}
#keyframes dash-back {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 150;
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100.00000" height="50.00000" id="svg1" version="1.1" viewBox="0 0 100 50" enable-background="new 0 0 100 50" xml:space="preserve">
<style type="text/css">
<![CDATA[]]>
</style>
<g id="button-border">
<path class="path" style="fill:none;stroke:#000000;stroke-opacity:1" d="m 100,50.0 0,-50.00000 -100,00.00000" id="path2983" />
<path class="path" style="fill:none;stroke:#000000;stroke-opacity:1" d="m 0,0 0,50 100,0" id="path2984" />
<text x="30" y="30" font-family="Verdana" font-size="15" fill="blue">Hello</text>
</g>
</svg>
CSS3 animation out of sync
I have this keyframe animation, that is supposed to change the color of a div at the 50% mark, then after a 2s delay, it is supposed to animate another div. And another after that.
And loop like that.
But it doesn't work like it should. Instead of the div running one after another, they run at the same time.
How can I fix this?
div#wifi-waves svg path#w01 {
-webkit-animation: colorchnage 1s infinite;
animation: colorchnage 1s infinite;
}
div#wifi-waves svg path#w02 {
-webkit-animation: colorchnage 1s infinite;
animation: colorchnage 1s infinite;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
div#wifi-waves svg path#w03 {
-webkit-animation: colorchnage 1s infinite;
animation: colorchnage 1s infinite;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
div#wifi-waves svg path#w04 {
-webkit-animation: colorchnage 1s infinite;
animation: colorchnage 1s infinite;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#-webkit-keyframes colorchnage {
0% { fill: #ecf0f1; }
50% { fill: rgba(26, 60, 88, 0.9); }
100% { fill: #ecf0f1; }
}
#keyframes colorchnage {
0% { fill: #ecf0f1; }
50% { fill: rgba(26, 60, 88, 0.9); }
100% { fill: #ecf0f1; }
}
SVG:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 45" xml:space="preserve" preserveAspectRatio="xMixYMid">
<path id="w04" d=""></path>
<path id="w03" d=""></path>
<path id="w02" d=""></path>
<path id="w01" d=""></path>
</svg>
Because you wish to make each item animate one after the other, you should make the sure that the animation on the first item completes before the time the second one starts. Effectively, the delay you add on the each element is the amount of time for which the animation can run on the previous element.
Also, the element which was animated previously should stay idle for the rest of the time (while the animation on other elements are happening) to make it look like they are happening in an iterative manner. So effectively your total animation duration should be equal to the [Delay on each element * No. of elements].
Here you are expecting a 2s delay between each element getting animated and hence the total duration of the animation should be 8s. Plus, the duration on each element should get completed in 2s (which is 25% of 8s).So, your animation code should look like in the below snippet. (The SVG in question wasn't working, so I copied something from the net).
div#wifi-waves svg path#w01 {
-webkit-animation: colorchnage 8s infinite;
animation: colorchnage 8s infinite;
}
div#wifi-waves svg path#w02 {
-webkit-animation: colorchnage 8s infinite;
animation: colorchnage 8s infinite;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
div#wifi-waves svg path#w03 {
-webkit-animation: colorchnage 8s infinite;
animation: colorchnage 8s infinite;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
div#wifi-waves svg path#w04 {
-webkit-animation: colorchnage 8s infinite;
animation: colorchnage 8s infinite;
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
#-webkit-keyframes colorchnage {
0% {
fill: #ecf0f1;
}
12.5% {
fill: rgba(26, 60, 88, 0.9);
}
25% {
fill: #ecf0f1;
}
}
#keyframes colorchnage {
0% {
fill: #ecf0f1;
}
12.5% {
fill: rgba(26, 60, 88, 0.9);
}
25% {
fill: #ecf0f1;
}
<div id="wifi-waves">
<svg width="200px" height="260px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path id="w01" d="M10 80 Q 95 10 180 80" stroke="black" fill="#ecf0f1" />
<path id="w02" d="M10 120 Q 95 40 180 120" stroke="black" fill="#ecf0f1" />
<path id="w03" d="M10 160 Q 95 80 180 160" stroke="black" fill="#ecf0f1" />
<path id="w04" d="M10 200 Q 95 120 180 200" stroke="black" fill="#ecf0f1" />
</svg>
</div>
CSS doesn't read the properties from top to bottom, delaying each animation 2s after the other. You have to give each wave a delay, like this:
div#wifi-waves svg path{
animation: colorchnage 1s infinite;
}
div#wifi-waves svg path#w02{
animation-delay: 2s;
}
div#wifi-waves svg path#w03{
animation-delay: 4s;
}
div#wifi-waves svg path#w04{
animation-delay: 6s;
}