CSS for my SVG (Having trouble with Transform Origin) - css

So I have two classes(firstCircle & spin) on the First circle on the left and I'm trying to get it to rotate in place.(removed them from css so you can see the circle) I'm getting confused on transform-origin: What is wrong with my code.It's rotating way out of place instead of spinning. I added a width and height and tried transform-origin and it just makes it disappear.
.spin {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 1120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
transform-origin: center center;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg);
transform:rotate(360deg); } }
.container { padding:auto;
width: auto;
height: auto;
text-align:center; }
.line1 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
animation-delay: 2.13s;
}
.line2 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
animation-delay: 2.5s;
}
.line3 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
animation-delay: 3s;
}
.line4 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
animation-delay: 3.4s;
}
.line5 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
animation-delay: 3.9s;
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.insidefirstCircle {
stroke-dasharray: 1000;
stroke-dashoffset: 100;
animation: insideCircle 10s linear forwards;
animation-delay: 1.2s;
}
#keyframes insideCircle {
from {
stroke-dashoffset: 1000;
opacity: 1;
}
to {
stroke-dashoffset: 0;
opacity: 1;
}
}
.secondCircle {
animation: secondCircle 2s linear forwards;
animation-delay: 2.2s;
}
#keyframes secondCircle {
from {
stroke-dashoffset: 1000;
opacity: 0;
}
to {
stroke-dashoffset: 0;
opacity: 1;
}
}
.insidesecondCircle {
animation: insidesecondCircle 2s linear forwards;
animation-delay: 2.2s;
}
#keyframes insidesecondCircle {
from {
stroke-dashoffset: 1000;
opacity: 0;
}
to {
stroke-dashoffset: 0;
opacity: 1;
}
}
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="css/css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<svg>
<path class="firstCircle spin"
transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)"
d="m -28.957516,-109.01346 a 20.505369,19.487934 0 0 1 25.9801488,5.74848 20.505369,19.487934 0 0 1 -1.9792854,25.281519 20.505369,19.487934 0 0 1 -26.5892124,2.031123 20.505369,19.487934 0 0 1 -6.202719,-24.656512"
id="path7158"
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35702455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
<path class="insidefirstCircle"
transform="matrix(-0.22033261,-0.9754248,-0.97735568,0.21160309,0,0)"
d="m -102.55362,-32.142649 a 7.185163,7.442451 0 0 1 5.829705,7.489633 7.185163,7.442451 0 0 1 -6.173275,7.188196 7.185163,7.442451 0 0 1 -7.86062,-5.124812"
id="path7160"
style="opacity:0;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35700712;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
<ellipse class="secondCircle"
ry="5.8064542"
rx="5.806459"
transform="rotate(-9.0228844)"
cy="102.10918"
cx="31.181959"
id="path7162"
style="opacity:0;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.38561434;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
<circle class="insidesecondCircle"
r="2.081239"
style="opacity:0;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:2.138;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
id="circle7192"
cx="46.80978"
cy="95.955421" />
<circle class="line1"
r="8.1839027"
cy="124.84148"
cx="88.252518"
id="path7166"
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.63219434;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
<circle
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:3.454;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
id="circle7168"
cx="88.252518"
cy="124.84148"
r="4.5812778" />
<circle
r="6.7396846"
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.52063066;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
id="circle7174"
cx="128.74611"
cy="90.168755" />
<path
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35702455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
id="path7186"
d="m -180.38976,-169.87182 a 20.505369,19.487934 0 0 1 27.64196,8.28339 20.505369,19.487934 0 0 1 -8.68637,26.27924 20.505369,19.487934 0 0 1 -27.66048,-8.22736 20.505369,19.487934 0 0 1 8.62739,-26.29677"
transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)" />
<ellipse
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35702455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
id="ellipse7190"
cx="152.20651"
cy="155.0309"
transform="matrix(0.98886074,-0.14884364,0.16522023,0.9862567,0,0)"
rx="5.5144606"
ry="5.2409396" />
<circle
cy="90.168755"
cx="128.74611"
id="circle7196"
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:2.13800001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
r="2.081239" />
<path class="line1"
id="path875"
d="m 19.085467,74.174836 c 22.366283,17.178223 22.335724,17.75844 22.335724,17.75844"
style="fill:none;stroke:#4fae7d;stroke-width:0.28233331px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path class="line2"
style="fill:none;stroke:#4fae7d;stroke-width:0.36648375px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 51.183439,99.59881 c 29.032633,22.29825 28.992966,23.0514 28.992966,23.0514"
id="path885" />
<path class="line3"
id="path879"
d="M 95.534634,121.46865 C 123.9702,95.423153 123.73736,94.872744 123.73736,94.872744"
style="fill:none;stroke:#4fae7d;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path class="line4"
id="path881"
d="m 134.621,93.468564 c 37.14699,33.672096 37.14699,33.672096 37.14699,33.672096"
style="fill:none;stroke:#4fae7d;stroke-width:0.26971px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path class="line5"
id="path883"
d="m 181.40295,129.52127 c 31.40453,-10.83262 31.9066,-11.93052 31.9066,-11.93052"
style="fill:none;stroke:#4fae7d;stroke-width:0.37912115px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</svg>
</div>
</body>
</html>


