SVG transform circle into simple line - javascript

I'm trying to animate a simple SVG circle (white background or any other color) so that when you hover over it it becomes a simple vertical line (in other words, it sort of flattens into a line) and on mouse out, well, then it animates into a circle again.
Yet I can't find much information on how to approach it... Any and every help will be greatly appreciated!


An example of the animation using scale
<svg width="500" height="150">
<circle cx="60" cy="60" r="40" style="stroke:#006600; fill:#00cc00" >
<animateTransform
attributeName="transform"
begin="0s"
dur="2s"
type="scale"
from="1 1"
to="1 0.01"
repeatCount="indefinite"
/>
</circle>
</svg>

Related

How to draw a flickering circle in JavaScript

I have no idea how to draw this circle. Please give me a direction that how to proceed this question. Thank everyone for helping me.
I try to draw a flickering circle by using blink(), but it was nothing happened. And i find that the blink() function is no longer work.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50">
<animate
attributeName="fill"
values="black;white;black"
dur="1s"
repeatCount="indefinite" />
</circle
</svg>

SVG SMIL Animation not animating

I need to create an SVG animation of 2 steps, for that I tried with JS. It worked but the animation wasn't playing "correctly" let's say it just go from step a to step b without anything between.
After a few research I disabled my js to try to animate my elt with SMIL using from and to attributes.
which gives us that code:
<svg class="ronce-svg" id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1165.1 826.09" style="transition: 0.5s ease;">
<path id="ronces" d="M1031,443.55s-27.35-7.84-66.35-14.74l-3.93-47.72L938.8,424.68c-38.46-5.44-83.57-8.69-124.23-3.51l-26.31-47.09-7.33,53.76a145.32,145.32,0,0,0-36.48,15.48c-23.37,14.34-43.09,36.27-61.07,62.1l-47.11-12.05,32.25,34.76c-14.32,23.15-27.83,48.3-41.63,73.29L578,591.18l31.29,41.37c-17,29.13-35,56.76-56,79.31l-42.52-23.81L534,730.28q-5,4.2-10.22,8c-29.72,21.53-58.5,27.39-88.39,27.21L424.26,732.6l-18.1,31.15c-32.43-3.22-66.83-9.71-105.61-8.24l-16.65-27-10.49,29.35a269.93,269.93,0,0,0-69.1,19.35q-3.51,1.5-6.93,3.15l-25.64-21.1,5.61,32.64c-28.06,18.94-50.27,46.19-69.52,77.19L72.28,858.31l25.19,28.27c-14.65,25.84-27.74,53.56-40.77,80.79l-42.11-9.08,30.76,32.57c-18,36.79-36.82,71.39-60.18,97.69l-25.95-17.48,12,31.67c-13.43,12.16-28.36,21.65-45.38,27.55C-202.69,1174.87-84.39,1199-84.39,1199s6.61,2,18.35.77a90,90,0,0,0,15.77-3.15c3.31-1,6.84-2.17,10.55-3.66,27.87-11.2,66.64-38.81,110.09-104.5q2.85-4.29,5.72-8.82l53.6,12.33-36.28-41.3c21-37.17,37-68.42,50.9-94.67l30.62,8.69L156,934.11c10.42-19,19.92-34.91,30-48.16l32.3,11.45-20-26a122.9,122.9,0,0,1,40.53-28.58l22,23.92-3.41-30.73c21.53-6.46,48.21-10.24,82.92-12.3l6.58-.37L358,853.22l12.16-30.74c47.87-1.32,87.45.8,122.18-2.81L516,856.05l3.65-40.78c43.1-9.87,79.2-34.33,116.42-95l49.48,11.16-33.44-39.48q3.66-6.92,7.33-14.34c12.86-25.93,22.77-49.8,31.36-71.57l56-.42-42.28-34.89c10-25.45,19.36-47.26,31.75-65.38L787.9,525.5l-28.51-46.1c22-18.62,52.7-30.79,100.57-36.39l26.21,49.73L897,440.15C933.07,438.57,977,439.69,1031,443.55Z"
transform="translate(134.07 -374.08);transition:0.5s ease"
/>
<animate
begin="0"
xlink:href="#ronces"
attributeName="d"
attributeType="XML"
from="M1031,443.55s-27.35-7.84-66.35-14.74l-3.93-47.72L938.8,424.68c-38.46-5.44-83.57-8.69-124.23-3.51l-26.31-47.09-7.33,53.76a145.32,145.32,0,0,0-36.48,15.48c-23.37,14.34-43.09,36.27-61.07,62.1l-47.11-12.05,32.25,34.76c-14.32,23.15-27.83,48.3-41.63,73.29L578,591.18l31.29,41.37c-17,29.13-35,56.76-56,79.31l-42.52-23.81L534,730.28q-5,4.2-10.22,8c-29.72,21.53-58.5,27.39-88.39,27.21L424.26,732.6l-18.1,31.15c-32.43-3.22-66.83-9.71-105.61-8.24l-16.65-27-10.49,29.35a269.93,269.93,0,0,0-69.1,19.35q-3.51,1.5-6.93,3.15l-25.64-21.1,5.61,32.64c-28.06,18.94-50.27,46.19-69.52,77.19L72.28,858.31l25.19,28.27c-14.65,25.84-27.74,53.56-40.77,80.79l-42.11-9.08,30.76,32.57c-18,36.79-36.82,71.39-60.18,97.69l-25.95-17.48,12,31.67c-13.43,12.16-28.36,21.65-45.38,27.55C-202.69,1174.87-84.39,1199-84.39,1199s6.61,2,18.35.77a90,90,0,0,0,15.77-3.15c3.31-1,6.84-2.17,10.55-3.66,27.87-11.2,66.64-38.81,110.09-104.5q2.85-4.29,5.72-8.82l53.6,12.33-36.28-41.3c21-37.17,37-68.42,50.9-94.67l30.62,8.69L156,934.11c10.42-19,19.92-34.91,30-48.16l32.3,11.45-20-26a122.9,122.9,0,0,1,40.53-28.58l22,23.92-3.41-30.73c21.53-6.46,48.21-10.24,82.92-12.3l6.58-.37L358,853.22l12.16-30.74c47.87-1.32,87.45.8,122.18-2.81L516,856.05l3.65-40.78c43.1-9.87,79.2-34.33,116.42-95l49.48,11.16-33.44-39.48q3.66-6.92,7.33-14.34c12.86-25.93,22.77-49.8,31.36-71.57l56-.42-42.28-34.89c10-25.45,19.36-47.26,31.75-65.38L787.9,525.5l-28.51-46.1c22-18.62,52.7-30.79,100.57-36.39l26.21,49.73L897,440.15C933.07,438.57,977,439.69,1031,443.55Z"
to="M970.58,357.22s-2,28.38-8.85,67.39l43.5,20-48.47,5.71c-8,38-20.42,81.5-39.19,117.94l35.25,40.83-53-11.5a145,145,0,0,1-27,29c-21.47,17.06-48.81,28.09-79.24,36.16l-4.78,48.39-21.64-42.2c-26.65,5.54-54.9,9.63-83.11,14.06l-7.09,49.41-28.17-43.55c-33.17,6-65.31,13.47-93.68,25.51l7.82,48.1-31.74-36.25q-5.65,3.25-11,6.87c-30.39,20.57-45.74,45.61-55.8,73.75l27.09,21.69L456,834.88c-8.07,31.58-13.74,66.12-28.38,102.06l19.67,24.88-31.17-.19A269.7,269.7,0,0,1,374.27,1020c-1.74,1.86-3.51,3.68-5.32,5.44L380,1056.7l-28.75-16.44c-27.39,19.89-60.59,31.44-96.31,38.93l-2,37.09-18-33.34c-29.29,4.93-59.81,7.75-89.86,10.69l-5.87,42.67-20.08-40c-40.74,4.38-79.67,10.18-112.39,23.14l7.56,30.36-25.67-22.07c-16,8.46-30,19.24-41.41,33.22C-138.6,1266.4-120.81,1147-120.81,1147s.38-6.89,5.55-17.5a89.74,89.74,0,0,1,8.36-13.74,110.18,110.18,0,0,1,7-8.67c20.06-22.35,59.27-49.34,135.85-67.71q5-1.2,10.25-2.36L53,982.42l26.39,48.22c42.11-7,77-11.4,106.37-15.45l2.31-31.75,22.28,28.21c21.43-3.29,39.61-6.78,55.5-11.68l.28-34.27,17.55,27.72a123.08,123.08,0,0,0,40.71-28.32l-14.94-28.89,27.72,13.71c13.43-18,26.1-41.8,39.91-73.71q1.32-3,2.6-6.06l-24.26-20.58,33-.92c17.6-44.53,29.16-82.45,44.42-113.85l-26.07-34.71,39.57,10.52c24-37.12,59.34-62.69,129.12-76.89l6.43-50.32,25.67,44.92q7.75-1.05,16-2c28.77-3.21,54.58-4.36,78-5l19.56-52.51,18.33,51.66c27.34-.7,51-2,72.29-7.47l-1.33-55.38L844,600.2c25-14.29,47-39,68.59-82.05l-37.76-41.64,53.1,7.86C941.75,451,955.73,409.28,970.58,357.22Z"
value="M1031,443.55s-27.35-7.84-66.35-14.74l-3.93-47.72L938.8,424.68c-38.46-5.44-83.57-8.69-124.23-3.51l-26.31-47.09-7.33,53.76a145.32,145.32,0,0,0-36.48,15.48c-23.37,14.34-43.09,36.27-61.07,62.1l-47.11-12.05,32.25,34.76c-14.32,23.15-27.83,48.3-41.63,73.29L578,591.18l31.29,41.37c-17,29.13-35,56.76-56,79.31l-42.52-23.81L534,730.28q-5,4.2-10.22,8c-29.72,21.53-58.5,27.39-88.39,27.21L424.26,732.6l-18.1,31.15c-32.43-3.22-66.83-9.71-105.61-8.24l-16.65-27-10.49,29.35a269.93,269.93,0,0,0-69.1,19.35q-3.51,1.5-6.93,3.15l-25.64-21.1,5.61,32.64c-28.06,18.94-50.27,46.19-69.52,77.19L72.28,858.31l25.19,28.27c-14.65,25.84-27.74,53.56-40.77,80.79l-42.11-9.08,30.76,32.57c-18,36.79-36.82,71.39-60.18,97.69l-25.95-17.48,12,31.67c-13.43,12.16-28.36,21.65-45.38,27.55C-202.69,1174.87-84.39,1199-84.39,1199s6.61,2,18.35.77a90,90,0,0,0,15.77-3.15c3.31-1,6.84-2.17,10.55-3.66,27.87-11.2,66.64-38.81,110.09-104.5q2.85-4.29,5.72-8.82l53.6,12.33-36.28-41.3c21-37.17,37-68.42,50.9-94.67l30.62,8.69L156,934.11c10.42-19,19.92-34.91,30-48.16l32.3,11.45-20-26a122.9,122.9,0,0,1,40.53-28.58l22,23.92-3.41-30.73c21.53-6.46,48.21-10.24,82.92-12.3l6.58-.37L358,853.22l12.16-30.74c47.87-1.32,87.45.8,122.18-2.81L516,856.05l3.65-40.78c43.1-9.87,79.2-34.33,116.42-95l49.48,11.16-33.44-39.48q3.66-6.92,7.33-14.34c12.86-25.93,22.77-49.8,31.36-71.57l56-.42-42.28-34.89c10-25.45,19.36-47.26,31.75-65.38L787.9,525.5l-28.51-46.1c22-18.62,52.7-30.79,100.57-36.39l26.21,49.73L897,440.15C933.07,438.57,977,439.69,1031,443.55Z;M970.58,357.22s-2,28.38-8.85,67.39l43.5,20-48.47,5.71c-8,38-20.42,81.5-39.19,117.94l35.25,40.83-53-11.5a145,145,0,0,1-27,29c-21.47,17.06-48.81,28.09-79.24,36.16l-4.78,48.39-21.64-42.2c-26.65,5.54-54.9,9.63-83.11,14.06l-7.09,49.41-28.17-43.55c-33.17,6-65.31,13.47-93.68,25.51l7.82,48.1-31.74-36.25q-5.65,3.25-11,6.87c-30.39,20.57-45.74,45.61-55.8,73.75l27.09,21.69L456,834.88c-8.07,31.58-13.74,66.12-28.38,102.06l19.67,24.88-31.17-.19A269.7,269.7,0,0,1,374.27,1020c-1.74,1.86-3.51,3.68-5.32,5.44L380,1056.7l-28.75-16.44c-27.39,19.89-60.59,31.44-96.31,38.93l-2,37.09-18-33.34c-29.29,4.93-59.81,7.75-89.86,10.69l-5.87,42.67-20.08-40c-40.74,4.38-79.67,10.18-112.39,23.14l7.56,30.36-25.67-22.07c-16,8.46-30,19.24-41.41,33.22C-138.6,1266.4-120.81,1147-120.81,1147s.38-6.89,5.55-17.5a89.74,89.74,0,0,1,8.36-13.74,110.18,110.18,0,0,1,7-8.67c20.06-22.35,59.27-49.34,135.85-67.71q5-1.2,10.25-2.36L53,982.42l26.39,48.22c42.11-7,77-11.4,106.37-15.45l2.31-31.75,22.28,28.21c21.43-3.29,39.61-6.78,55.5-11.68l.28-34.27,17.55,27.72a123.08,123.08,0,0,0,40.71-28.32l-14.94-28.89,27.72,13.71c13.43-18,26.1-41.8,39.91-73.71q1.32-3,2.6-6.06l-24.26-20.58,33-.92c17.6-44.53,29.16-82.45,44.42-113.85l-26.07-34.71,39.57,10.52c24-37.12,59.34-62.69,129.12-76.89l6.43-50.32,25.67,44.92q7.75-1.05,16-2c28.77-3.21,54.58-4.36,78-5l19.56-52.51,18.33,51.66c27.34-.7,51-2,72.29-7.47l-1.33-55.38L844,600.2c25-14.29,47-39,68.59-82.05l-37.76-41.64,53.1,7.86C941.75,451,955.73,409.28,970.58,357.22Z"
dur="1s"
repeatCount="indefinite"
fill="freeze"
/>
</svg>
But sadly it does exactly the same as the js script I made.
(The thing I want to animate is something I drew on Illustrator and that I just miror with a SVG animation)

