How can achieve an invisible pencil effect with SVG text? [duplicate] - javascript
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/
Related
offset-path leaving a fading trail
what do I need to include to make a white trail following it? I tried adding 10 spans and giving them the same path and delaying each one but it looked so off. .container{ width: 100vw; height: 100vh; background: gray; } .orb{ background: #00fff9; offset-path: path( "M257.004 129.794C321.128 129.794 380.697 139.056 425.611 154.622C479.727 173.378 513 201.806 513 227.548C513 254.373 477.738 284.575 419.624 303.958C375.689 318.612 317.874 326.262 257.004 326.262C194.596 326.262 135.5 319.081 91.0694 303.797C34.8572 284.455 1 253.863 1 227.548C1 202.015 32.7685 173.806 86.1237 155.079C131.206 139.257 192.246 129.794 256.996 129.794H257.004Z" ); box-shadow: 0 0 10px #00fff9, 0 0 20px #00fff9, 0 0 30px #00fff9, 0 0 40px #00fff9, 0 0 50px #00fff9, 0 0 60px #00fff9, 0 0 70px #00fff9, 0 0 80px #00fff9, 0 0 90px #00fff9; border-radius: 50%; width: 20px; height: 20px; animation: move 10s linear infinite; } #keyframes move { 100% { offset-distance: 100%; } } <div class="container"> <div class="orb"> </div> </div>
Here's an implementation that uses SVG <animateMotion> instead of CSS offset-path. (The path data might look a bit different, but they are basically the same.) The trail is done with a stroke-dashoffset animation. The path gets the pathLength="100", and is then drawn ten times, each with a stroke-dasharray="2 98". That way, only a dash with a length of 2 of 100 along the path is drawn. Then, each of the ten copies of the path gets a fading opacity, and its stroke-dashoffset is animated such that they are positioned one behind the other and moving behind the glowing orb. That part gets admitedly a bit verbose, as you need to write an individual animation rule for each of the copies. The combination of them all is then blured to smooth it. For the orb, a custom SVG filter is used, since the drop-shadow property can't be used directly for SVG grafics. svg { background-color: grey; overflow: visible; width: 100vw; height: 100vh; } .orb { fill: #00fff9; } .orb :first-child { filter: url(#glow); } .trail { filter: blur(4px); } .trail use { fill: none; stroke: white; stroke-width: 10; stroke-dasharray: 2 98; } .trail :nth-child(1) { animation: trail1 10s linear infinite; stroke-opacity: 0.5; } #keyframes trail1 { from {stroke-dashoffset: 2} to {stroke-dashoffset: -98} } .trail :nth-child(2) { animation: trail2 10s linear infinite; stroke-opacity: 0.45; } #keyframes trail2 { from {stroke-dashoffset: 4} to {stroke-dashoffset: -96} } .trail :nth-child(3) { animation: trail3 10s linear infinite; stroke-opacity: 0.4; } #keyframes trail3 { from {stroke-dashoffset: 6} to {stroke-dashoffset: -94} } .trail :nth-child(4) { animation: trail4 10s linear infinite; stroke-opacity: 0.35; } #keyframes trail4 { from {stroke-dashoffset: 8} to {stroke-dashoffset: -92} } .trail :nth-child(5) { animation: trail5 10s linear infinite; stroke-opacity: 0.3; } #keyframes trail5 { from {stroke-dashoffset: 10} to {stroke-dashoffset: -90} } .trail :nth-child(6) { animation: trail6 10s linear infinite; stroke-opacity: 0.25; } #keyframes trail6 { from {stroke-dashoffset: 12} to {stroke-dashoffset: -88} } .trail :nth-child(7) { animation: trail7 10s linear infinite; stroke-opacity: 0.2; } #keyframes trail7 { from {stroke-dashoffset: 14} to {stroke-dashoffset: -86} } .trail :nth-child(8) { animation: trail8 10s linear infinite; stroke-opacity: 0.15; } #keyframes trail8 { from {stroke-dashoffset: 16} to {stroke-dashoffset: -84} } .trail :nth-child(9) { animation: trail9 10s linear infinite; stroke-opacity: 0.1; } #keyframes trail9 { from {stroke-dashoffset: 18} to {stroke-dashoffset: -82} } .trail :nth-child(10) { animation: trail10 10s linear infinite; stroke-opacity: 0.05; } #keyframes trail10 { from {stroke-dashoffset: 20} to {stroke-dashoffset: -80} } <svg viewBox="-10 110 550 240"> <defs> <filter id="glow" x="-1" y="-1" width="3" height="3"> <feGaussianBlur stdDeviation="12"/><!-- defines how blured the glow is --> <feComponentTransfer> <feFuncA type="linear" slope="3"/><!-- defines how bright the glow is --> </feComponentTransfer> </filter> <path id="ellipse" pathLength="100" d="M257 130A256 98 0 1 1 257 326 256 98 0 1 1 257 130Z" /> </defs> <g class="trail"> <use href="#ellipse"/> <use href="#ellipse"/> <use href="#ellipse"/> <use href="#ellipse"/> <use href="#ellipse"/> <use href="#ellipse"/> <use href="#ellipse"/> <use href="#ellipse"/> <use href="#ellipse"/> <use href="#ellipse"/> </g> <g class="orb"> <circle r="12"/><!-- defines how wide the glow is --> <circle r="10"/> <animateMotion dur="10s" repeatCount="indefinite"> <mpath href="#ellipse"/> </animateMotion> </g> </svg> You could write the trail animation also with <animate>. It would look like this: <use href="#ellipse"> <animate attributeName="stroke-dashoffset" dur="10s" repeatCount="indefinite" from="2" to="-98" /> </use> Which variant you use is a matter of taste. Edit: Generalization The above code depends on a linear movement of the orb along the path. How would you solve this with different easings? I started to explore that and found the only realistic approach is to draw the trail frame-by-frame from Javascript. An example can be found in this Codepen.
CSS Animation on SVG Element on iOS Safari 11 Not Working
I have a simple SVG that animates when it comes into viewport (via added class in Javascript). It's a simple bar chart that is supposed to animate the height of 2 rect elements. It works fine everywhere except iPad Safari 11.1.2 (and maybe below) When I remove the animation the SVG displays fine. The class is being added via javascript and webkit vendor prefixes are added for browser support. <style type="text/css"> #keyframes draw { from { height: 0; } to { height: 110px; } } #keyframes drawBig { from { height: 0; } to { height: 360px; } } #-webkit-keyframes draw { from { height: 0; } to { height: 110px; } } #-webkit-keyframes drawBig { from { height: 0; } to { height: 360px; } } .animate-bar { animation: draw 1s linear forwards; animation-play-state: paused; -webkit-animation: draw 1s linear forwards; -webkit-animation-play-state: paused; } .animate-bar.bar-large { animation-name: drawBig; -webkit-animation-name: drawBig; } .play .animate-bar { animation-play-state: running; -webkit-animation-play-state: running; } </style> <svg id="diagram" viewBox="0 0 290 472" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="svg" stroke="none" stroke-width="1" fill="#000000" fill-rule="evenodd"> <g id="left"> <rect class="animate-bar" x="0" y="283" width="132" height="107" rx="3" transform="scale(1,-1) translate(0,-676)"> </rect> <text font-weight="bold"> <tspan x="47.384" y="263">1129</tspan> </text> </g> <g id="right" transform="translate(152,0)"> <rect class="animate-bar bar-large" fill="#EEE6E2" x="0" y="33" width="132" height="360" rx="3" transform="scale(1,-1) translate(0,-426)"> </rect> <text font-weight="bold"> <tspan x="36.56" y="17">4000</tspan> </text> </g> </g> </svg> The CSS is just manipulating the height of the bars in the animation (which is paused until the class is added). On iOS 11 though the bars just never animate so both heights appear to be 0 and you can't see either. When I look in dev tools I can see the <rect> elements flashing in the DOM indicating something is happening to them (even though the only thing that should manipulate them is the CSS animation) but they are flashing very fast so I can't see what. I'm at a loss of what else to try. Here is a fiddle of the code: http://jsfiddle.net/peuzdL2n/7/ Works in everything except iOS Safari 11 and below as far as I can see
How to increase and decrease opacity after few seconds using javascript?
I have this SVG element in HTML: <g id="Group-8" transform="translate(108.800000, 0.293172)" fill="#FF056A" opacity="0.1"> Here you can see an attribute called opacity and it's value is 0.1 Now I want to increase it's value to 0.3, 0.6, 0.9 and then again to 0.6, 0.3, 0.1. It should do this all the time. I have used Javascript setTimeout method but don't know how to make it do what I want :( setTimeout(function() { $("#Group-8-Copy-2").attr('opacity', '0.3'); }, 1000);
Checkout below snippet: $( document ).ready(function() { setInterval(function(){ opacity = $('#tilak').css("opacity"); opacity = Number(opacity) + 0.3; if (opacity > 1) { opacity = 0; } $('#tilak').css("opacity", opacity); console.log(opacity); }, 1000); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body id="tilak" style="opacity: 0"> kdjkd </body>
Here you go var value = [0.1, 0.3, 0.6, 0.9]; var add = true; var i = 0; setInterval(function() { $("#Group-8-Copy-2").attr('opacity', [value[i]]); i = add ? i + 1 : i -1; add = i == value.length -1 ? false : (i == 0 ? true : add ); }, 1000); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <g id="Group-8-Copy-2" fill="#FF056A" opacity="0.1"> <circle cx="10" cy="10" r="5" /> </g> </svg>
You can also achieve a pulsing without JS, using CSS animations. Using CSS animations often has advantages over animating with JS, you can more precisely adjust the timing of things by changing the animation-duration and tweaking other things instead of adjusting the length of the timeout on a timer, etc. It also tends to perform better because it is the browser doing all the work rather than your code being interpreted by he browser and interacting with the DOM to make it work. .stepped-pulse { animation-duration: 4s; animation-name: stepped-pulse; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: steps(4, end); } #keyframes stepped-pulse { 0% { opacity: .01; } 100% { opacity: .09; } } <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <g id="Group-8-Copy-2" class="stepped-pulse" fill="#FF056A"> <circle cx="10" cy="10" r="5" /> </g> </svg> If you want a smoother animation (as you seem to indicate in comments on another answer), you can just change the animation-timing-function (in this case I am removing it ant it will default to ease): .pulse { animation-duration: 4s; animation-name: pulse; animation-iteration-count: infinite; animation-direction: alternate; } #keyframes pulse { 0% { opacity: .01; } 100% { opacity: .09; } } <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <g id="Group-8-Copy-2" class="pulse" fill="#FF056A"> <circle cx="10" cy="10" r="5" /> </g> </svg>
Endless draw/undraw SVG path loop using vanillaJS
I would like to add a class and remove a class to an svg path every time the animation in the previous path has ended, to achieve a smooth drawing/undrawing effect over and over. My fiddle shows what I mean, but I am only listening for animationend, then undrawing the path. I'm unsure what the best way to loop through endlessly is. The current fiddle draws and undraws once (remove .patha and add .pathb) but then doesn't trigger on the next animationend. To get a smooth continuous animation I would need to alternate like so add(.pathb)>>remove(.patha)>>add(.pathc)>>remove(.pathb)>>add(.pathd)>>remove(.pathc)>>add(.patha)>>remove(.pathd) I was thinking of a for loop, using the % operator but that does not seem optimal. For now, I can't even trigger the animation end to trigger every time the animation ends, only once. https://jsfiddle.net/jr7ocbzq/4/ relevant JS snippet: svgpath.addEventListener("animationend", function(event) { document.getElementById("path").classList.add('pathb'); document.getElementById("path").classList.remove('patha'); i++; console.log(i); }, false); To reiterate for clarity, trying to toggle from the element having the class patha to pathb then pathc then pathd in that sequence, endlessly. All the potential solutions I found were jQuery, not vanillaJS. Need to trigger an onEvent every animationend, so one continuous one doesn't work.
Sounds like you need an array of those 4 class names, and then you can cycle through them: const svgpath = document.getElementById("path"); const paths = ['patha', 'pathb', 'pathc', 'pathd']; let i = 0; svgpath.addEventListener("animationend", () => { svgpath.classList.remove(paths[i]); i = (i + 1) % 4; svgpath.classList.add(paths[i]); }, false); .patha { stroke-dasharray: 13672.7; stroke-dashoffset: -13672.7; animation: dashZero 1s linear forwards; } .pathb { stroke-dasharray: 13672.7; stroke-dashoffset: 0; animation: dashDrawn 1s linear forwards; } .pathc { stroke-dasharray: 13672.7; stroke-dashoffset: 13672.7; animation: dashZero 1s linear forwards; } .pathd { stroke-dasharray: 13672.7; stroke-dashoffset: 0; animation: dashUndrawn 1s linear forwards; } #keyframes dashZero { to { stroke-dashoffset: 0; } } #keyframes dashDrawn { to { stroke-dashoffset: 13672.7; } } #keyframes dashUndrawn { to { stroke-dashoffset: -13672.7; } } <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="200px" viewBox="0 0 3027.621 4035.496" enable-background="new 0 0 150 200" xml:space="preserve"> <path id="path" class="patha" fill="none" stroke="#000000" stroke-width="16" stroke-miterlimit="10" d="M413.078,1768.305 c-24.633,50.051-0.718,112.339,6.712,163.942c9.629,66.869,23.438,133.097,36.056,199.496 c22.431,118.04,30.003,240.334,26.476,359.948c-3.251,110.267,14.797,239.577,71.273,335.987 c14.709,25.109,29.367,50.25,43.714,75.568c9.666,19.331,28.359,31.145,41,48c14.109,20.522,29.366,40.521,48,57.186 c23.089,20.648,51.639,30.456,74.625,51.064c20.852,18.695,45.92,32.317,66.834,51.288c17.762,16.109,30.969,35.89,47.541,52.462 c43.407,43.407,74.809,98.79,127.394,133.067c44.3,28.876,85.672,49.923,138.364,58.69c69.464,11.559,124.444,2.54,191.202-16.422 c104.527-29.689,201.769-76.793,289.516-139.937c42.764-30.773,77.666-72.729,122.62-99.768 c50.301-30.254,105.492-64.867,159.904-86.632c92.434-39.106,181.063-100.788,251.25-171.875 c31.896-32.304,66.448-72.631,77.125-117.75c11.867-50.149,19.56-98.736,21.625-150.375c0-54.127,4.634-111.463,6.963-166.259 c2.441-57.438,3.972-113.243,13.297-170c7.623-46.402,20.744-87.695,56.294-120.587c31.39-29.043,76.555-65.571,94.946-104.654 c8.934-18.985,24.678-32.756,32.98-52.139c11.043-25.779,11.248-54.254,13.289-81.738c1.946-26.211-1.156-52.432,0.675-78.882 c1.963-28.351,9.619-56.153,9.431-84.616c-0.293-44.235-21.954-87.451-44.875-124.125c-43.331-54.164-91.033-2.819-125,36 c-50.949,62.271-118.999,159.005-109.5,244.5c2.411,21.704-8.296,32.208-18.25,50.25c-12.092,21.917-19.175,43.347-21.25,68.25 c-4.311,30.171-0.273,59.368,2.68,89.448c1.227,12.493,4.32,27.231,4.32,39.552c0,6.844-5.353,12.754-3.578,8.601 c2.911-1.966,3.771-0.833,2.578,3.399c-47.409-37.928-40.657-126.818-47.125-180c-2.167-17.817-4.29-71.508-22.5-81.625 c-14.396-7.998-15.077,62.01-14.344,67.875c4.491,35.93-16.116-1.506-21.92-14.324c-13.666-30.178-17.265-64.605-24.111-96.822 c-13.661-64.283-29.435-126.601-46-190.104c-8.623-25.868-28.964-49.228-44.814-70.852c-19.866-27.101-35.539-56.868-54.958-84.279 c-36.979-52.197-70.151-98.792-115.228-143.869c-20.548-20.547-43.361-38.965-70.75-49.125 c-39.084-14.499-27.718,21.271-24.408,45.627c9.404,69.213,83.619,85.898,110.945,140.058c-0.539-1.26-0.539-1.26,0,0 c-1.549-1.119-2.694-2.546-3.437-4.28c1.728,0.956,2.873,2.382,3.437,4.28c-33.145-29.063-68.993-52.085-104.443-77.779 c-32.626-23.646-76.713-40.15-105.344-68.781c-39.09-19.545-76.505-50.088-110-78c-18.519-16.835-36.408-32.652-51.625-52.5 c-12.863-16.777-26.937-41.062-41.375-55.5c-29.586-29.586-45.693-72.107-77-99.5c-33.206-29.055-72.169-45.084-111-64.5 c-8.22-5.48-20.368-4.095-29-11c-20.746-10.373-3.499,43.453-1.75,48c8.116,21.102,20.279,41.774,29.222,62.936 c2.116,5.007,34.684,48.175,34.778,47.939c-1.561,3.903-68.28-71.214-78.242-77.869c-36.59-24.448-84.849-50.89-101.447-94.749 c-15.672-41.412,19.921-103.632,37.257-140.601c12.106-25.815,19.211-54.101,35.163-78.042c16.457-24.699,38.841-44.255,59.1-65.657 c-22.636-21.361-105.591,48.52-120.634,64.608c-43.661,46.697-67.815,102.46-93.739,159.881 C911.3,1007.47,759.609,995.49,673.057,1077.379c-43.074,40.753-77.728,111.422-80.61,170.498 c-1.651,33.851-10.257,65.288-8.369,99.569c1.971,35.768-3.779,67.888-13.952,102.104c-19.856,66.789-41.101,122.66-77.932,181.85 c-17.076,27.443-28.568,57.338-43.268,85.993c-15.072,29.38-36.854,41.532-43.636,76.335 c-5.878-80.343-32.141-157.622-35.634-238.854c-3.732-86.805,28.114-152.401,50.771-233.371 c22.175-79.244,68.332-142.288,73.671-227.543c2.401-38.335,13.992-73.532,26.493-109.548c15-43.214,17.744-79.896,44.428-119.309 c45.189-66.744,99.946-120.074,166.354-165.686c32.482-22.311,67.216-37.679,100.899-57.378 c36.212-21.179,68.07-47.756,106.292-66.032c73.732-35.256,152.973-39.133,233.839-46.663c22.458-2.091,57.163-15.8,79.567-9.993 c9.649,2.501-16.527,53.048-15.829,66.824c-0.201-3.983,147.514-32.421,157.959-33.811c52.149-6.94,103.896-17.357,156.799-13.956 c52.464,3.374,86.372,50.615,122.926,81.772c36.808,31.374,63.902,78.269,103.809,104.334 c41.339,27.001,96.697,43.496,144.006,56.327c48.201,13.074,97.097,29.991,140.361,54.841 c49.342,28.342,106.265,43.365,157.159,69.197c49.727,25.238,86.129,50.654,108.619,103.171 c10.992,25.668,27.36,46.758,36.442,73.71c9.544,28.323,15.726,57.79,17.251,87.674c0.828,16.208-4.857,38.451,4.994,52.745 c11.554,16.763,25.008,31.074,41.293,43.17c12.156,9.029,18.786,31.155,30.554,42.878c16.379,16.319,27.618,31.697,37.166,52.68 c40.238,88.449,68.993,190.7,49.853,289.211c-9.129,46.981-20.9,94.993-32.856,141.342c-7.486,29.021-21.176,53.734-31.518,81.433 c-9.207,24.645-12.56,50.123-17.314,76.016"/> </svg>
No js needed, simply merge your 4 animations in a single one. .patha { stroke-dasharray: 13672.7; animation: dash 4s linear infinite; } #keyframes dash { 0% { stroke-dashoffset: 0; } 33% { stroke-dashoffset: 13672.7; } 66% { stroke-dashoffset: -13672.7; } } <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="200px" viewBox="0 0 3027.621 4035.496" enable-background="new 0 0 150 200" xml:space="preserve"> <path id="path" class="patha" fill="none" stroke="#000000" stroke-width="16" stroke-miterlimit="10" d="M413.078,1768.305 c-24.633,50.051-0.718,112.339,6.712,163.942c9.629,66.869,23.438,133.097,36.056,199.496 c22.431,118.04,30.003,240.334,26.476,359.948c-3.251,110.267,14.797,239.577,71.273,335.987 c14.709,25.109,29.367,50.25,43.714,75.568c9.666,19.331,28.359,31.145,41,48c14.109,20.522,29.366,40.521,48,57.186 c23.089,20.648,51.639,30.456,74.625,51.064c20.852,18.695,45.92,32.317,66.834,51.288c17.762,16.109,30.969,35.89,47.541,52.462 c43.407,43.407,74.809,98.79,127.394,133.067c44.3,28.876,85.672,49.923,138.364,58.69c69.464,11.559,124.444,2.54,191.202-16.422 c104.527-29.689,201.769-76.793,289.516-139.937c42.764-30.773,77.666-72.729,122.62-99.768 c50.301-30.254,105.492-64.867,159.904-86.632c92.434-39.106,181.063-100.788,251.25-171.875 c31.896-32.304,66.448-72.631,77.125-117.75c11.867-50.149,19.56-98.736,21.625-150.375c0-54.127,4.634-111.463,6.963-166.259 c2.441-57.438,3.972-113.243,13.297-170c7.623-46.402,20.744-87.695,56.294-120.587c31.39-29.043,76.555-65.571,94.946-104.654 c8.934-18.985,24.678-32.756,32.98-52.139c11.043-25.779,11.248-54.254,13.289-81.738c1.946-26.211-1.156-52.432,0.675-78.882 c1.963-28.351,9.619-56.153,9.431-84.616c-0.293-44.235-21.954-87.451-44.875-124.125c-43.331-54.164-91.033-2.819-125,36 c-50.949,62.271-118.999,159.005-109.5,244.5c2.411,21.704-8.296,32.208-18.25,50.25c-12.092,21.917-19.175,43.347-21.25,68.25 c-4.311,30.171-0.273,59.368,2.68,89.448c1.227,12.493,4.32,27.231,4.32,39.552c0,6.844-5.353,12.754-3.578,8.601 c2.911-1.966,3.771-0.833,2.578,3.399c-47.409-37.928-40.657-126.818-47.125-180c-2.167-17.817-4.29-71.508-22.5-81.625 c-14.396-7.998-15.077,62.01-14.344,67.875c4.491,35.93-16.116-1.506-21.92-14.324c-13.666-30.178-17.265-64.605-24.111-96.822 c-13.661-64.283-29.435-126.601-46-190.104c-8.623-25.868-28.964-49.228-44.814-70.852c-19.866-27.101-35.539-56.868-54.958-84.279 c-36.979-52.197-70.151-98.792-115.228-143.869c-20.548-20.547-43.361-38.965-70.75-49.125 c-39.084-14.499-27.718,21.271-24.408,45.627c9.404,69.213,83.619,85.898,110.945,140.058c-0.539-1.26-0.539-1.26,0,0 c-1.549-1.119-2.694-2.546-3.437-4.28c1.728,0.956,2.873,2.382,3.437,4.28c-33.145-29.063-68.993-52.085-104.443-77.779 c-32.626-23.646-76.713-40.15-105.344-68.781c-39.09-19.545-76.505-50.088-110-78c-18.519-16.835-36.408-32.652-51.625-52.5 c-12.863-16.777-26.937-41.062-41.375-55.5c-29.586-29.586-45.693-72.107-77-99.5c-33.206-29.055-72.169-45.084-111-64.5 c-8.22-5.48-20.368-4.095-29-11c-20.746-10.373-3.499,43.453-1.75,48c8.116,21.102,20.279,41.774,29.222,62.936 c2.116,5.007,34.684,48.175,34.778,47.939c-1.561,3.903-68.28-71.214-78.242-77.869c-36.59-24.448-84.849-50.89-101.447-94.749 c-15.672-41.412,19.921-103.632,37.257-140.601c12.106-25.815,19.211-54.101,35.163-78.042c16.457-24.699,38.841-44.255,59.1-65.657 c-22.636-21.361-105.591,48.52-120.634,64.608c-43.661,46.697-67.815,102.46-93.739,159.881 C911.3,1007.47,759.609,995.49,673.057,1077.379c-43.074,40.753-77.728,111.422-80.61,170.498 c-1.651,33.851-10.257,65.288-8.369,99.569c1.971,35.768-3.779,67.888-13.952,102.104c-19.856,66.789-41.101,122.66-77.932,181.85 c-17.076,27.443-28.568,57.338-43.268,85.993c-15.072,29.38-36.854,41.532-43.636,76.335 c-5.878-80.343-32.141-157.622-35.634-238.854c-3.732-86.805,28.114-152.401,50.771-233.371 c22.175-79.244,68.332-142.288,73.671-227.543c2.401-38.335,13.992-73.532,26.493-109.548c15-43.214,17.744-79.896,44.428-119.309 c45.189-66.744,99.946-120.074,166.354-165.686c32.482-22.311,67.216-37.679,100.899-57.378 c36.212-21.179,68.07-47.756,106.292-66.032c73.732-35.256,152.973-39.133,233.839-46.663c22.458-2.091,57.163-15.8,79.567-9.993 c9.649,2.501-16.527,53.048-15.829,66.824c-0.201-3.983,147.514-32.421,157.959-33.811c52.149-6.94,103.896-17.357,156.799-13.956 c52.464,3.374,86.372,50.615,122.926,81.772c36.808,31.374,63.902,78.269,103.809,104.334 c41.339,27.001,96.697,43.496,144.006,56.327c48.201,13.074,97.097,29.991,140.361,54.841 c49.342,28.342,106.265,43.365,157.159,69.197c49.727,25.238,86.129,50.654,108.619,103.171 c10.992,25.668,27.36,46.758,36.442,73.71c9.544,28.323,15.726,57.79,17.251,87.674c0.828,16.208-4.857,38.451,4.994,52.745 c11.554,16.763,25.008,31.074,41.293,43.17c12.156,9.029,18.786,31.155,30.554,42.878c16.379,16.319,27.618,31.697,37.166,52.68 c40.238,88.449,68.993,190.7,49.853,289.211c-9.129,46.981-20.9,94.993-32.856,141.342c-7.486,29.021-21.176,53.734-31.518,81.433 c-9.207,24.645-12.56,50.123-17.314,76.016"/> </svg>
How to create a power bar in JavaScript
How to create a power bar which will toggle automatically up and down and will stop when i click on the screen. http://i.stack.imgur.com/L3JSH.jpg
You will need to be more specific about what exactly you have tried and what is not working. However, this should get you started. This example uses sgv but could easily be translated into a more div oriented approach. The objective is to hit the toggle button when the circle is in the center region. Good Luck! Note: This might only work in chrome at the moment. document.getElementById("toggler").addEventListener("click", function(){ var el = document.querySelector("circle"); var className = "stopped"; el.classList.toggle(className); if (!el.classList.contains(className)) { return } var currentCX = parseFloat(getComputedStyle(el).getPropertyValue("cx")); if (currentCX >= 240 && currentCX <= 260 ) { console.log("hit"); } else { console.log("miss"); } }); #keyframes sweep { from { cx: 5; } to { cx: 495; } } circle{ animation-duration: 3s; animation-timing-function: ease-in-out; animation-name: sweep; animation-iteration-count: infinite; animation-direction: alternate; } circle.stopped{ animation-play-state: paused; } <svg id="lineWithDots" width="500px" height="20px"> <g transform="translate(0,10)"> <rect width="490" height="2" y="-1" x="5" /> <rect width="20" height="10" y="-5" x="240" /> <circle r="4" cx="5" stroke="rgb(0, 0, 0)" fill="rgb(255, 255, 255)" /> </g> </svg> <div> <button id="toggler">toggle</button> </div>