Firstly, most of the CSS properties you have in your .spin and firstCircle definitions are invalid. position, top, 'left, and margin are all HTML-only properties. And width and height are not valid for <path> elements.
It is important to remember that SVG is a totally different standard from HTML and works differently.
Secondly, your path already has a transform. CSS transforms don't add, so any transform in your animation, will overwrite the one on your <path>.
The simplest way to resolve that problem is to either (a) get your SVG editor to multiply through the transform to the path coordinates; or (b) work around it by using a nested group <g> element around the path. One of the transforms is applied to that, and the other is applied to the path.
<g transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)">
<path class="firstCircle spin"
d="..." />
</g>
transform-origin
Now that those issues are resolved, we can deal with the matter of the centre-of-rotation.
There are issues with browser compatibility with transform-origin. Chrome has an implementation that is out-of-date with respect to the specification. That is in the process of getting fixed, but for now, the workaround is to always use absolute coordinates instead of percentage values.
The centre of your circle is at (-19.5, -91.7), so the correct transform-origin to use is:
transform-origin: -19.5px -91.7px;
So if we plug this into a working example:
.spin {
transform-origin: -19.5px -91.7px;
animation:spin 4s linear infinite;
}
#keyframes spin {
100% { transform:rotate(360deg); }
}
<svg>
<g transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)">
<path class="firstCircle spin"
d="m -28.957516,-109.01346 a 20.505369,19.487934 0 0 1 25.9801488,5.74848 20.505369,19.487934 0 0 1 -1.9792854,25.281519 20.505369,19.487934 0 0 1 -26.5892124,2.031123 20.505369,19.487934 0 0 1 -6.202719,-24.656512"
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35702455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
</g>
</svg>

Related

Svg animation with d: path

I am trying to animate my svg with path property by following this codepen, but my animation path is not smooth and going with some weird steps. Is there something wrong with path values or what am I doing wrong here ?
.p-4 path {
d: path("");
fill: #ff9fba;
animation-name: dash;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
#keyframes dash {
0% {
d: path("");
}
25% {
d: path("M-375.047,1034.989a3.005,3.005,0,0,1-.562-.053A3,3,0,0,1-378,1031.43c3.037-16.029,8.67-25.866,16.742-29.239,9.747-4.073,19.479,2.47,23.143,4.933l.872.572a3.033,3.033,0,0,1,1.216,4.057,2.967,2.967,0,0,1-3.985,1.266c-.29-.15-.788-.47-1.451-.915-2.931-1.97-10.715-7.2-17.482-4.376-6.009,2.511-10.559,11.094-13.161,24.82A3,3,0,0,1-375.047,1034.989Z");
}
50% {
d: path("M-375.047,1034.989a3.005,3.005,0,0,1-.562-.053A3,3,0,0,1-378,1031.43c3.037-16.029,8.67-25.866,16.742-29.239,9.747-4.073,19.479,2.47,23.143,4.933l.872.572c2.935,1.514,5.3,1.92,7.007,1.2,3.235-1.366,4.915-6.892,6.265-11.331l3.13.02,2.61,1.726c-1.714,5.637-3.848,12.653-9.671,15.113-3.426,1.447-7.5.975-12.11-1.4-.29-.15-.788-.469-1.451-.915-2.931-1.97-10.715-7.2-17.482-4.376-6.009,2.511-10.559,11.094-13.161,24.82A3,3,0,0,1-375.047,1034.989Z");
}
75% {
d: path("M-375.047,1034.989a3.005,3.005,0,0,1-.562-.053A3,3,0,0,1-378,1031.43c3.037-16.029,8.67-25.866,16.742-29.239,9.747-4.073,19.479,2.47,23.143,4.933l.872.572c2.935,1.514,5.3,1.92,7.007,1.2,3.235-1.366,4.915-6.892,6.265-11.331l3.273-.478-2.89-.8c2.144-7.713,7.106-11.175,14.747-10.291a3,3,0,0,1,2.635,3.325,3,3,0,0,1-3.325,2.635c-5.923-.685-7.377,2.705-8.276,5.937l-.423,1.42c-1.714,5.637-3.848,12.653-9.671,15.113-3.426,1.447-7.5.975-12.11-1.4-.29-.15-.788-.469-1.451-.915-2.931-1.97-10.715-7.2-17.482-4.376-6.009,2.511-10.559,11.094-13.161,24.82A3,3,0,0,1-375.047,1034.989Z");
}
100% {
d: path("M-375.047,1034.989a3.005,3.005,0,0,1-.562-.053A3,3,0,0,1-378,1031.43c3.037-16.029,8.67-25.866,16.742-29.239,9.747-4.073,19.479,2.47,23.143,4.933l.872.572c2.935,1.514,5.3,1.92,7.007,1.2,3.235-1.366,4.915-6.892,6.265-11.331l3.273-.478-2.89-.8c2.144-7.713,7.106-11.175,14.747-10.291,3.293.381,11.241-.41,13.927-15.954a3,3,0,0,1,3.467-2.445A3,3,0,0,1-289,971.059c-3.658,21.167-16.638,21.342-20.529,20.892-5.923-.685-7.377,2.705-8.276,5.937l-.423,1.42c-1.714,5.637-3.848,12.653-9.671,15.113-3.426,1.447-7.5.975-12.11-1.4-.29-.15-.788-.469-1.451-.915-2.931-1.97-10.715-7.2-17.482-4.376-6.009,2.511-10.559,11.094-13.161,24.82A3,3,0,0,1-375.047,1034.989Z");
}
}
<svg xmlns="http://www.w3.org/2000/svg" width="89.095" height="67.442" viewBox="0 0 89.095 67.442" class="usp_overlap_photo p-4">
<path id="home-usp4-p4" transform="translate(378.051 -967.547)"/>
</svg>