How to draw an animated SVG to a Canvas at a specific time offset?

Consider any animated SVG defined as HTML <svg> tag. How do I draw the SVG's content at a specific time index to a canvas using client-side JS?
What I am looking for is a function drawAnimatedSVG(fromSVG, toCanvas, animationOffset) that I can invoke with an SVG and Canvas DOM Node and number specifying the amount of secods (as floating point value) elapsed since the animation's beginning. The drawn result should only be a still image. I know that an SVG Element has a setCurrentTime method, but I can't figure out how to get the actual image at a specific time.
Please note that just waiting or delaying is not an option for me, as the SVGs I am dealing with contain animations lasting for minutes. That's why this answer does not help me.
Example SVG:
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" rx="15" />
<circle r="5" fill="blue">
<animateTransform
attributeName="transform"
type="translate"
from="10,10" to="90,90"
begin="0" dur="2" repeatCount="0" />
<animateTransform
attributeName="transform"
type="translate"
from="90,90" to="10,90"
begin="2" dur="2" repeatCount="0"/>
<animateTransform
attributeName="transform"
type="translate"
from="10,90" to="10,10"
begin="4" fill="freeze"
dur="2" repeatCount="0"/>
</circle>
</svg>

Draw arrows between two circles using svg

I am using svg to draw several arcs with arcs on the end between 2 circles with the help of Bezier quadratic path.
Here is the final effect I want to achieve.
http://www.apcjones.com/arrows/
I already had some idea about how to draw several arcs(without arrows) between two circles.
But when I tried to draw several arcs(with arrows on the end) between 2 circles, something weird happened.
I am using here and I set refX to "radius" of the circle to offset the line inside the circle. But I soon realized that simply using refX does not solve the problem, the angle of the marker should also be adjusted(I do not know how).
current effect
Thanks for the help!

