put my polyline in an infinite loop? - javascript

Ok Guys here is what I have. I am looping through each dash in the polyline which I rounded to 984, its really like 984 and some change. But anyways I am seeing no movement, what I want is the lines to move around the polyline in unison. Can anyone see why this polyline is moving as the dashoffset continuously is being changed. Then i re-initate the function. Does anyone see why this guy isnt moving at all? please and thanks. I could be really fudging this up but thought Ide see if I can get another input.
loop();
function loop(){
var counter = 0;
var polyline = new Array();
for(var i = 0; i< 984; i++){
polyline[0] = getElementById('poly');
polyline[0].style.strokeDashoffset = i;
}
loop();
}
<svg id="square" width="900" height="400">
<polyline id="poly" style="stroke-linejoin: round; fill:none; stroke:black; stroke-width:8;stroke-dasharray:492.44289 492.44289;
stroke-dashoffset:0;"
3 points="0,200
450,0
900,200
450,400
0,198.4"
/>
</svg>


That infinite loop you have there seems pretty useless. You'd want to use requestAnimationFrame instead of calling the loop directly, and the loop doesn't seem to do anything useful (just sets the dashoffset to the last i value). But you don't even have to use scripting to animate the stroke.
<svg viewBox="-8 -8 916 416">
<polyline points="0,200
450,0
900,200
450,400
0,198.4" />
</svg>
and css:
polyline {
stroke-linejoin: round;
fill:red;
stroke:black;
stroke-width:8;
stroke-dasharray:492.44289 492.44289;
stroke-dashoffset:0;
animation-duration: 1s;
animation-name: march;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
#keyframes march {
0% {
stroke-dashoffset: 0;
}
50% {
stroke-dashoffset: 492.44289;
}
100% {
stroke-dashoffset: 984.88578;
}
}
See fiddle. And if you want to get rid of the ugly left hand corner you might try using a polygon instead of a polyline, like this.

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>

SVG Line Animation - Squishy Effect

***Update - solution listed below
I’ve got an svg animation bug I could use some expert help on.
I’m trying to create a similar animation that you can see here (http://springsummer.dk/) when you hover over some of their work (maybe half way down the page) — a line comes in and up and then kind of squishes to the right height.
I recreated this effect in a simple code pen that can be seen here: https://codepen.io/callmegoon/pen/EQRMjG (see code below).
However, in my testing, I came to learn that Safari does not support the negative stroke-dashoffset that I’m using in the animation.
Soooo, I’m trying to figure out a new solution - any ideas? Totally open to a completely different way to accomplish this (maybe a js solution?), but everything I’m doing hasn’t been working. My biggest issue has been the squish part at the end where the back/bottom of the line comes up - I haven’t figured out another way to accomplish that without the negative stroke-dashoffset.
Thanks!
/* Draw Line Animations */
#keyframes drawLine {
0% {
stroke-dasharray: 170;
stroke-dashoffset: 170;
}
100% {
stroke-dasharray: 170;
stroke-dashoffset: -50;
}
}
#keyframes unDrawLine {
0% {
stroke-dasharray: 170;
stroke-dashoffset: -50;
}
100% {
stroke-dasharray: 170;
stroke-dashoffset: 170;
}
}
.box {
background: red;
width: 500px;
height: 500px;
position: relative;
}
.box:hover .line {
animation: drawLine .6s cubic-bezier(.67,.02,.27,.95) forwards;
}
.line {
width: 4px;
height: 170px;
fill: none;
stroke: #fff;
stroke-width: 4px;
transform: rotate(195deg);
display: block;
position: absolute;
left: 50px;
bottom: 50px;
stroke-dasharray: 170;
stroke-dashoffset: 170;
animation: unDrawLine .6s cubic-bezier(.67,.02,.27,.95) forwards;
}
<div class="box">
<svg class="line" viewBox="0 0 4 170" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="0" y2="170" />
</svg>
</div>
Solution (uses GreenSock)
I was able to find a solution that perfectly matched the effect I was going for while also working in Safari - it just required GSAP and the draw plugin.
Solution demo here...
https://codepen.io/anon/pen/MQqwdo
Solution explanation...
The hack/fix/trick is just slightly animating one of the coordinates of the points in the line - not noticeable to users.

