SVG line animation not working - css

I am trying to create an effect where smoke comes out of a vessel
Like this example where smoke comes out of a coffee cup but I am not able to do it.
Here's a jsfiddle showing my attempt:
SVG code is:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="150px" height="127px" viewBox="0 0 150 127" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Mobile-Portrait" transform="translate(-98.000000, -419.000000)" fill="#FFFFFF">
<g id="food_loading" transform="translate(98.000000, 419.000000)">
<path d="M139.06,95.2449167 C134.53,70.4159167 113.7925,50.6875833 87.3925,45.9089167 C87.435,45.5355833 87.5,45.1599167 87.5,44.7889167 C87.5,38.3559167 81.8925,33.12225 75,33.12225 C68.1075,33.12225 62.5,38.3559167 62.5,44.7889167 C62.5,45.1599167 62.5625,45.5355833 62.6075,45.9089167 C36.2075,50.6875833 15.47,70.4159167 10.94,95.2449167 C5.715,98.00525 0,102.067583 0,106.624583 C0,118.489583 38.78,126.457917 75,126.457917 C111.22,126.457917 150,118.489583 150,106.624583 C150,102.067583 144.285,98.00525 139.06,95.2449167 L139.06,95.2449167 L139.06,95.2449167 L139.06,95.2449167 L139.06,95.2449167 L139.06,95.2449167 Z M67.515,45.1925833 C67.505,45.05725 67.5,44.9219167 67.5,44.79125 C67.5,40.9319167 70.865,37.79125 75,37.79125 C79.135,37.79125 82.5,40.9319167 82.5,44.79125 C82.5,44.92425 82.495,45.05725 82.485,45.1925833 C82.3675,45.1809167 82.25,45.17625 82.135,45.1645833 C81.275,45.0759167 80.41,45.0129167 79.54,44.9569167 C79.22,44.9359167 78.9025,44.9055833 78.5825,44.88925 C77.3975,44.8285833 76.205,44.7935833 75.0025,44.7935833 C73.8,44.7935833 72.6075,44.8285833 71.4225,44.88925 C71.1025,44.9055833 70.785,44.9359167 70.465,44.9569167 C69.595,45.0129167 68.73,45.07825 67.87,45.1645833 C67.75,45.17625 67.6325,45.1785833 67.515,45.1925833 L67.515,45.1925833 L67.515,45.1925833 L67.515,45.1925833 L67.515,45.1925833 L67.515,45.1925833 Z M63.3625,59.9859167 C63.545,59.9859167 63.73,59.96725 63.915,59.9299167 C67.51,59.1739167 71.2275,58.79125 74.9675,58.79125 L75,58.79125 C76.38,58.79125 77.5,57.74825 77.5,56.46025 C77.5,55.1699167 76.3825,54.1245833 75,54.1245833 L74.965,54.1245833 C70.8575,54.1245833 66.77,54.5469167 62.815,55.3775833 C61.4675,55.6599167 60.6225,56.90825 60.925,58.1659167 C61.19,59.2509167 62.22,59.9859167 63.3625,59.9859167 L63.3625,59.9859167 L63.3625,59.9859167 L63.3625,59.9859167 L63.3625,59.9859167 L63.3625,59.9859167 Z M24.5525,98.41825 C24.705,98.44625 24.855,98.4579167 25.0025,98.4579167 C26.1875,98.4579167 27.24,97.66925 27.46,96.5445833 C30.0575,83.24925 38.6425,71.41925 50.425,64.9045833 C51.6125,64.2489167 52.005,62.81625 51.3025,61.7079167 C50.5975,60.5995833 49.065,60.23325 47.8775,60.8889167 C34.8675,68.0825833 25.3975,81.0979167 22.5425,95.7045833 C22.2925,96.9739167 23.1925,98.18725 24.5525,98.41825 L24.5525,98.41825 L24.5525,98.41825 L24.5525,98.41825 L24.5525,98.41825 L24.5525,98.41825 Z M65.9975,50.0879167 C67.34,49.90125 68.69,49.7659167 70.045,49.66325 C70.3225,49.64225 70.6,49.6235833 70.8775,49.6049167 C73.6225,49.43225 76.38,49.43225 79.125,49.6049167 C79.4025,49.6235833 79.68,49.64225 79.9575,49.66325 C81.3125,49.7659167 82.6625,49.90125 84.005,50.0879167 C110.05,53.7629167 130.6475,73.1225833 134.385,97.4919167 C134.5,98.2409167 134.5925,98.99225 134.675,99.7435833 C134.7025,100.002583 134.74,100.25925 134.765,100.51825 C134.8625,101.551917 134.935,102.585583 134.97,103.61925 C95.695,112.114917 54.31,112.114917 15.035,103.61925 C15.0725,102.585583 15.1425,101.551917 15.24,100.51825 C15.265,100.25925 15.3,100.002583 15.33,99.7435833 C15.4125,98.9899167 15.505,98.2385833 15.62,97.4919167 C19.355,73.1225833 39.9525,53.7605833 65.9975,50.0879167 L65.9975,50.0879167 L65.9975,50.0879167 L65.9975,50.0879167 L65.9975,50.0879167 L65.9975,50.0879167 Z M75,121.79125 C32.26,121.79125 5,111.83025 5,106.624583 C5,105.730917 6.185,103.761583 10.16,101.192583 C10.15,101.325583 10.155,101.45625 10.145,101.58925 C10.06,102.867917 10,104.155917 10,105.457917 L10,107.296583 L11.9175,107.72825 C32.5525,112.34825 53.7775,114.662917 75,114.662917 C96.2225,114.662917 117.4475,112.350583 138.0825,107.72825 L140,107.296583 L140,105.457917 C140,104.155917 139.94,102.87025 139.855,101.58925 C139.845,101.45625 139.85,101.325583 139.84,101.192583 C143.815,103.761583 145,105.730917 145,106.624583 C145,111.83025 117.74,121.79125 75,121.79125 L75,121.79125 L75,121.79125 L75,121.79125 L75,121.79125 L75,121.79125 Z"
id="food"></path>
<path d="M73.375,27.77425 C73.8625,28.22925 74.5025,28.4579167 75.1425,28.4579167 C75.7825,28.4579167 76.4225,28.22925 76.91,27.77425 C77.8875,26.8619167 77.8875,25.38725 76.91,24.4749167 C74.3725,22.10425 74.3725,18.2495833 76.91,15.8789167 C79.085,13.8489167 80.285,11.1515833 80.285,8.28158333 C80.285,5.41158333 79.0875,2.71425 76.91,0.68425 C75.9325,-0.228083333 74.3525,-0.228083333 73.375,0.68425 C72.3975,1.59658333 72.3975,3.07125 73.375,3.98358333 C74.605,5.13158333 75.285,6.65758333 75.285,8.28158333 C75.285,9.90558333 74.6075,11.4315833 73.375,12.5795833 C68.8875,16.7679167 68.8875,23.5859167 73.375,27.77425 L73.375,27.77425 L73.375,27.77425 L73.375,27.77425 L73.375,27.77425 L73.375,27.77425 Z"
id="food-path" class="food-path" fill="#FFFFFF" stroke="#000000" stroke-width="4"></path>
<path d="M100.875,41.77425 C101.3625,42.22925 102.0025,42.4579167 102.6425,42.4579167 C103.2825,42.4579167 103.9225,42.22925 104.41,41.77425 C105.3875,40.8619167 105.3875,39.38725 104.41,38.4749167 C101.8725,36.10425 101.8725,32.2495833 104.41,29.8789167 C106.585,27.8489167 107.785,25.1515833 107.785,22.2815833 C107.785,19.4115833 106.5875,16.71425 104.41,14.68425 C103.4325,13.7719167 101.8525,13.7719167 100.875,14.68425 C99.8975,15.5965833 99.8975,17.07125 100.875,17.9835833 C102.105,19.1315833 102.785,20.6575833 102.785,22.2815833 C102.785,23.9055833 102.1075,25.4315833 100.875,26.5795833 C96.3875,30.7679167 96.3875,37.5859167 100.875,41.77425 L100.875,41.77425 L100.875,41.77425 L100.875,41.77425 L100.875,41.77425 L100.875,41.77425 Z"
id="food-path" class="food-path" fill="#FFFFFF" stroke="#000000" stroke-width="4"></path>
<path d="M45.875,41.77425 C46.3625,42.22925 47.0025,42.4579167 47.6425,42.4579167 C48.2825,42.4579167 48.9225,42.22925 49.41,41.77425 C50.3875,40.8619167 50.3875,39.38725 49.41,38.4749167 C46.8725,36.10425 46.8725,32.2495833 49.41,29.8789167 C51.585,27.8489167 52.785,25.1515833 52.785,22.2815833 C52.785,19.4115833 51.5875,16.71425 49.41,14.68425 C48.4325,13.7719167 46.8525,13.7719167 45.875,14.68425 C44.8975,15.5965833 44.8975,17.07125 45.875,17.9835833 C47.105,19.1315833 47.785,20.6575833 47.785,22.2815833 C47.785,23.9055833 47.1075,25.4315833 45.875,26.5795833 C41.3875,30.7679167 41.3875,37.5859167 45.875,41.77425 L45.875,41.77425 L45.875,41.77425 L45.875,41.77425 L45.875,41.77425 L45.875,41.77425 Z"
id="food-path" class="food-path" fill="#FFFFFF" stroke="#000000" stroke-width="4"></path>
</g>
</g>
</g>
</svg>
Css is:
.food-path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 1.5s linear alternate infinite;
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}

