2 javascript functions conflicting

2 javascript functions conflicting - javascript

I want the logo to fill in when the animation ends and then be able to click the logo and change its color. Currently when the animation ends the logo fills in but afterwards the color doesn't change when I click it. While the stroke is being drawn I can click inside the logo and it will change color but as soon as the animation ends it no longer changes color on click.
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<defs>
<style type="text/css">
.st0{fill:#fff;stroke:#F15A43;stroke-width:10;stroke-miterlimit:10;}
.st0 {
stroke-dasharray: 2100;
stroke-dashoffset: 0;
-webkit-animation: dash 2s linear forwards;
-o-animation: dash 2s linear forwards;
-moz-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
}
#logo.clickit .st0 {
fill: #000;
transistion: .8s;
}
#logo.load .st0 {
fill: #434343;
transition: .5s;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 2100;
}
to {
stroke-dashoffset: 0;
}
}
<script type="text/javascript">
var loader = document.getElementById('logo');
loader.addEventListener("animationend", function() {
this.classList.toggle('load');
}, false);
var clicker = document.querySelector('#logo');
clicker.addEventListener('click', function() {
this.classList.toggle('clickit');
});
</script>
</defs>
<path class="st0" d="M427.4,252.3c0,0,0,77.5-12.3,107.5c-12.9,31.6-51.1,39.6-51.1,39.6s-12.9,3.6-25.3,3.6
c-12.7,0-12.6-7.8-12.7-15.7c0-17.1,0-120.8,0-120.8l-0.1-46.2c0-33-11.4-33.6-12.6-33.7c-1.3,0-12.3,0.6-12.3,33.6v163.2
c0,0,0.6,29.2-25.7,29.9c-7.9,0-15.8,0-23.8,0c-9,0-18,0-26.9,0c-26.3-0.7-25.7-29.9-25.7-29.9V220.2c0-33-11-33.5-12.3-33.6
c-1.3,0-12.6,0.6-12.6,33.7l-0.1,46.2c0,0,0,103.7,0,120.8c0,7.9,0,15.7-12.7,15.7c-12.4,0-25.3-3.6-25.3-3.6s-38.2-8.1-51.1-39.6
c-12.3-30-12.3-107.5-12.3-107.5c0-160.7,38-160.7,63.4-160.7s50.7,26.7,50.7,26.7c11.1-17.9,38.3-31.5,63.4-31.7
c25.1,0.2,52.3,13.8,63.4,31.7c0,0,25.3-26.7,50.7-26.7S427.4,91.6,427.4,252.3z"/>
</svg>
The FULL HTML is
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div style="text-align: center; padding: 150px 0;">
<object>
<embed src="merchery icon.svg" width="40%" height="40%">
</object>
</div>
</body>
</html>

Related

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/

Change CSS to allow for control over DIV position using Javascript

I have adapted code from this page: Filling water animation to suit my needs as you can see below.
CSS
#banner {
width: 150px;
height: 150px;
background:red;
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.rotate {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
#banner .fill {
-webkit-transform: translate(0, -75px);
}
#banner #waveShape {
-webkit-animation-name: waveAction;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
width:300px;
height: 155px;
opacity:0.9;
fill: #fff;
#-webkit-keyframes waveAction {
0% {
-webkit-transform: translate(150px,0);
}
100% {
-webkit-transform: translate(0, 0);
}
}
HTML
<div id="banner">
<div class="fill">
<svg class="rotate" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="155px" viewBox="0 0 300 155" enable-background="new 0 0 300 155" xml:space="preserve">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
</svg>
</div>
</div>
Also...
Please see a screenshot of the output here.
However, I'd like to go one step further and control the level the 'water' is filled via a javascript function.
Usually, I would just control the X and Y position of the DIV that contains the waving SVG but that doesn't appear to work here.
I'd like to use this as a loading infographic but at the moment I can only control the 'water' level using...
}
#banner .fill {
-webkit-transform: translate(0, -75px);
}
I can use values of 0px (0%) to -155px (100%) but ideally I'd like to be able to set a percentage, perhaps by passing a variable in??
NOTE: I've rotated the original SVG because I was struggling to create a new one that worked correctly.
Any help would be much appreciated, I know I'm going to kick myself when I see the solution!! Thankyou.