Radial Animation differs from desktop to mobile

I just started working with SVG in the last couple days and I've built a simple radial animation for a pomodoro application. I've come to find that the starting point of the animation differs from what I have it set to and see on a desktop browser (0 deg). The below screenshot from my iPhone 6 in Safari shows what I am seeing (same result in Chrome and Firefox as well). You can see this live for yourself here.
The circle's initial start path was at 90 deg so I applied the following to get the desired starting point:
<circle className={className} transform="rotate(-90, 50, 60)">
I've spent the morning searching through posts and the only thing I really found related to what I'm seeing is a comment at the bottom of this answer here. I went to the spec and read up on it, but I'm not really understanding if I am better off drawing the circle using path or this semi-circle idea that was purposed in the comment (which I'm not understanding at all). It's my understanding now that in the mobile browsers however <circle /> is interpreted the initial starting point is different than in a desktop browser (maybe I'm wrong and this is a OS related issue?).
Can anyone explain how to solve this? I'm not looking to have my problem solved by someone, just a nudge in the right direction. I've been reading through posts and googling for the last 2 hours with no luck and not much more understanding of the problem at large. Thank you in advance for your help.
Full Code for the <circle />:
import PropTypes from 'prop-types'
import { styles } from '../../lib'
/**
* #function Circle
* #description renders <circle /> that is conditionally animated.
*
* #prop {String} className
* #prop {Number} duration - desired length of timer formatted to seconds
* #returns React Element
*/
const Circle = ({ className, duration }) => (
<circle className={className} transform="rotate(-90, 50, 60)">
<style jsx>{`
circle {
cx: 50;
cy: 60;
fill: transparent;
r: 35;
stroke-width: 4;
}
.outer {
stroke: ${styles.colors.highLight};
}
.overlay {
stroke: none;
stroke-dasharray: 219; /* NOTE: https://stackoverflow.com/a/33922201/6520579 */
stroke-linecap: round;
}
.cooldownAnimation {
animation: ${duration}s linear normal forwards cooldown;
stroke: ${styles.colors.text};
}
.timerAnimation {
-webkit-animation: ${duration}s linear normal forwards timer;
animation: ${duration}s linear normal forwards timer;
stroke: ${styles.colors.text};
}
#-webkit-keyframes timer {
from {
stroke-dashoffset: 219;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes timer {
from {
stroke-dashoffset: 219;
}
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes cooldown {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 219;
}
}
#keyframes cooldown {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 219;
}
}
#media (orientation: landscape) {
circle {
r: 50;
}
.overlay {
stroke-dasharray: 314;
}
#-webkit-keyframes timer {
from {
stroke-dashoffset: 314;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes timer {
from {
stroke-dashoffset: 314;
}
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes cooldown {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 314;
}
}
#keyframes cooldown {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 314;
}
}
}
`}</style>
</circle>
)
Circle.propTypes = {
className: PropTypes.string,
duration: PropTypes.number
}
export default Circle

It seems I have fixed the issue and that it was two-fold:
It was in part to how I was writing the CSS. I normally work in Chrome and it didn't cause a fuss over what I was doing; however, after looking in the FireFox dev-tools and seeing that my <circle /> and animation of the stroke was not even visible I found out that...
this code is not valid:
circle {
cx: 50; /* NOT VALID */
cy: 60; /* NOT VALID */
fill: transparent;
r: 35; /* NOT VALID */
stroke-width: 4;
}
These attributes MUST be passed on the element:
<circle
className={className}
cx="50"
cy="60"
r="35"
transform="rotate(-90, 50, 60)"
>
After reading through comments of this article and finding this pen I found out that I did not need to be using stroke-dashoffset and could instead use only stroke-dasharray; but instead of writing in shorthand:
shorthand method:
.overlay {
stroke: none;
stroke-dasharray: 219; /* Set both length of stroke & gap to 219px */
stroke-linecap: round;
}
longhand method:
.overlay {
stroke: none;
stroke-dasharray: 0 219; /* Set stroke length to 0px & gap length to 219px */
stroke-linecap: round;
}
Now in the #keyframes I just had to switch to stroke-dasharray and travel from no stroke length to a length of the entire circumference of the circle and visa versa for the the reverse animation.
#keyframes timer {
from {
stroke-dasharray: 0 219;
}
to {
stroke-dasharray: 219 0;
}
}
In doing this the animation is now functioning as desired across Chrome, FireFox, & Safari on both my iPhone 6 & iPad mini 4. I have no non-Apple devices to test this further unfortunately. I hope this can help out the next guy or gal who runs into this issue, Happy Coding!