For the dash offset line drawing trick to work, you need to have a "line" consisting of just a stroke. Your steam lines are actually closed shapes, where the path runs around the outside of the line. So instead of getting the steam effect you want, you are going to get an animated line that runs around the outside of the steam line.
What you have now is this:
.food-path {
stroke-dasharray: 69;
stroke-dashoffset: 69;
animation: dash 1.5s linear alternate infinite;
}
#keyframes dash {
from {
stroke-dashoffset: 69;
}
to {
stroke-dashoffset: 0;
}
}
<svg width="400px" height="400px" viewBox="20 0 60 60">
<path d="M45.875,41.77425 C46.3625,42.22925 47.0025,42.4579167 47.6425,42.4579167 C48.2825,42.4579167 48.9225,42.22925 49.41,41.77425 C50.3875,40.8619167 50.3875,39.38725 49.41,38.4749167 C46.8725,36.10425 46.8725,32.2495833 49.41,29.8789167 C51.585,27.8489167 52.785,25.1515833 52.785,22.2815833 C52.785,19.4115833 51.5875,16.71425 49.41,14.68425 C48.4325,13.7719167 46.8525,13.7719167 45.875,14.68425 C44.8975,15.5965833 44.8975,17.07125 45.875,17.9835833 C47.105,19.1315833 47.785,20.6575833 47.785,22.2815833 C47.785,23.9055833 47.1075,25.4315833 45.875,26.5795833 C41.3875,30.7679167 41.3875,37.5859167 45.875,41.77425 L45.875,41.77425 L45.875,41.77425 L45.875,41.77425 L45.875,41.77425 L45.875,41.77425 Z" id="food-path" class="food-path" fill="#FFFFFF" stroke="#000000" stroke-width="1"></path>
</svg>
First you will need to load your SVG into an editor and redraw those steam lines as a single thick squiggly line.
What you want in your drawing is more like this:
.food-path {
stroke-dasharray: 31;
stroke-dashoffset: 31;
animation: dash 1s linear alternate infinite;
}
#keyframes dash {
from {
stroke-dashoffset: 31;
}
to {
stroke-dashoffset: 0;
}
}
<svg width="400px" height="400px" viewBox="20 0 60 60">
<path d="M 49.41,41.77425 C50.3875,40.8619167 50.3875,39.38725 49.41,38.4749167 C46.8725,36.10425 46.8725,32.2495833 49.41,29.8789167 C51.585,27.8489167 52.785,25.1515833 52.785,22.2815833 C52.785,19.4115833 51.5875,16.71425 49.41,14.68425" id="food-path" class="food-path" fill="#FFFFFF" stroke="#000000" stroke-width="1"></path>
</svg>
Secondly, to get the drawing effect to work, you need to use values for the dash array and dash offset that correspond to the length of your line. The "1000" you are using is way too long for the lines you are using. See the values I am using in my examples.