Get rid of the .rotate and #banner .fill transforms
If you give the svg an id, you can adjust the top margin of the svg using a %
eg
el.style.marginTop = "75%";
Working example: (tested in chrome)
<style type="text/css">
#banner {
width: 150px;
height: 150px;
background:red;
overflow: hidden;
-webkit-backface-visibility: hidden;
}
#water {
margin-top: 99%;
}
#banner #waveShape {
-webkit-animation-name: waveAction;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 1s;
width:300px;
height: 155px;
opacity:0.9;
fill: #fff;
}
#keyframes waveAction {
0% {
-webkit-transform: translate(-150px,0);
transform: translate(-150px,0);
}
100% {
-webkit-transform: translate(150, 0);
transform: translate(150, 0);
}
}
</style>
<script>
function fill(percent) {
var el=document.getElementById("water");
if (el == null) {
alert("missing element");
return;
}
el.style.marginTop = (100-percent)+"%";
}
</script>
<div id="banner">
<div class="fill">
<svg id="water" class="rotate" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="155px" viewBox="0 0 300 155" enable-background="new 0 0 300 155" xml:space="preserve">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
</svg>
</div>
</div>
<script>
fill(25); //set fill to 25%
</script>
If that doesn't work you could try simply inserting an empty div before the svg and adjusting the height of that.

svg path stroke animation infinite

I have for example a svg path that it looks like a circle. I tried to make it animate more than once by using a for loop. but it does not work.
This is the javascript I use to animate the stroke.
var loading = function() {
path = new Array();
length = new Array();
path[0] = document.getElementById('loader1');
length = path[0].getTotalLength();
path[0].style.transition = path[0].style.WebkitTransition = 'none';
length[0] = length;
path[0].style.strokeDasharray = length + ' ' + length;
path[0].style.strokeDashoffset = length;
path[0].getBoundingClientRect();
path[0].style.transition = path[0].style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';
path[0].style.strokeDashoffset = '0';
};
loading();
I would like to make it like a gif that animates all the time. if anyone could help I would appreciate it!
This is an example http://jsfiddle.net/6Lqkc2qs/

A transition can only go between two styles. You need a CSS animation rather than a transition.
.container
{
position:absolute;
width:500px;
height:500px;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
#keyframes changedash {
from {
stroke-dashoffset: 502.7825622558594px;
stroke-dasharray: 502.7825622558594 502.7825622558594;
}
to {
stroke-dashoffset: 0px;
stroke-dasharray: 502.7825622558594 502.7825622558594;
}
}
path {
animation-duration: 1s;
animation-name: changedash;
animation-iteration-count: infinite;
animation-direction: normal;
}
<div class="container">
<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"
width="650px" height="650px" viewBox="0 0 650 650" enable-background="new 0 0 650 650" xml:space="preserve">
<path id="loader1" style="fill:none;stroke:#37c280;stroke-width:2;stroke-miterlimit:10;" d="M364.088,203.794c-15.126,2.056-30.18,9.004-44.175,14.744
c-12.281,5.037-21.834,12.462-30.789,22.188c-24.832,26.97-19.915,68.42,2.081,96.419c28.676,36.505,100.901,36.35,126.027-4.641
c14.806-24.154,17.992-67.197,0.505-90.905c-16.543-22.427-38.719-29.067-62.473-34.865" style="stroke-dasharray: 502.7825622558594 502.7825622558594; stroke-dashoffset: 502.7825622558594px;"/>
</svg>
</div>

How to run css transform animations without any hover?