Would it be ok if the shape was turned into a path with a stroke instead of an outline of the shape with a fill?
Here I refactured the shape and animate the stroke-dasharray instead of the d attribute.
.p-4 path {
fill: none;
stroke: #ff9fba;
stroke-width: 5px;
stroke-linecap:round;
animation-name: dash;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
#keyframes dash {
0% {
stroke-dasharray: 0 100;
}
25% {
stroke-dasharray: 25 100;
}
50% {
stroke-dasharray: 50 100;
}
75% {
stroke-dasharray: 75 100;
}
100% {
stroke-dasharray: 100 100;
}
}
<svg xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 100 100" class="usp_overlap_photo p-4">
<path transform="translate(5 5)" id="home-usp4-p4" d="M 0,63 C 0,63 5,23 32,38 43,45 49,42 53,33 57,24 56,19 69,19 82,20 85,0 85,0" pathLength="100" stroke-dashoffset="0"/>
</svg>
Well, then we don't need all the keys in the keyframe:
.p-4 path {
fill: none;
stroke: #ff9fba;
stroke-width: 5px;
stroke-linecap:round;
animation-name: dash;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
#keyframes dash {
0% {
stroke-dasharray: 0 100;
}
100% {
stroke-dasharray: 100 100;
}
}
<svg xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 100 100" class="usp_overlap_photo p-4">
<path transform="translate(5 5)" id="home-usp4-p4" d="M 0,63 C 0,63 5,23 32,38 43,45 49,42 53,33 57,24 56,19 69,19 82,20 85,0 85,0" pathLength="100" stroke-dashoffset="0"/>
</svg>

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.

stroke-dashoffset not working with SVG

i am new to SVG and animation.
just created a path and wanted to draw it with animation, i am using "stroke-dashoffset" but its not working.
Here is my HTML :
<div class="Q">
<svg height="100%" width="100%" viewBox="200 0 400 400">
<path id="latter_q" d="M1003.3425022861358,2828.211816939241a655.718421,655.718421,0,1,1,-397.5557043956452,543.2070169791295" style="fill: none; stroke-width: 300px; stroke-linecap: round;" transform="matrix(-0.220662 -0.00474159 0.00474159 -0.220662 452.115 953.136)" stroke="purple"/>
<circle id="e4_circle" cx="322" cy="293" stroke="purple" style="stroke-width: 1px; vector-effect: non-scaling-stroke;" r="38.1936" fill="purple" />
<polygon stroke="purple" id="e5_polygon" style="stroke-width: 1px;" points="625.5 543.206 885.5 7.20558 1149.5 535.206 1021.5 481.206 889.5 225.206 767.5 481.206" fill="purple" transform="matrix(0.618136 0 0 0.618136 -4.20822 17.3249)"/>
</svg>
</div>
and CSS
#latter_q{
animation: DrwaQ 2s linear alternate infinite;
animation-delay: 1s;
/*stroke-dashArray: 1100;*/
stroke-dashoffset: 1100;
}
.Q{
width: 100%;
height: 100%;
position: absolute;
/*opacity: 0;*/
}
#keyframes DrawQ {
to { stroke-dashOffset: 0; }
}

finally got it worked.
CSS :
#latter_q{
animation: DrwaQ 2s ease-in ;
animation-delay: 0s;
stroke-dasharray: 3435;
}
#keyframes DrwaQ {
to {
stroke-dashoffset: 6904;
}
from {
stroke-dashoffset: 3447;
}
}

stroke-dashoffset is not a CSS property (yet) - you have to do this with JavaScript
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

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>

Resources