The case is to properly adjust values for stroke-dasharray and stroke-dashoffset. You could do that with JS - it's quite easy way to read the actual lengths. stroke-dasharray lets you specify the length of the rendered part of the line, then the length of the gap. stroke-dashoffset lets you change where the dasharray starts.
With some experiment you can also get nice effect without JS. Here is your corrected version:
http://codepen.io/MakiBM/pen/NRaRWO
body {
background-color: lightgray;
}
svg {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.food-path {
stroke-dasharray: 100;
stroke-dashoffset: 0;
animation: dash 3000ms linear infinite;
}
#keyframes dash {
from {
stroke-dashoffset: 200;
}
to {
stroke-dashoffset: 0;
}
}
For a more reusable solution see the link:
https://jakearchibald.com/2013/animated-line-drawing-svg/

Related

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>

Display arrow head for an animated line

I am animating a line from Point 1 to Point 2 with https://jsfiddle.net/arungeorgez/r9x6vhcb/4/. How do I add an arrowhead to the same line?
<style>
.key-anim1 {
-webkit-animation: Drawpath 1s linear forwards;
animation: Drawpath 1s linear forwards;
stroke-dasharray: 0, 600;
}
#-webkit-keyframes Drawpath {
from {
stroke-dasharray: 0, 600;
}
to {
stroke-dasharray: 600, 600;
}
}
#keyframes Drawpath {
from {
stroke-dasharray: 0, 600;
}
to {
stroke-dasharray: 600, 600;
}
}
</style>
<animate attributeType="XML"
attributeName="opacity"
from="0" to="1"
dur=".08s" begin=".23s"
repeatCount="0" fill="freeze"
/>
seems to produce a decent effect for your case, since the arrowhead is small. However, for a more fine-tuned solution one could use <animateTransform> or <animateMotion>, instead of <animate>, depending on case.
Here's the spec for SMIL Animations.
While the effect is easily achievable with CSS animations (in the end, I'm only animating opacity above), I tend to recommend SMIL Animations for <svg>s, as they provide a lot more options for controlling the different aspects of animations, far superior to CSS options, IMHO.
function makeSVG(tag, attrs) {
var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return el;
}
$(document).ready(function() {
var line = makeSVG('line', {
id: "-",
class: "key-anim1",
x1: 20,
y1: 20,
x2: 120,
y2: 120,
stroke: 'black',
'stroke-width': 2,
'marker-end': "url(#arrow)"
});
document.getElementById("svg").appendChild(line);
});
.key-anim1 {
-webkit-animation: Drawpath 1s linear forwards;
animation: Drawpath 1s linear forwards;
stroke-dasharray: 0, 600;
}
#-webkit-keyframes Drawpath {
from {
stroke-dasharray: 0, 600;
}
to {
stroke-dasharray: 600, 600;
}
}
#keyframes Drawpath {
from {
stroke-dasharray: 0, 600;
}
to {
stroke-dasharray: 600, 600;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg height="600" width="600" id="svg">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth" opacity="0">
<path d="M0,0 L0,6 L9,3 z" fill="#000" />
<animate attributeType="XML" attributeName="opacity" from="0" to="1" dur=".08s" begin=".23s" repeatCount="0" fill="freeze" />
</marker>
</defs>
</svg>
Note: the easy way to fine-tune any animation is to decrease the speed 10 times. This way you'll be able to make it perfect, and to increase it back after you're happy with how it performs 10 times slower. Sometimes, when speeding it back up you need to make minor adjustments from how it would be "technically correct" to counterbalance optical illusions (but this is often times far into the land of "invisible details").
If you want the maker to be visible and move along with the line, you need to drop the dasharray (because now your line has the same length from start to end of animation, but it's drawn with a dashed line and you're simply moving the gaps in that dashed line so it looks like it's growing). Instead you need to make it short initially and animate it towards being longer.
Here's an example:
<svg height="600" width="600" id="svg">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#000" opacity="0">
<animate attributeType="XML" attributeName="opacity" from="0" to="1" dur=".1s" repeatCount="0" fill="freeze" />
</path>
</marker>
</defs>
<line id="-" x1="20" y1="20" x2="21" y2="21" stroke="black" stroke-width="2" marker-end="url(#arrow)">
<animate attributeType="XML" attributeName="x2" from="21" to="120" dur="1s" repeatCount="0" fill="freeze" />
<animate attributeType="XML" attributeName="y2" from="21" to="120" dur="1s" repeatCount="0" fill="freeze" />
</line>
</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

Animating SVG fill linearly along length of path

I have an SVG file that represents a thin shape. I would like to craft an animation such that the entire shape appears be being drawn out.
Example of what I am talking about with the 'S' logo from the Samsung Galaxy S brand:
https://codepen.io/anon/pen/MGawzy
Animation code (because StackOverflow forces me to include it):
#keyframes test {
0% {
clip-path: inset(0px 0px 300px 0px);
}
80% {
clip-path: inset(0px 0px 0px 0px);
}
100% {
clip-path: inset(0px 0px 0px 0px);
}
}
svg {
animation: test;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
A simple SVG in the example above is easy to animate, I can just slowly un-crop the SVG from top-down. But if I have a very complex shape which cannot be animated in this manner (maybe the red line in NASA's logo: https://upload.wikimedia.org/wikipedia/commons/e/e5/NASA_logo.svg), I need a better solution.
Just to clarify again, I do not want to animate the stroke. I want to be able to animate the fill, like it is begin drawn out.
Is there any general solution to this? If there is no general solution, how would I go about key-framing this on my own in a reasonable amount of time?
EDIT: To give some insight, I'm trying to animate the treble clef: https://upload.wikimedia.org/wikipedia/commons/e/e8/G-clef.svg
You could do this (easier to describe than to do, there's a lot of fiddly work involved):
Draw a smooth path on top of the shape that follows what you would consider the "path" and select such a stroke-width that the path covers the shape everywhere.
I would leave the final dot completely out of this, as it is so much thicker than the rest.
Divide the path in such a way that it has no overlapping parts. Order the parts in drawing order, make sure every partial path is drawn in the right direction.
Now divide the shape in the same way, making sure each part is exactly beneath the path on top.
Associate each of the shapes with one of the paths on top, defining the path as a mask for the shape. The path must have stroke:white. Preserve order.
Now you can animate the paths that define the masks with a stroke-dashoffset animation.
I would simply hide the final dot until the pseudo-line animation finishes and then reveal it at once.
Edit: I've definitely got too much time on my hands today, here's the working result:
.clef {
fill: black;
stroke: black;
stroke-width: 0.1;
}
mask path {
fill: none;
stroke: white;
stroke-width: 6;
}
#mask1 path {
stroke-dasharray: 100.8186 100.8186;
stroke-dashoffset: 100.8186;
animation: draw1 1s linear forwards;
}
#keyframes draw1 {
from { stroke-dashoffset: 100.8186; }
to { stroke-dashoffset: 0; }
}
#mask2 path {
stroke-dasharray: 83.6713 83.6713;
stroke-dashoffset: 83.6713;
animation: draw2 1s 1s linear forwards;
}
#keyframes draw2 {
from { stroke-dashoffset: 83.6713; }
to { stroke-dashoffset: 0; }
}
.dot {
opacity: 0;
animation: reveal 0s 2.5s forwards;
}
#keyframes reveal {
from { opacity: 0; }
to { opacity: 1; }
}
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="200" viewBox="0 0 44 75">
<defs>
<mask id="mask1" maskUnits="userSpaceOnUse">
<path d="M 24.3018,49.658 C 15.0191,46.9092 18.5393,38.1126 25.6256,38.2163 35.5458,38.3614 34.8431,54.3874 22.6943,54.1023 12.0123,53.8516 7.34095,40.0402 18.4391,30.1787 29.5373,20.3173 29.9235,12.5622 27.8005,9.28112" />
</mask>
<mask id="mask2" maskUnits="userSpaceOnUse">
<path d="M 27.8005,9.28112 C 25.1382,5.16638 17.6602,8.86888 20.5194,22.1412 L 28.1788,57.6956 C 31.6264,73.699 16.4903,72.3627 15.035,62.329" />
</mask>
</defs>
<path class="clef" mask="url(#mask1)" d="M 26.8522,9.90048 C 26.912,9.95039 26.9649,10.0085 27.0101,10.075 27.4815,10.7683 28.6214,14.0098 25.3767,19.8157 22.846,24.3437 11.0718,30.2815 10.2077,40.9075 9.45969,50.1477 19.1325,56.9723 27.4811,54.2894 33.0239,52.5081 35.8812,44.0959 32.4504,39.7568 23.3964,28.3057 8.87616,45.8309 22.9422,50.6319 21.4126,49.4286 20.37,48.4968 20.1759,47.3578 18.286,36.2692 34.9591,39.1968 30.4666,49.7165 28.6194,54.0421 21.1577,54.879 16.9085,51.0198 13.3489,47.787 11.7693,41.5593 15.7305,37.0885 21.0956,31.0332 27.4302,25.5974 29.1125,17.3081 29.7841,13.9988 29.4887,10.9357 28.6445,8.70078 Z" />
<path class="clef" mask="url(#mask2)" d="M 15.7311,63.3465 C 15.3353,65.46 17.5402,69.8491 21.9764,69.9924 27.3392,70.1658 30.7655,66.0634 29.1692,59.3682 L 21.164,22.4229 C 20.2111,18.0249 20.9262,15.6394 21.4351,14.2178 22.7185,10.6326 25.8192,9.03863 26.8522,9.90048 L 28.6445,8.70078 C 26.9883,4.31578 23.2199,3.11893 20.4997,9.50576 19.1217,12.7412 18.6085,15.989 19.9279,22.2128 L 27.9268,59.9444 C 28.4995,62.6457 28.1161,66.3629 25.595,68.0714 24.3461,68.9177 19.9267,69.5001 18.8455,67.48" />
<path class="clef dot" d="M 15.6702,63.6634 A 3.77139,3.8362 1.075 0 1 19.5129,59.8986 3.77139,3.8362 1.075 0 1 23.2116,63.8049 3.77139,3.8362 1.075 0 1 19.3689,67.5697 3.77139,3.8362 1.075 0 1 15.6702,63.6634 Z" />
</svg>
SVG solution
In this example, solutions from the #ccprog response are used, but the animation is moved from the CSS rules directly to the SVG animation commands
The commands that implement the animation are the same for all patches. The difference in the numeric value of the stroke-dasharray and stroke-dashoffset attributes for each patch:
<animate attributeName="stroke-dashoffset" dur="1s" values="100.8186;0" fill="freeze" />
The animation command for the appearance of a dot on the end of a treble clef:
<animate attributeName="opacity" dur="0.05s" values="0;1" begin="an2.end-0.05s" fill="freeze" />
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="200" viewBox="0 0 44 75">
<defs>
<mask id="mask1" maskUnits="userSpaceOnUse">
<path fill="none" stroke="white" stroke-width="6" stroke-dasharray="100.8186" stroke-dashoffset="100.8186" d="M 24.3018,49.658 C 15.0191,46.9092 18.5393,38.1126 25.6256,38.2163 35.5458,38.3614 34.8431,54.3874 22.6943,54.1023 12.0123,53.8516 7.34095,40.0402 18.4391,30.1787 29.5373,20.3173 29.9235,12.5622 27.8005,9.28112">
<animate attributeName="stroke-dashoffset" dur="1s" values="100.8186;0" fill="freeze"/>
</path>
</mask>
<mask id="mask2" maskUnits="userSpaceOnUse">
<path fill="none" stroke="white" stroke-width="6" stroke-dasharray="83.6713" stroke-dashoffset="83.6713" d="M 27.8005,9.28112 C 25.1382,5.16638 17.6602,8.86888 20.5194,22.1412 L 28.1788,57.6956 C 31.6264,73.699 16.4903,72.3627 15.035,62.329" >
<animate id="an2" attributeName="stroke-dashoffset" dur="1s" values="83.6713;0" begin="+1s" fill="freeze"/>
</path>
</mask>
</defs>
<path class="clef" fill="black" stroke="black" stroke-width="0.1" mask="url(#mask1)" d="M 26.8522,9.90048 C 26.912,9.95039 26.9649,10.0085 27.0101,10.075 27.4815,10.7683 28.6214,14.0098 25.3767,19.8157 22.846,24.3437 11.0718,30.2815 10.2077,40.9075 9.45969,50.1477 19.1325,56.9723 27.4811,54.2894 33.0239,52.5081 35.8812,44.0959 32.4504,39.7568 23.3964,28.3057 8.87616,45.8309 22.9422,50.6319 21.4126,49.4286 20.37,48.4968 20.1759,47.3578 18.286,36.2692 34.9591,39.1968 30.4666,49.7165 28.6194,54.0421 21.1577,54.879 16.9085,51.0198 13.3489,47.787 11.7693,41.5593 15.7305,37.0885 21.0956,31.0332 27.4302,25.5974 29.1125,17.3081 29.7841,13.9988 29.4887,10.9357 28.6445,8.70078 Z"/>
<path class="clef" fill="black" stroke="black" stroke-width="0.1" mask="url(#mask2)" d="M 15.7311,63.3465 C 15.3353,65.46 17.5402,69.8491 21.9764,69.9924 27.3392,70.1658 30.7655,66.0634 29.1692,59.3682 L 21.164,22.4229 C 20.2111,18.0249 20.9262,15.6394 21.4351,14.2178 22.7185,10.6326 25.8192,9.03863 26.8522,9.90048 L 28.6445,8.70078 C 26.9883,4.31578 23.2199,3.11893 20.4997,9.50576 19.1217,12.7412 18.6085,15.989 19.9279,22.2128 L 27.9268,59.9444 C 28.4995,62.6457 28.1161,66.3629 25.595,68.0714 24.3461,68.9177 19.9267,69.5001 18.8455,67.48"/>
<path class="clef dot" opacity="0" d="M 15.6702,63.6634 A 3.77139,3.8362 1.075 0 1 19.5129,59.8986 3.77139,3.8362 1.075 0 1 23.2116,63.8049 3.77139,3.8362 1.075 0 1 19.3689,67.5697 3.77139,3.8362 1.075 0 1 15.6702,63.6634 Z">
<animate attributeName="opacity" dur="0.05s" values="0;1" begin="an2.end-0.05s" fill="freeze"/>
</path>
</svg>
Update 2020
SMIL SVG does not work in IE - caniuse