In this case you may need to use markers.
<svg width="200" height="100" viewBox="0 0 200 100">
<defs>
<desc>Define the marker</desc>
<marker id="arrow" refX="4" refY="3" markerWidth="6" markerHeight="6" orient="auto" stroke="black">
<path d="M 0 0 L 4 3 L 0 6 Z"></path>
</marker>
</defs>
<desc>Use the markers</desc>
<circle cx="160" cy="50" r="20" />
<circle cx="50" cy="50" r="20" />
<line x1="70" y1="50" x2="140" y2="50" fill="none" stroke="black" stroke-width="2" marker-end="url(#arrow)"></line>
</svg>
If you need more help please edit your question and add your SVG code

svg path animate whole whole path

I have a simple path that animates with from="0%" to="100%", but only a part of the path shows up. How can I animate from the beggining to the end of the path?
<svg>
<path d="M100,100 S150,100 200,150 S150,150 100,200 S100,200 100,300 S200,300 300,300 S200,300 100,200 S100,200 100,300 S200,300 300,300 S315,300 330,200" stroke="black" stroke-width="1" fill="none" stroke-dasharray="100000,100000" id="foo">
<animate xlink:href="#foo" attributeName="stroke-dasharray" dur="1s" fill="freeze" from="0%" to="100%"></animate>
</path>
</svg>
http://jsfiddle.net/8g2k2cy4/

Ok, found a way to it, maybe there are better ways...
So the svg path element has a .getTotalLength(); method that returns the path length. This way I can apply/use that in the animate element via JavaScript like:
var animEl = document.querySelector('animate');
animEl.setAttribute('to', animEl.parentNode.getTotalLength());
http://jsfiddle.net/8g2k2cy4/1/

Categories