SVG Line Animation Reversed in Safari? - css

I've built pretty simple spinning animations for a site, and they look great in Chrome/Firefox, but for some reason, they're animating in reverse in Safari. I've played around with changing values of the offsets, but nothing seems to be working. Is there a workaround for this at all?
.sq {
width: 50vw;
height: auto;
padding: 2.2vw;
}
.path {
stroke-dasharray: 250;
stroke-dashoffset: 250;
animation: line 3s ease forwards;
}
#keyframes line {
from {
stroke-dashoffset: -250;
}
to {
stroke-dashoffset: 0;
}
}
<div class="sq">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.32 81.32">
<defs>
<style>
.cls-1{fill:#202020;opacity:0.1;}
.path{fill:none;stroke:#ef3f44;stroke-miterlimit:10;stroke-width:5px;}
</style>
</defs>
<g id="94" data-name="94">
<g id="Objects">
<circle cx="40.66" cy="40.66" r="27.17" class="cls-1"/>
<path d="M40.66 79.15a38.49 38.49 0 1 1 38.49-38.49 38.53 38.53 0 0 1-38.49 38.49zm0-76.07a37.58 37.58 0 1 0 37.58 37.58A37.63 37.63 0 0 0 40.66 3.08z" class="cls-1"/>
<path d="M26.83 5.1a38.16 38.16 0 1 0 13.83-2.6" class="path"/>
</g>
</g>
</svg>
</div>
Also feel free to check this out on Codepen as well:
https://codepen.io/noahbrennan/pen/RLNWXj

In order not to use negative values of stroke-dashoffset, you can use double the positive value of stroke-dashoffset: 500;
Instead of negative values
#keyframes line {
from {
stroke-dashoffset: -250;
}
to {
stroke-dashoffset: 0;
}
}
Use double positive values:
#keyframes line {
from {
stroke-dashoffset: 250;
}
to {
stroke-dashoffset: 500;
}
}
.sq {
width: 50vw;
height: auto;
padding: 2.2vw;
}
.path {
stroke-dasharray: 250;
stroke-dashoffset: 250;
animation: line 3s ease forwards;
}
#keyframes line {
from {
stroke-dashoffset: 250;
}
to {
stroke-dashoffset: 500;
}
}
<div class="sq">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.32 81.32">
<defs>
<style>
.cls-1{fill:#202020;opacity:0.1;}
.path{fill:none;stroke:#ef3f44;stroke-miterlimit:10;stroke-width:5px;}
</style>
</defs>
<g id="94" data-name="94">
<g id="Objects">
<circle cx="40.66" cy="40.66" r="27.17" class="cls-1"/>
<path d="M40.66 79.15a38.49 38.49 0 1 1 38.49-38.49 38.53 38.53 0 0 1-38.49 38.49zm0-76.07a37.58 37.58 0 1 0 37.58 37.58A37.63 37.63 0 0 0 40.66 3.08z" class="cls-1"/>
<path d="M26.83 5.1a38.16 38.16 0 1 0 13.83-2.6" class="path"/>
</g>
</g>
</svg>
</div>

Safari doesn't support negative dashoffsets. You'll need to work around that by reversing your path and having the dashoffset animate the other way.

Had the same issue for an svg circle. I wanted the animation to progress counter clockwise. Ended up solving it by horizontally flipping the circle and using a positive dash offset.
I used a transform to flip the circle.
scale(-1 1)
See codepen for an example.
https://codepen.io/rikki404/pen/YzydPJq

Related

Animation from orange to teal is not taking effect

I'd like to animate an .svg image with css, changing between two colors. I attempted a tutorial here and css-tricks with no success. I believe my issue (or one of them) might be that I'm not targeting the right element in the .svg. But I've tried many different elements, ids, tags, tried using different images, and even tried making my own image. I'll share the relevant code below using my first choice .svg file:
#keyframes color-change {
from {
fill: #f4f00;
}
to {
fill: #a4f4f4;
}
}
#Layer_1, #adobe_illustrator_pgf {
animation: color-change 4s infinite alternate linear;}
<svg version="1.1"
id="Layer_1"
xmlns:x="&ns_extend;"
xmlns:i="&ns_ai;"
xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px"
viewBox="0 0 750 750"
style="enable-background:new 0 0 750 750;"
xml:space="preserve">
<switch>
<foreignObject
requiredExtensions="&ns_ai;"
x="0"
y="0"
width="1"
height="1">
<i:pgfRef
xlink:href="#adobe_illustrator_pgf">
</i:pgfRef>
</foreignObject>
Thank you!
Update: I created the svg I wanted and was definitely able to target the right id-- I was able to change the color to orange. But the animation from orange to teal is still not taking effect.
svg:
#keyframes color-change {
from {
fill: var(--secondary-color);
}
to {
fill: var(--primary-color-lighter);
}
}
#about__main--img__fleur {
animation: color-change 4s infinite alternate linear;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 750 750" >
<path style="fill:#ff4f00" d="m 158.31488,-2.2022728 c 91.01571,130.5628628 43.85069,121.0522128 12.21,230.0500028 h 8.42 c 82.76816,-249.50584 171.87632,-54.87233 123.86,-12.24 -51.62689,-90.80719 -96.81,12.24 -96.81,12.24 14.30301,2.24628 34.92456,17.33855 -5.51,23.74 -5.67801,35.22547 14.97807,58.61711 40.68,19.78 21.9137,62.34493 -56.60711,108.84523 -64.69,-19.78 h -9.64 c -5.46371,42.41119 45.01408,82.24554 -8.45,115.11 -45.63648,-28.05726 -15.31394,-61.97543 -8.59,-115.11 h -10.45 c -11.44247,151.90592 -92.587302,60.58808 -64.690002,19.78 32.374092,54.98005 40.680002,-19.78 40.680002,-19.78 -34.128832,-6.82614 -22.687672,-19.12856 -5.51,-23.74 -43.888082,-101.86884 -96.816002,-12.24 -96.816002,-12.24 -48.014316,-52.93652 50.97435,-223.7694488 123.866002,12.24 h 9.23 c -11.49629,-82.82875 -92.252982,-101.39727 12.21,-230.0500028" id="about__main--img__fleur" sodipodi:nodetypes="ccccccccccccccccccc" />
</svg>
I removed from svg style =" fill: # ff4f00 " since this style has more weight than styles of the same element in CSS
Assigned an identifier for path - id =" Layer_1 "
The rest is done more or less correctly. Pretty good for your first try.
Color change animation occurs when hovering over a shape
#Layer_1 {
fill:#ff4f00;
}
#Layer_1:hover {
animation: color-change 2s infinite alternate linear;
}
#keyframes color-change {
from {
fill: #ff4f00;
}
to {
fill: #a4f4f4;
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 750 750" >
<path id="Layer_1" d="m 158.31488,-2.2022728 c 91.01571,130.5628628 43.85069,121.0522128 12.21,230.0500028 h 8.42 c 82.76816,-249.50584 171.87632,-54.87233 123.86,-12.24 -51.62689,-90.80719 -96.81,12.24 -96.81,12.24 14.30301,2.24628 34.92456,17.33855 -5.51,23.74 -5.67801,35.22547 14.97807,58.61711 40.68,19.78 21.9137,62.34493 -56.60711,108.84523 -64.69,-19.78 h -9.64 c -5.46371,42.41119 45.01408,82.24554 -8.45,115.11 -45.63648,-28.05726 -15.31394,-61.97543 -8.59,-115.11 h -10.45 c -11.44247,151.90592 -92.587302,60.58808 -64.690002,19.78 32.374092,54.98005 40.680002,-19.78 40.680002,-19.78 -34.128832,-6.82614 -22.687672,-19.12856 -5.51,-23.74 -43.888082,-101.86884 -96.816002,-12.24 -96.816002,-12.24 -48.014316,-52.93652 50.97435,-223.7694488 123.866002,12.24 h 9.23 c -11.49629,-82.82875 -92.252982,-101.39727 12.21,-230.0500028" />
</svg>
UPDATE
I have optimized your SVG code using the SVGOMG utility. The file size has decreased several times.
This is to make the SVG take up less space on the HTML page.
The app is responsive. You can change its initial dimensions using the vw vh relative units in the parent container
.container {
width:50vw;
height:50vh;
}
#Layer_1 {
fill:#ff4f00;
}
#Layer_1:hover {
animation: color-change 2s infinite alternate linear;
}
#keyframes color-change {
from {
fill: #ff4f00;
}
to {
fill: #a4f4f4;
}
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 750 750" >
<path id="Layer_1" d="M158-2c91 130 44 121 13 230h8c83-250 172-55 124-12-52-91-97 12-97 12 14 2 35 17-6 24-5 35 15 58 41 19 22 63-56 109-65-19h-9c-6 42 45 82-9 115-45-28-15-62-8-115h-11c-11 151-92 60-64 19 32 55 40-19 40-19-34-7-22-20-5-24-44-102-97-12-97-12-48-53 51-224 124 12h9c-11-83-92-102 12-230" />
</svg>
</div>