Animate dashed SVG line

I would like to animate a dashed line in a SVG-file. The line should »grow« from 0 length to full length. All the methods I found are not suitable for me.
Does anyone have an idea, how to solve this?
That's the path in my svg file:
<path class="path" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M234.3,119
c-31-0.7-95,9-128.7,50.8"/>
To animate the line as straight line i did:
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
Of course, this is not working, when I want the line to be dashed.
Is there anybody who has an idea how to solve this?
That's my codepen: http://codepen.io/anon/pen/WpZNJY
PS: I can't use two paths over each other to hide the path underneath because I'm having a coloured background.
You can also do this just using masks as so:
.paths {
fill: none;
stroke: black;
stroke-dasharray: 5;
}
.mask {
fill: none;
stroke: white;
stroke-width: 10;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 830 500" >
<defs>
<path id="first" d="M234.3,119c-31-0.7-95,9-128.7,50.8"/>
<path id="vienna" d="M382.8,243.8c2.9-36.1,15.8-110.3,110.1-145.4"/>
<path id="budapest" d="M550.6,319.4c34-2.7,109-2.1,174.8,50.5"/>
<path id="salzburg" d="M265,323c21.5,12.1,57.2,39.5,60.7,85.1"/>
<path id="tyrol" d="M147.8,319.5c-27.1,7-79.7,31.3-92.8,74.2"/>
<mask id="first-mask"><use class="mask" xlink:href="#first" /></mask>
<mask id="vienna-mask"><use class="mask" xlink:href="#vienna" /></mask>
<mask id="budapest-mask"><use class="mask" xlink:href="#budapest" /></mask>
<mask id="salzburg-mask"><use class="mask" xlink:href="#salzburg" /></mask>
<mask id="tyrol-mask"><use class="mask" xlink:href="#tyrol" /></mask>
</defs>
<g class="paths">
<use xlink:href="#first" mask="url(#first-mask)" />
<use xlink:href="#vienna" mask="url(#vienna-mask)" />
<use xlink:href="#budapest" mask="url(#budapest-mask)" />
<use xlink:href="#salzburg" mask="url(#salzburg-mask)" />
<use xlink:href="#tyrol" mask="url(#tyrol-mask)" />
</g>
</svg>
This is also available as:
codepen of single dotted path
codepen of these plane tracks
Enjoy!
But note ... make sure you test your code cross-browser and fall back to animate tags or javascript if you have issues.
One of the ways to do this is with Javascript. It duplicates a path by creating a polyline.
Try the example below:
<!DOCTYPE HTML>
<html>
<head>
<style>
polyline{
stroke-dasharray:8;
stroke:black;
fill:none;
stroke-width:1;
}
</style>
</head>
<body >
This builds a smooth/dashed polylines that replicates your paths.<br>
<button onClick=animateDashPaths()>Animate Paths</button><br>
<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 830 500" enable-background="new 0 0 830 500" xml:space="preserve">
<path class="path" fill="none" stroke="#000000" stroke-miterlimit="10" d="M234.3,119
c-31-0.7-95,9-128.7,50.8"/>
<!-- Vienna Dash -->
<path id="pathVienna" display="none" stroke-miterlimit="10" d="M382.8,243.8
c2.9-36.1,15.8-110.3,110.1-145.4"/>
<!-- Budapest Dash -->
<path id="pathBudapest" display="none" stroke-miterlimit="10" d="M550.6,319.4
c34-2.7,109-2.1,174.8,50.5"/>
<!-- Salzburg Dash -->
<path id="pathSalzburg" display="none" stroke-miterlimit="10" d="M265,323
c21.5,12.1,57.2,39.5,60.7,85.1"/>
<!-- Tyrol Dash -->
<path id="pathTyrol" display="none" stroke-miterlimit="10" d="M147.8,319.5
c-27.1,7-79.7,31.3-92.8,74.2"/>
</svg>
<script>
//---button---
function animateDashPaths()
{
var NS="http://www.w3.org/2000/svg"
//----Vienna----------------
var endLengthVienna=pathVienna.getTotalLength()
var lengthDeltaVienna=endLengthVienna/200
var polylineVienna=document.createElementNS(NS,"polyline")
Layer_1.appendChild(polylineVienna)
var pntListVienna=polylineVienna.points
var iTVienna=setInterval(drawPathVienna,5)
var cntVienna=0
function drawPathVienna()
{
var len=lengthDeltaVienna*cntVienna++
if(len<endLengthVienna)
{
var pnt=pathVienna.getPointAtLength(len)
pntListVienna.appendItem(pnt)
}
else
clearInterval(iTVienna)
}
//----Budapest----------------
var endLengthBudapest=pathBudapest.getTotalLength()
var lengthDeltaBudapest=endLengthBudapest/200
var polylineBudapest=document.createElementNS(NS,"polyline")
Layer_1.appendChild(polylineBudapest)
var pntListBudapest=polylineBudapest.points
var iTBudapest=setInterval(drawPathBudapest,5)
var cntBudapest=0
function drawPathBudapest()
{
var len=lengthDeltaBudapest*cntBudapest++
if(len<endLengthBudapest)
{
var pnt=pathBudapest.getPointAtLength(len)
pntListBudapest.appendItem(pnt)
}
else
clearInterval(iTBudapest)
}
//----Salzburg----------------
var endLengthSalzburg=pathSalzburg.getTotalLength()
var lengthDeltaSalzburg=endLengthSalzburg/200
var polylineSalzburg=document.createElementNS(NS,"polyline")
Layer_1.appendChild(polylineSalzburg)
var pntListSalzburg=polylineSalzburg.points
var iTSalzburg=setInterval(drawPathSalzburg,5)
var cntSalzburg=0
function drawPathSalzburg()
{
var len=lengthDeltaSalzburg*cntSalzburg++
if(len<endLengthSalzburg)
{
var pnt=pathSalzburg.getPointAtLength(len)
pntListSalzburg.appendItem(pnt)
}
else
clearInterval(iTSalzburg)
}
//----Tyrol----------------
var endLengthTyrol=pathTyrol.getTotalLength()
var lengthDeltaTyrol=endLengthTyrol/200
var polylineTyrol=document.createElementNS(NS,"polyline")
Layer_1.appendChild(polylineTyrol)
var pntListTyrol=polylineTyrol.points
var iTTyrol=setInterval(drawPathTyrol,5)
var cntTyrol=0
function drawPathTyrol()
{
var len=lengthDeltaTyrol*cntTyrol++
if(len<endLengthTyrol)
{
var pnt=pathTyrol.getPointAtLength(len)
pntListTyrol.appendItem(pnt)
}
else
clearInterval(iTTyrol)
}
}
</script>
</body>
</html>
I think you should just be able to add stroke-dasharray to your animation and lower the dash array in your css. An updated version of your codepen; http://codepen.io/harvey89/pen/NpaWBE
stroke-dashoffset: 1000;
stroke-dasharray: 10;
#keyframes dash {
to {
stroke-dashoffset: 0;
stroke-dasharray: 10;
}
}
You'll probably have to play around with numbers to get your desired effect though

Resources