How to create an responsive animated SVG donut with CSS?

How to create an cross browser (Mozilla, Chrome, Safari), animated SVG donut?
Currently I got this: https://jsfiddle.net/odnmhvm6/1/
This seems to be fine and exactly what I want (macOS, Chrome) but some problems appear: (ordered by priority)
Its oversized r="3200" to fit mostly all resolutions, how to make it responsive? -> Later I would add content in the inner-circle (solved by viewBox attribute )
Do not work on mobile (iPhone 6, Safari & Chrome) (done by using fixed values instead of calc())
Without the CSS Offset of .circle > stroke-dashoffset > -50 it laggs at start
I'm not that comfortable with SVG and that's the best result I reached so far, maybe I made it completly wrong for my purpose?
It should be responsive, fill out the complete screen always and work well with the common browsers. JS would be fine too, but is it necessary to reach it?
.item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
svg {
width: 100%;
height: 100%;
}
.circle {
stroke-dasharray: 20106.192982975;
stroke-dashoffset: 20106.192982975;
-webkit-animation: circle-in 3s ease-in-out forwards, fade-in 0.5s ease-out forwards;
}
#-webkit-keyframes circle-in {
to {
stroke-dashoffset: 0;
}
}
<div class="item">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<g>
<circle id="circle" class="circle" r="3200" cy="50%" cx="50%" stroke-width="6200" stroke="#000000" fill="none"/>
</g>
</svg>
</div>

SVG "circle" element radius attribute "r" does not transition in Firefox but does just fine in Chrome

I'm trying to make an SVG circle bigger on a click event and it works just fine in Chrome 52 (haven't tried it on older versions) but in Firefox the CSS transition has no effect. Is there a way to make Firefox behave the same way as Chrome without too much JavaScript?
HTML:
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="50%" cy="50%" r="15"/>
</svg>
CSS:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
circle {
-webkit-transition: ease 0.7s all;
-moz-transition: ease 0.7s all;
-ms-transition: ease 0.7s all;
-o-transition: ease 0.7s all;
transition: ease 0.7s all;
}
JS:
$(document).ready(function() {
$("body").click(function() {
if($("circle").attr("r") == 15) {
$("circle").attr("r", function() {
if ($(window).height() > $(window).width()) {
return Math.sqrt(Math.pow($(window).width(), 2) + Math.pow($(window).height(), 2));
}
return (Math.sqrt(Math.pow($(window).width(), 2) + Math.pow($(window).height(), 2)));
});
} else {
$("circle").attr("r", 15);
}
});
});
https://jsfiddle.net/xgscn4f1/

In SVG 1.1, which is the current standard, only certain attributes can by styled with CSS. The list of those properties can be found here:
SVG 1.1 property index
Note that r is not in this list.
In the upcoming SVG2 standard, most attributes will be stylable. But browsers have only just started to implement SVG2 features. Right now you can modify and transition r in Chrome, but not yet in other browsers.
You will need to use another technique to animate r. Either using SVG SMIL animation, or use one of the various SVG JS libraries that have animation functions.

You can animate any attributes of SVG elements easy with pure JS, including radius of circle, just give ID to element:
var c1 = document.getElementById("c1");
var strokeLength = 300;
c1.setAttribute("stroke-dasharray", "" + (strokeLength) + " 700");
function changeR(el) {
var n1 = 0;
var ch1 = 1;
var elT = setInterval(elTF, 5);
function elTF() {
el.setAttribute("r", n1);
if (n1 == 0) {
ch1 = 1;
} else if (n1 == 100) {
ch1 = -1;
}
n1 += ch1;
}
}
changeR(c1);
<svg width="250" height="200">
<circle id="c1" cx="100" cy="100" r="50" fill="transparent" stroke="blue" stroke-width="10" stroke-linecap="butt" stroke-dasharray="300 500" />
</svg>
Can animate stroke length too, via "stroke-dasharray" attribute, first parameter, second is for empty space.

Categories

Resources