svg path transform origin issue [duplicate]

This question already has answers here:
Why does order of transforms matter? rotate/scale doesn't give the same result as scale/rotate
(2 answers)
Closed 1 year ago.
I am trying to move a path along x axis on :hover, and rotate it. What value of transform-origin should I use?
a {
display: inline-block;
}
svg, path {
transition: all ease .3s;
transform-origin: 50% 50%;
transform-box: fill-box;
}
.circle {
transform: rotate(-45deg) translateX(20px);
opacity: 0;
}
a:hover .circle{
transform: rotate(45deg) translateX(-20px);
opacity: 1;
}
<a href="" class="play">
<svg width="252" height="188" viewBox="0 0 252 188" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M118.765 118.031a2.945 2.945 0 01-2.942-2.942V72.912a2.944 2.944 0 014.827-2.261l25.306 21.089a2.943 2.943 0 010 4.52L120.65 117.35a2.945 2.945 0 01-1.885.682zm2.944-38.837v29.612L139.476 94l-17.767-14.806z" fill="#000"/>
<path class="circle" d="M125.913 144a49.728 49.728 0 01-24.437-6.386 2.942 2.942 0 112.887-5.128c17.169 9.664 38.901 6.676 52.847-7.276 17.21-17.209 17.21-45.21 0-62.419-17.209-17.212-45.212-17.21-62.42 0-17.21 17.21-17.21 45.21 0 62.419a2.944 2.944 0 01-4.162 4.163c-19.503-19.505-19.503-51.24 0-70.744 19.505-19.503 51.238-19.504 70.745 0 19.504 19.505 19.504 51.239 0 70.744-9.608 9.608-22.476 14.627-35.46 14.627z" fill="#FDB500"/></svg>
</a>
Looks like you just need to swap the order of the translateX and rotate parameters. Matrix multiplication is not commutative.
a {
display: inline-block;
}
svg, path {
transition: all ease .3s;
transform-origin: 50% 50%;
transform-box: fill-box;
}
.circle {
transform: translateX(20px) rotate(-45deg);
opacity: 0;
}
a:hover .circle{
transform: translateX(-20px) rotate(45deg);
opacity: 1;
}
<a href="" class="play">
<svg width="252" height="188" viewBox="0 0 252 188" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M118.765 118.031a2.945 2.945 0 01-2.942-2.942V72.912a2.944 2.944 0 014.827-2.261l25.306 21.089a2.943 2.943 0 010 4.52L120.65 117.35a2.945 2.945 0 01-1.885.682zm2.944-38.837v29.612L139.476 94l-17.767-14.806z" fill="#000"/>
<path class="circle" d="M125.913 144a49.728 49.728 0 01-24.437-6.386 2.942 2.942 0 112.887-5.128c17.169 9.664 38.901 6.676 52.847-7.276 17.21-17.209 17.21-45.21 0-62.419-17.209-17.212-45.212-17.21-62.42 0-17.21 17.21-17.21 45.21 0 62.419a2.944 2.944 0 01-4.162 4.163c-19.503-19.505-19.503-51.24 0-70.744 19.505-19.503 51.238-19.504 70.745 0 19.504 19.505 19.504 51.239 0 70.744-9.608 9.608-22.476 14.627-35.46 14.627z" fill="#FDB500"/></svg>
</a>