I want to make a svg grow in side over a second. I have this code
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="js/plugin/jquery-2.1.4.min.js"></script>
<style>
/* Shorthand version */
.hub-icon-container svg {
position: relative;
/* Firefox */
-moz-transition: all 1s ease;
/* WebKit */
-webkit-transition: all 1s ease;
/* Opera */
-o-transition: all 1s ease;
/* Standard */
transition: all 1s ease;
}
.hub-icon-container svg:hover {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<a href="javascript:void(0)" class="hub-icon-container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="70px" height="70px" viewBox="0 0 70 70" enable-background="new 0 0 70 70" xml:space="preserve">
<g class="hub-icon">
<path fill="#9B59B6" d="M64.142 23.032L35.001 34.998l14.533 6.271 18.908-7.766c0.689-0.285 1.026-1.087 0.744-1.782l-3.265-7.946C65.635 23.079 64.835 22.747 64.142 23.032z"/>
<path fill="#F74ED7" d="M64.068 47.142L35.001 34.998l5.845 14.712 18.861 7.876c0.688 0.29 1.495-0.04 1.783-0.73l3.312-7.931C65.09 48.233 64.763 47.431 64.068 47.142z"/>
<path fill="#F2C40D" d="M46.97 64.138l-11.97-29.14 -6.268 14.534L36.5 68.44c0.284 0.689 1.084 1.026 1.779 0.743l7.946-3.265C46.919 65.634 47.256 64.833 46.97 64.138z"/>
<path fill="#E67E22" d="M22.863 64.069l12.138-29.071 -14.707 5.846 -7.877 18.859c-0.292 0.692 0.039 1.497 0.731 1.784l7.93 3.311C21.771 65.089 22.573 64.76 22.863 64.069z"/>
<path fill="#E74C3C" d="M5.865 46.966l29.136-11.968 -14.531-6.267L1.562 36.498c-0.693 0.285-1.028 1.089-0.741 1.78l3.263 7.947C4.369 46.919 5.168 47.254 5.865 46.966z"/>
<path fill="#19BC9C" d="M5.935 22.858l29.065 12.14 -5.839-14.707 -18.863-7.876c-0.693-0.29-1.495 0.039-1.785 0.73l-3.311 7.931C4.914 21.768 5.241 22.57 5.935 22.858z"/>
<path fill="#2ECC71" d="M23.032 5.862l11.969 29.136 6.269-14.528L33.506 1.563c-0.286-0.697-1.089-1.03-1.783-0.746l-7.944 3.268C23.084 4.366 22.75 5.168 23.032 5.862z"/>
<path fill="#3398DB" d="M47.142 5.934L35.001 34.998l14.707-5.841L57.589 10.3c0.286-0.697-0.044-1.499-0.735-1.789l-7.929-3.308C48.232 4.911 47.432 5.245 47.142 5.934z"/>
</g>
</svg>
</a>
</body>
</html>
But this works if I hover it. How can I get it to start growing (over 1 second) as soon as the page loads or I dynamically attach the class to it. If I remove the :hover, then it just starts off fully grows and does not animate. Does anyone know how to fix this?
Thanks

use a keyframe as the following
/* Shorthand version */
.hub-icon-container svg {
position: relative;
/* Firefox */
-moz-transition: all 1s ease;
/* WebKit */
-webkit-transition: all 1s ease;
/* Opera */
-o-transition: all 1s ease;
/* Standard */
transition: all 1s ease;
}
.hub-icon-container svg:hover {
width: 500px;
height: 500px;
}
.hub-icon-container svg {
-webkit-animation: blowup 5s infinite; /* Safari 4+ */
-moz-animation: blowup 5s infinite;/* Fx 5+ */
-o-animation: blowup 5s infinite; /* Opera 12+ */
animation: blowup 5s infinite;/* IE 10+, Fx 29+ */
}
http://jsfiddle.net/dshun/985bzyu8/

Develop Reference

JavaScript is the programming language of the Web.

2 javascript functions conflicting - javascript

Related

Endless draw/undraw SVG path loop using vanillaJS

How can achieve an invisible pencil effect with SVG text? [duplicate]

Change CSS to allow for control over DIV position using Javascript

svg path stroke animation infinite

How to run css transform animations without any hover?

Categories

Resources