How to increase and decrease opacity after few seconds using javascript? - 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>

Related

CSS animation working on computer but not on my phone

so I have found this animation and I was trying it, it works perfectly on my computer but once I switch to my phone the animation is just frozen on one frame.
I don't see why it's doing this...
By the way, I am using React, I don't think it matters but we never know.
CSS :
.loader {
max-width: 15rem;
width: 100%;
height: auto;
stroke-linecap: round;
}
circle {
fill: none;
stroke-width: 3.5;
animation-name: preloader;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
transform-origin: 170px 170px;
will-change: transform;
}
circle:nth-of-type(1) {
stroke-dasharray: 550px;
}
circle:nth-of-type(2) {
stroke-dasharray: 500px;
}
circle:nth-of-type(3) {
stroke-dasharray: 450px;
}
circle:nth-of-type(4) {
stroke-dasharray: 300px;
}
circle:nth-of-type(1) {
animation-delay: -0.15s;
}
circle:nth-of-type(2) {
animation-delay: -0.3s;
}
circle:nth-of-type(3) {
animation-delay: -0.45s;
}
circle:nth-of-type(4) {
animation-delay: -0.6s;
}
#keyframes preloader {
50% {
transform: rotate(360deg);
}
}
HTML :
import React from 'react'
function Animation() {
return (
<div>
<svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 340">
<circle cx="170" cy="170" r="160" stroke="#0000FF"/>
<circle cx="170" cy="170" r="135" stroke="#404041"/>
<circle cx="170" cy="170" r="110" stroke="#0000FF"/>
<circle cx="170" cy="170" r="85" stroke="#404041"/>
</svg>
</div>
)
}
export default Animation
Edit : So after trying on my brother's phone, it works, I don't know why it's doing that on my phone but working on others...

I think this happens because you use class instead of className. In React.JS we use className and the only reason behind the fact that it uses className over class is that the class is a reserved keyword in JavaScript and since we use JSX in React which itself is the extension of JavaScript, so we have to use className instead of the class attribute.
import React from 'react';
function Animation() {
return (
<div>
<svg className="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 340">
<circle cx="170" cy="170" r="160" stroke="#0000FF"/>
<circle cx="170" cy="170" r="135" stroke="#404041"/>
<circle cx="170" cy="170" r="110" stroke="#0000FF"/>
<circle cx="170" cy="170" r="85" stroke="#404041"/>
</svg>
</div>
)
}
export default Animation

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 can achieve an invisible pencil effect with SVG text? [duplicate]

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/

How to use CSS transitions with <text> elements?

I'm making a graph using svg, and want to make things looks pretty.
In my graph, I have a <circle> with <text> inside it, and the circle move around.
I used transitions to make my circle move pretty, but can't use it with <text> tags The text goes out of the circle, while the circle is moving.
What I can do so the text follow the circle element?
Plunker: https://plnkr.co/edit/iQZL1Pb4ozY80uFsVJaQ
var x = true;
var test = function() {
var circleEl = document.getElementById('circle');
var textEl = document.getElementById('text');
if (x) {
circleEl.setAttribute('cx', '400')
textEl.setAttribute('x', '397')
x = false
} else {
circleEl.setAttribute('cx', '50')
textEl.setAttribute('x', '47')
x = true
}
}
.circle-transition {
transition-property: all;
transition-duration: 3s;
transition-timing-function: linear;
}
.text-transition {
transition-property: all;
transition-duration: 3s;
transition-timing-function: linear;
}
<svg width="1000px" heigth="200px">
<circle class="circle-transition" id="circle" r="10px" cy="50" cx="50" fill="red"></circle>
<text class="text-transition" id="text" y="55" x="47">1</text>
</svg>
<button onclick="test()">test it!</button>

You need to be a bit cautious about using SVG presentation attributes and animating them with CSS. For example, your problem description only applies to Chrome. In Firefox, both the circle and the text jump.
Best to use only CSS style properties, in this case transform. In addition, you can group elements together so that only one animation is needed:
var x = true;
var test = function() {
var groupEl = document.getElementById('group');
if (x) {
groupEl.setAttribute('style', 'transform:translate(350px)')
x = false
} else {
groupEl.setAttribute('style', 'transform:translate(0px)')
x = true
}
}
.group-transition {
transition-property: all;
transition-duration: 3s;
transition-timing-function: linear;
}
<svg width="1000px" heigth="200px">
<g id="group" class="group-transition" style="transform:translate(0px)">
<circle id="circle" r="10px" cy="50" cx="50" fill="red"></circle>
<text id="text" y="55" x="47">1</text>
</g>
</svg>
<button onclick="test()">test it!</button>

Turns out that IE11 and Edge do not support CSS transforms on SVG elements.
My workaround was to use both CSS Transform and Transform attribute, that way all browsers shows the circle and text right position (IE wasn't positioning it at all), but only the animations doesn't work in IE/Edge.
var x = true;
var test = function() {
var circleEl = document.getElementById('circle');
var textEl = document.getElementById('text');
if (x) {
circleEl.setAttribute('style', 'transform:translate(350px, 0px)')
textEl.setAttribute('style', 'transform:translate(350px, 0px)')
circleEl.setAttribute('transform', 'translate(350, 0)')
textEl.setAttribute('transform', 'translate(350, 0)')
x = false
} else {
circleEl.setAttribute('style', 'transform:translate(0px, 0px)')
textEl.setAttribute('style', 'transform:translate(0px, 0px)')
circleEl.setAttribute('transform', 'translate(0, 0)')
textEl.setAttribute('transform', 'translate(0, 0)')
x = true
}
}
.circle-transition {
transition-property: all;
transition-duration: 3s;
transition-timing-function: linear;
}
.text-transition {
transition-property: all;
transition-duration: 3s;
transition-timing-function: linear;
}
<svg width="1000px" heigth="200px">
<circle class="circle-transition" id="circle" r="10px" cy="50" cx="50" fill="red" style="transform: translate(0,0)" transform="translate(0, 0)"></circle>
<text class="text-transition" id="text" y="55" x="47" style="transform:translate(0,0)" transform="translate(0, 0)">1</text>
</svg>
<button onclick="test()">test it!</button>

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>

Categories

Resources