Wrong keyframes animation

Since yesterday morning I am trying to realize something that could look like this:
.signature-stroke{
stroke-dasharray: 1700;
stroke-dashoffset: 1700;
stroke-width: 6;
animation: writing 2.2s linear forwards;
}
#keyframes writing {
0% {
stroke-dashoffset: 1700;
}
45% {
stroke-width: 5;
}
90% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
stroke-width: 15;
}
}
<svg
xmlns="http://www.w3.org/2000/svg"
width="419px" height="259px"
viewBox="0 0 419 259"
>
<defs>
<clipPath id="clipmask">
<path
d="M397.37,76.381c-8.974-5.228-13.697-15.834-16.289-15.834
c-10.234,0-8.95,3.233-14.357,3.233c-5.408,0-6.776-3.257-10.946-3.257c-8.079,0-14.854,9.382-16.744,9.382
s9.392-19.012,9.392-22.872c0-5.354-4.993-6.743-5.765-6.743c-0.384,0-38.497,36.477-68.792,77.331
c-30.672,41.363-53.528,87.11-53.528,87.11s60.356-146.88,77.346-146.88c-0.097-4.332-3.712-8.515-4.915-8.515
c-1.204,0-12.647,13.511-16.695,13.511c-2.579,0.156-4.17,2.856-7.665,2.856c-12.016,0-36.991,12.886-39.754,12.886
s16.946-22.446,1.538-22.446c-9.923,0-35.131,22.435-35.131,22.435s6.618-17.243,14.679-33.837
c8.451-17.398,16.979-31.299,18.283-33.277c2.018-3.361-1.366-7.071-3.66-7.071c-1.898,0-10.389,13.3-22.744,29.04
c-18.53,23.604-43.023,53.441-45.148,53.441c-3.543,0,3.063-8.038-1.724-8.038s-34.692,24.231-34.692,24.231
s51.531-50.008,34.414-50.008c-14.429,0-32.956,4.339-52.128,11.714c0.025,0.348,0.045,0.705,0.068,1.056l-0.531-0.871
c0.154-0.06,0.309-0.126,0.463-0.185C98.653,13.166,76.952-0.1,44.464-0.1C8.716-0.1,3.823,8.233,3.823,8.233
s-6.237,6.919,1.958,6.919c-7.817,0,11.38-9.144,37.834-9.144c20.818,0,51.589,0.545,52.93,61.067l-1.133,0.489l0,0.001
C48.538,87.229,0.293,123.92,0.293,158.951c0,22.949,14.123,28.245,21.625,28.245c25.835,0,80.986-40.162,80.986-105.7
c0-3.941-0.084-7.699-0.246-11.289c-0.48,0.184-0.958,0.378-1.438,0.567l1.437-0.597c0,0.01,0.001,0.02,0.001,0.03
c14.294-5.477,28.942-8.771,42.988-8.771c7.556,0-38.633,47.908-38.633,47.908s-5.211,9.118,0.261,9.118
c9.379,0,35.432-30.481,41.163-30.481s0.612,5.254,0.612,5.254s-3.428,4.599,1.087,4.599c7.949,0.321,52.805-57.511,52.805-57.511
l-20.604,48.399c0,0-3.929,9.443,1.18,9.443c6.263,0,32.273-29.65,41.089-29.65c3.511,0-4.914,12.56-4.914,12.56
s-4.993,7.957,2.809,7.957c7.801,0,36.275-17.631,52.112-17.631c0.081,0-24.937,33.123-44.005,76.622
c-20.308,46.326-35.227,102.967-35.227,102.967s-2.002,7.388,2.794,7.388c6.233,0.063,8.304-5.986,8.304-7.799
c41.945-95.346,113.029-186.61,128.238-191.517c-3.647,5.992-5.472,21.363-5.472,21.363s-0.261,3.908,3.647,3.908
s10.161-12.245,12.245-12.245s-0.447,2.271,2.271,2.271c4.583-0.254,3.521-7.42,7.421-7.42c3.899,0,6.322,4.832,11.663,4.832
c5.342,0,5.172-2.628,10.259-2.628c9.75,0,2.204,16.193,41.458,16.193C412.93,83.523,408.947,83.124,397.37,76.381z
M21.013,179.856c-8.636,0-14.304-8.246-14.304-18.928c0-24.325,42.091-67.734,89.77-88.21l0.005,0.025l0.094-0.039
C95.809,141.202,41.799,179.856,21.013,179.856z"/>
<path
d="M157.326,16.264c-3.229,0-7.774,4.546-7.774,7.775c0,3.229,2.618,5.847,5.848,5.847
c3.229,0,11.372-3.483,11.372-8.932C166.771,15.476,160.556,16.264,157.326,16.264z"/>
</clipPath>
</defs>
<g
class="stroke"
clip-path="url(#clipmask)"
stroke-linejoin="miter"
stroke-miterlimit="5"
>
<path
class="signature-stroke"
fill="none"
stroke="#B247B3"
d="M1.645,12.002c0,0,16.003-8.467,42.266-8.467
S99.995,9.407,99.995,71.25s-45.844,113.042-78.79,113.042c-14.247,0-17.564-14.147-17.564-26.453
C3.641,133,63,57.333,153.667,57.333C161,57.333,106,111,111.333,111c0,0,33.091-26.667,40.333-26.667s-4.521,9.581,0,9.581
s72-84.247,72-84.247S181.109,92,186.333,92s26.334-29.333,43-29.333c6.549,0-9.334,20-4.334,20c0,0,31.667-13.89,49.667-13.89
c5.712,0,9.647-13.443,16.333-13.443c-22,21.333-103.333,197-90.667,196.333c5.883,0,107.333-201.333,143.333-204.333
c0,0-13.771,31.667-9.333,31.667s9.705-11.667,14-11.667s4.332-2.523,7.666-2.523s4.579,3.966,10.667,3.966
s4.441-3.966,11.333-3.966s13.084,20.525,40.209,20.525"/>
<path
class="signature-dot"
fill="#B247B3"
d="M157.326,16.264c-3.229,0-7.774,4.546-7.774,7.775c0,3.229,2.618,5.847,5.848,5.847 c3.229,0,11.372-3.483,11.372-8.932C166.771,15.476,160.556,16.264,157.326,16.264z">
</path>
</g>
</svg>
So I created a svg code with Illustrator, something simple that would just say "hey".
.hey {
stroke-width: 6;
stroke: black;
stroke-dasharray: 10;
/* here you can see the dashes are wrong. there is no space between them. the dashes are around and not along the path! */
}
.hey2 {
stroke-width: 6;
stroke: black;
stroke-dasharray: 3900;
stroke-dashoffset: 3900;
animation: dash 15s linear forwards;
}
/* you can see the animation is wrong and the animation goes around the path... */
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg class="hey" version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1280 1024" style="enable-background:new 0 0 1280 1024;" xml:space="preserve">
<g>
<g>
<path d="M149.4,259.7c33.9-20.7,65.8-44.7,95.1-71.5c23.7-21.7,54.6-49.6,47.6-85.3c-3-15.2-13.3-27.1-28.4-31.1
c-14.8-3.9-34.2-3.4-43.9,10.2c-4.6,6.5-6.9,14.4-8.7,22c-2.3,9.8-4,19.8-5.1,29.8c-2.4,20.7-2.5,41.7-1.7,62.5
c1.8,47.4,8.3,94.8,4.5,142.3c1-0.1,2-0.3,2.9-0.4c-4.6-21.4-2.3-44.1,6.5-64.2c4.1-9.5,9.7-19.4,17.2-26.6
c9.9-9.4,22.1-6.7,29.8,3.8c6.6,9,7.6,20.7,11.2,31c2.5,7.1,6.5,15.4,14.3,17.8c8.8,2.8,16.9-3.6,23-9.2c7.3-6.7,14-14.1,20-22
c14-18.4,24.1-39.5,29.7-61.8c0.2-0.8-0.2-1.7-1-1.8c-14.4-3.2-25.2,9.2-30.4,21.2c-5,11.7-6,26.2-0.8,38.1
c15.3,35.1,58.4-2.1,72.4-19.3c11.7-14.4,20-31.3,24.2-49.4c-1-0.1-2-0.3-2.9-0.4c-0.8,7.2-0.7,14.5,0.5,21.7
c1,6.2,2.5,14.5,6.2,19.7c2.7,3.7,6.7,2.9,10,0.5c6.1-4.4,11.8-9.9,17.3-15.1c19.4-18.7,36-45.3,27.2-73.1
c-0.5-1.6-2.9-1.3-2.9,0.4c-1.2,93.5-2.4,187.5-17,280.1c-2,12.8-4.3,25.5-6.8,38.1c-2,10.2-4.3,23.7-15.2,28.1
c0.6,0.3,1.2,0.7,1.8,1c-13.3-39.6-11.6-83.3,3.3-122.2c7.5-19.5,18.3-37.8,32-53.5c15.6-17.8,34.9-31.9,54.8-44.5
c18.4-11.6,39.7-22.8,47.8-44.3c0.7-1.8-2.2-2.6-2.9-0.8c-8,21.2-29.9,32-47.9,43.5c-19.8,12.6-39,26.8-54.4,44.6
c-26.5,30.4-41.8,69.8-44.4,109.9c-1.5,23.1,1.5,46.3,8.8,68.2c0.2,0.7,1.1,1.4,1.8,1c7-2.8,11-8.7,13.6-15.6
c3.7-10.1,5.1-21.2,7-31.7c4.3-23.6,7.6-47.4,10.2-71.3c5.4-48.9,7.7-98,9-147.1c0.7-27.8,1.1-55.6,1.5-83.5c-1,0.1-2,0.3-2.9,0.4
c7.5,23.9-4.8,47.6-21,64.7c-3.9,4.1-8.1,8-12.3,11.8c-2.1,1.9-4.3,3.7-6.5,5.6c-0.9,0.7-1.7,1.5-2.6,2.2c-1.4,1.9-3,2.2-4.8,0.8
c-1.7,0.1-2.7-0.6-3-2.1c-3.2-4.6-4.2-12.8-5-18.2c-0.9-6.4-0.9-12.9-0.2-19.3c0.2-1.7-2.6-2-2.9-0.4
c-6.3,27.4-22.4,52.1-45.1,68.7c-11.1,8.1-28.8,18.9-40.9,7c-8.4-8.3-9.2-22.6-7.1-33.6c2.6-13.4,13.4-32.6,29.8-29
c-0.3-0.6-0.7-1.2-1-1.8c-5.3,21.1-14.6,40.9-27.5,58.5c-6.4,8.7-13.6,16.8-21.5,24.1c-4.9,4.5-11.5,10.2-18.7,8.8
c-5.8-1.2-9.5-6.5-11.8-11.5c-7.3-15.8-7-42.3-28.2-47.3c-18.5-4.4-31.2,20.2-37.2,33.8c-9.2,20.9-11.5,44.2-6.8,66.5
c0.4,1.7,2.8,1.2,2.9-0.4c6.1-76.6-15.3-154.2,1.3-230.2c1.7-7.9,3.6-16.2,8-23.1c5.4-8.6,13.9-11.9,23.8-12.3
c17.9-0.7,35.5,5.6,42.2,23.4c13,34.5-17.4,64.1-40.2,85.4c-30.4,28.4-63.6,53.6-99.1,75.3C146.2,258.1,147.7,260.7,149.4,259.7
L149.4,259.7z"/>
</g>
</g>
</svg>
<svg class="hey2" version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1280 1024" style="enable-background:new 0 0 1280 1024;" xml:space="preserve">
<g>
<g>
<path d="M149.4,259.7c33.9-20.7,65.8-44.7,95.1-71.5c23.7-21.7,54.6-49.6,47.6-85.3c-3-15.2-13.3-27.1-28.4-31.1
c-14.8-3.9-34.2-3.4-43.9,10.2c-4.6,6.5-6.9,14.4-8.7,22c-2.3,9.8-4,19.8-5.1,29.8c-2.4,20.7-2.5,41.7-1.7,62.5
c1.8,47.4,8.3,94.8,4.5,142.3c1-0.1,2-0.3,2.9-0.4c-4.6-21.4-2.3-44.1,6.5-64.2c4.1-9.5,9.7-19.4,17.2-26.6
c9.9-9.4,22.1-6.7,29.8,3.8c6.6,9,7.6,20.7,11.2,31c2.5,7.1,6.5,15.4,14.3,17.8c8.8,2.8,16.9-3.6,23-9.2c7.3-6.7,14-14.1,20-22
c14-18.4,24.1-39.5,29.7-61.8c0.2-0.8-0.2-1.7-1-1.8c-14.4-3.2-25.2,9.2-30.4,21.2c-5,11.7-6,26.2-0.8,38.1
c15.3,35.1,58.4-2.1,72.4-19.3c11.7-14.4,20-31.3,24.2-49.4c-1-0.1-2-0.3-2.9-0.4c-0.8,7.2-0.7,14.5,0.5,21.7
c1,6.2,2.5,14.5,6.2,19.7c2.7,3.7,6.7,2.9,10,0.5c6.1-4.4,11.8-9.9,17.3-15.1c19.4-18.7,36-45.3,27.2-73.1
c-0.5-1.6-2.9-1.3-2.9,0.4c-1.2,93.5-2.4,187.5-17,280.1c-2,12.8-4.3,25.5-6.8,38.1c-2,10.2-4.3,23.7-15.2,28.1
c0.6,0.3,1.2,0.7,1.8,1c-13.3-39.6-11.6-83.3,3.3-122.2c7.5-19.5,18.3-37.8,32-53.5c15.6-17.8,34.9-31.9,54.8-44.5
c18.4-11.6,39.7-22.8,47.8-44.3c0.7-1.8-2.2-2.6-2.9-0.8c-8,21.2-29.9,32-47.9,43.5c-19.8,12.6-39,26.8-54.4,44.6
c-26.5,30.4-41.8,69.8-44.4,109.9c-1.5,23.1,1.5,46.3,8.8,68.2c0.2,0.7,1.1,1.4,1.8,1c7-2.8,11-8.7,13.6-15.6
c3.7-10.1,5.1-21.2,7-31.7c4.3-23.6,7.6-47.4,10.2-71.3c5.4-48.9,7.7-98,9-147.1c0.7-27.8,1.1-55.6,1.5-83.5c-1,0.1-2,0.3-2.9,0.4
c7.5,23.9-4.8,47.6-21,64.7c-3.9,4.1-8.1,8-12.3,11.8c-2.1,1.9-4.3,3.7-6.5,5.6c-0.9,0.7-1.7,1.5-2.6,2.2c-1.4,1.9-3,2.2-4.8,0.8
c-1.7,0.1-2.7-0.6-3-2.1c-3.2-4.6-4.2-12.8-5-18.2c-0.9-6.4-0.9-12.9-0.2-19.3c0.2-1.7-2.6-2-2.9-0.4
c-6.3,27.4-22.4,52.1-45.1,68.7c-11.1,8.1-28.8,18.9-40.9,7c-8.4-8.3-9.2-22.6-7.1-33.6c2.6-13.4,13.4-32.6,29.8-29
c-0.3-0.6-0.7-1.2-1-1.8c-5.3,21.1-14.6,40.9-27.5,58.5c-6.4,8.7-13.6,16.8-21.5,24.1c-4.9,4.5-11.5,10.2-18.7,8.8
c-5.8-1.2-9.5-6.5-11.8-11.5c-7.3-15.8-7-42.3-28.2-47.3c-18.5-4.4-31.2,20.2-37.2,33.8c-9.2,20.9-11.5,44.2-6.8,66.5
c0.4,1.7,2.8,1.2,2.9-0.4c6.1-76.6-15.3-154.2,1.3-230.2c1.7-7.9,3.6-16.2,8-23.1c5.4-8.6,13.9-11.9,23.8-12.3
c17.9-0.7,35.5,5.6,42.2,23.4c13,34.5-17.4,64.1-40.2,85.4c-30.4,28.4-63.6,53.6-99.1,75.3C146.2,258.1,147.7,260.7,149.4,259.7
L149.4,259.7z"/>
</g>
</g>
</svg>
From what I understood thanks to this tutorial https://css-tricks.com/svg-line-animation-works/, I had to add a stroke to my svg, which would be dashed.
This step is a mess for me, because every time, the svg is not dashed correctly. As you can see, there is a line that is still visible. The dashes are around and not along the path. As a consequence, when I activate the Keyframe, the animation is a line going AROUND the svg, which is making a weird thing - definitely not what I am looking for.
It is my first post here, and I just started to learn to code, so please excuse me if anything is not appropriate.
Thank you very much!
This is what I've done:
I've edited your path by removing half of it. Now it's only a line, before it was a closed path.
I've recalculated the value for stroke-dasharray and stroke-dashoffset. For this I've used hey.getTotalLength()
I hope this is what you need.
.hey {
stroke-width: 6;
stroke: black;
}
#hey {
stroke-width: 6;
stroke: black;
stroke-dasharray: 1896.892333984375;
stroke-dashoffset: 1896.892333984375;
animation: dash 15s linear forwards;
}
/* you can see the animation is wrong and the animation goes around the path... */
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg class="hey" version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1280 1024" style="enable-background:new 0 0 1280 1024;" xml:space="preserve">
<g>
<g>
<path id="hey"
fill="none"d="M149.4,259.7c33.9-20.7,65.8-44.7,95.1-71.5c23.7-21.7,54.6-49.6,47.6-85.3c-3-15.2-13.3-27.1-28.4-31.1
c-14.8-3.9-34.2-3.4-43.9,10.2c-4.6,6.5-6.9,14.4-8.7,22c-2.3,9.8-4,19.8-5.1,29.8c-2.4,20.7-2.5,41.7-1.7,62.5
c1.8,47.4,8.3,94.8,4.5,142.3c1-0.1,2-0.3,2.9-0.4c-4.6-21.4-2.3-44.1,6.5-64.2c4.1-9.5,9.7-19.4,17.2-26.6
c9.9-9.4,22.1-6.7,29.8,3.8c6.6,9,7.6,20.7,11.2,31c2.5,7.1,6.5,15.4,14.3,17.8c8.8,2.8,16.9-3.6,23-9.2c7.3-6.7,14-14.1,20-22
c14-18.4,24.1-39.5,29.7-61.8c0.2-0.8-0.2-1.7-1-1.8c-14.4-3.2-25.2,9.2-30.4,21.2c-5,11.7-6,26.2-0.8,38.1
c15.3,35.1,58.4-2.1,72.4-19.3c11.7-14.4,20-31.3,24.2-49.4c-1-0.1-2-0.3-2.9-0.4c-0.8,7.2-0.7,14.5,0.5,21.7
c1,6.2,2.5,14.5,6.2,19.7c2.7,3.7,6.7,2.9,10,0.5c6.1-4.4,11.8-9.9,17.3-15.1c19.4-18.7,36-45.3,27.2-73.1
c-0.5-1.6-2.9-1.3-2.9,0.4c-1.2,93.5-2.4,187.5-17,280.1c-2,12.8-4.3,25.5-6.8,38.1c-2,10.2-4.3,23.7-15.2,28.1
c0.6,0.3,1.2,0.7,1.8,1c-13.3-39.6-11.6-83.3,3.3-122.2c7.5-19.5,18.3-37.8,32-53.5c15.6-17.8,34.9-31.9,54.8-44.5
"/>
</g>
</g>
</svg>

SVG CSS3 animation is not showing on Safari

The following SVG code working in Chrome, but it does not work in Safari. I can't figure out what is the problem. Can you help me out?
I have already add -wekbit-animation and -webkit-frames. Supposedly, Safari should recognise these 2 tags.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="none"
x="0px" y="0px"
width="2048px" height="1536px"
viewBox="0 0 2048 1536" xml:space="preserve">
<defs>
<path id="Layer_green_2_0_1_STROKES" stroke="#2C9842"
stroke-width="3.5" stroke-linejoin="round"
stroke-linecap="round" fill="#FFFFFF"
d="M 397.55 799.35 L 618.95 775.525 826.45 768.95
1027.1 693.3 1254.55 684.2" class="path"></path>
</defs>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#Layer_green_2_0_1_STROKES"></use>
</g>
<style>
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear alternate infinite;
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
</style>
</svg>
remove <defs> tag, it will show in safari

How to animate handwriting text on the web page using SVG?

I am trying to animate a text that I created and saved as SVG. So far, I've only been able to animate the stroke, but that's not what I am trying to achieve. How can I implement animation like the two examples, below?
http://codepen.io/se7ensky/pen/waoMyx
https://codepen.io/munkholm/pen/EaZJQE
Here is what I have so far:
.test {
width: 300px
/* margin:0 auto; */
}
.l1 {
animation: dash 15s 1;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation-fill-mode: forwards;
/*fill: none;*/
}
.l2 {
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: dash 20s linear forwards;
-webkit-animation-delay: 1s;
/* Chrome, Safari, Opera */
animation-delay: 1s;
}
.l3 {
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: dash 25s linear forwards;
-webkit-animation-delay: 2.5s;
/* Chrome, Safari, Opera */
animation-delay: 2.5s;
}
.l4 {
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: dash 25s linear forwards;
-webkit-animation-delay: 4.5s;
/* Chrome, Safari, Opera */
animation-delay: 4.5s;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg class="test" 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 30.1 21.8" style="enable-background:new 0 0 30.1 21.8;" xml:space="preserve">
<g>
<path class="text l1" d="M16.5,9.2c-0.2-0.2-0.2-1,0.1-1.5c0.1-0.1,0.2-0.3,0.3-0.4c-1.6,0-3.2-0.3-4.7-0.1C10.8,7.3,9.5,8,9.3,8.9
c-0.1,0.6,0.5,0.8,0.7,1c0.1,0.1,0,0.2-0.1,0.1C9.5,10,8.7,9.4,9,8.7c0,0,0-0.1,0-0.2c0.3-1.2,1.7-1.8,3.3-1.9
c1.8-0.1,3.9,0.4,4.8,0.4c0.2-0.2,0.4-0.4,0.5-0.4c0.3-0.1,0.6,0.1,0.3,0.4c-0.1,0.1-0.4,0.3-0.6,0.5c-0.4,0.4-0.8,1-0.5,1.5
C16.8,9.2,16.7,9.3,16.5,9.2z M12.1,12.8c0.1,0.1-0.1,0.3-0.1,0.3c-0.2,0.3-0.5,0.8-0.8,0.8c-0.1,0-0.5-0.1-0.5-0.1
c-0.1-0.8,1.5-3.5,1.9-4.2c0.2-0.3,0.1-0.4,0.1-0.5c0.1-0.4,0.9-1.4,1.5-1.4c0.2,0,0.8,0.2,0.7,0.5c0,0-0.1-0.1-0.2-0.1
c-1.1,0-2.9,3.6-3.4,4.7c-0.3,0.7,0.1,0.6,0.4,0.3C11.8,13,12,12.8,12.1,12.8z" fill="red" stroke="#000" stroke-miterlimit="10" stroke-width="0.5" />
<path class="text l2" d="M14.4,12.3c-0.2,0-0.3-0.2-0.1-0.2c0.4,0,1.1-0.4,1.5-0.8c0.2-0.2,0.6-0.5,0.5-0.8c0-0.3-0.4-0.2-0.6-0.1
c-0.7,0.3-1.7,1.3-2,2.2c-0.3,1,0.6,1,1.4,0.7c0.9-0.4,1.7-1,2.1-1.7c0-0.1,0.1-0.1,0.1,0c0.1,0,0.1,0.1,0,0.1
c-0.5,0.8-1.2,1.5-2.1,1.8c-1.2,0.5-2.8,0-2.1-1.5c0.4-0.8,2.2-2.4,3.1-2.1c0.5,0.2,0.4,0.8,0.2,1.1C16.1,11.8,15,12.2,14.4,12.3z" fill="none" stroke="#000" stroke-miterlimit="5" stroke-width="0.5"
/>
<path class="text l3" d="M17.3,13.6c-0.2,0.2-0.1,0.5,0.4,0.4c0.6-0.2,1.5-0.9,1.5-1.6c0-0.3-0.7-0.6-0.9-0.7c-0.2-0.1-0.3-0.3-0.4-0.4
c-0.1,0.2-0.3,0.5-0.5,0.8c-0.1,0.1-0.3,0-0.2-0.1c0.3-0.5,0.6-0.9,0.6-1.1c0.1-0.9,1.7-1.7,2.6-1.7c0.5,0,1,0.3,0.7,0.8
c-0.1,0.2-0.2,0.3-0.4,0.4c-0.1,0-0.2,0-0.1-0.2c0.2-0.2,0.3-0.6,0-0.6c-0.4,0-1,0.2-1.3,0.4c-0.4,0.2-0.7,0.4-1,0.9
c-0.3,0.3-0.2,0.6,0.1,0.8c0.8,0.5,1.8,0.8,0.9,1.8c-0.4,0.5-1.1,0.7-1.7,0.9c-0.2,0-0.7,0.1-0.9-0.1c-0.1-0.1,0-0.3,0.2-0.5
c0.1-0.1,0.3-0.3,0.6-0.3c0.1,0,0.1,0.1,0,0.1C17.5,13.4,17.3,13.5,17.3,13.6z" fill="none" stroke="#000" stroke-miterlimit="5" stroke-width="0.5"/>
<path class="text l4" d="M23.6,10.2c-0.2,0.1-0.8,0.1-1.4,0.2c-0.2,0.3-0.3,0.5-0.3,0.6c-0.4,0.7-0.7,1.4-0.7,1.7c-0.1,0.5,0.2,0.8,0.6,0.6
c0.4-0.2,1.3-1,1.8-1.7c0.1-0.1,0.2,0,0.1,0.1c-0.2,0.4-1,1.2-1.6,1.6c-0.4,0.3-1.3,0.6-1.5-0.1c-0.1-0.3,0.1-0.9,0.4-1.5
c-0.1,0.1-0.2,0.3-0.5,0.6c-0.1,0.1-0.2,0-0.1-0.2c0.4-0.5,0.7-1,0.9-1.2c0,0,0.1-0.2,0.3-0.5c-0.1,0-0.2,0-0.3,0
c-0.1,0-0.2-0.1-0.2-0.3c0.1-0.2,0.4-0.2,0.6-0.2c0,0,0,0,0,0l0.6-1.1c0.3-0.5,0.3-0.6,0.5-0.7c0.2,0,0.4,0,0.5,0.1
c0.1,0.1,0,0.4-0.1,0.5C23.2,9,23.1,9,23,9.1l-0.6,1l0.2,0c0.4,0,0.7-0.1,1.1-0.1C23.9,10,24.1,10.1,23.6,10.2z" fill="none" stroke="#000" stroke-miterlimit="5" stroke-width="0.5"/>
</g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
</svg>
View on CodePen
How the Se7ensky animation works is that it uses the standard dash animation technique, but clips the animated stroke with an outline representing the hand-drawn look of the logo.
So the standard dash animation technique works as follows. You take a standard line:
<svg>
<path d="M 10,75 L 290,75" stroke="red" stroke-width="50"/>
</svg>
Then you add a dash pattern to it and animate it's position (stroke-dashoffset).
.pen {
stroke-dasharray: 280 280;
stroke-dashoffset: 280;
animation-duration: 2s;
animation-name: draw;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
#keyframes draw {
from {
stroke-dashoffset: 280;
}
to {
stroke-dashoffset: 0;
}
}
<svg>
<path class="pen" d="M 10,75 L 290,75" stroke="red" stroke-width="50"/>
</svg>
Finally to get the fancy variable stroke width of the Se7ensky example, you clip that line with the outline of your logo.
So let's pretend this simple path below represents your logo:
<svg>
<path stroke="black" stroke-width="1" fill="lightgrey"
d="M 40,50
C 110,55 195,60, 265,55
C 290,55 290,85 265,85
C 195,85 110,85 40,100
C 0,100 0,50 40,50 Z"/>
</svg>
We turn that into a clipPath element and use it to trim our animated stroke to the shape of our logo:
.pen {
stroke-dasharray: 280 280;
stroke-dashoffset: 280;
animation-duration: 2s;
animation-name: draw;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
#keyframes draw {
from {
stroke-dashoffset: 280;
}
to {
stroke-dashoffset: 0;
}
}
<svg>
<clipPath id="logo">
<path d="M 40,50
C 110,55 195,60, 265,55
C 290,55 290,85 265,85
C 195,85 110,85 40,100
C 0,100 0,50 40,50 Z"/>
</clipPath>
<path class="pen" d="M 10,75 L 290,75" stroke="red" stroke-width="50" clip-path="url(#logo)"/>
</svg>
So to replicate their example, you'll need to add a continuous path (or paths if you want) to your SVG that represents the path that a pen would take if it were writing the letters in your logo.
Then animate that path using the dashoffset technique while clipping it with your original logo.
Update
Here's a final demo with a more realistic letter shape:
// Simple code to enable and disable the clipping path
var chk = document.getElementById("chk");
var penpath = document.getElementById("penpath");
chk.addEventListener("input", function(evt) {
if (evt.target.checked) {
penpath.classList.add("clipped");
} else {
penpath.classList.remove("clipped");
}
});
.pen {
fill: none;
stroke: red;
stroke-width: 18;
stroke-linecap: round;
stroke-dasharray: 206 206;
stroke-dashoffset: 206;
animation-duration: 2s;
animation-name: draw;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
.clipped {
clip-path: url(#logo);
}
#keyframes draw {
from {
stroke-dashoffset: 206;
}
to {
stroke-dashoffset: 0;
}
}
<svg>
<defs>
<clipPath id="logo">
<path d="m85.77 49.77c-10.59 8.017-27.38 21.95-41.58 21.95-6.396 0-12.99-2.481-12.39-9.735l0.3998-4.199c38.38-12.03 48.17-26.15 48.17-35.5 0-7.635-7.995-9.162-14.39-9.162-25.98-0.1909-54.97 25.39-54.17 50.39 0.3998 12.6 7.196 25.01 21.79 25.01 19.79 0 41.78-17.94 53.97-31.5zm-52.37-1.336c5.397-12.6 16.99-21.76 26.98-24.24 1.399-0.3818 2.399 0.7635 2.399 2.1 0.1999 3.245-11.79 16.42-29.38 22.14z"/>
</clipPath>
</defs>
<path id="penpath" d="m39.02 51.1c5.361-1.771 10.04-4.182 15.98-7.857 6.019-3.933 9.841-7.728 12.77-10.71 1.403-1.369 12.03-15.97-7.857-13.93-9.824 1.01-19.62 8.3-26.16 14.91-6.538 6.61-10.42 14.51-11.96 22.23-2.559 12.76 1.807 26.19 21.07 23.48 13.96-1.965 32.59-14.55 43.66-25.54" class="pen clipped"/>
</svg>
<p>
<input id="chk" type="checkbox" checked="true"/> <label for="chk">Enable clipping path</label>
</p>
The example looks like a combination of svg paths and delayed animations.
This blog post by CSS-Tricks explains it pretty well (Note that the svg must have strokes for this to work):
https://css-tricks.com/svg-line-animation-works/
Here's a guide on stroke-dashoffset (used on the example) that might be useful:
https://css-tricks.com/almanac/properties/s/stroke-dashoffset/

Resources