I want to animate 2 svg paths.
for this thy need similiar nodes.
if path1 has a bezier, path2 must have it too at same node.
So I insert c0 0 0 0 0 0 to path2.
but it changes the 2nd shape.
What can I do?
<html>
<title>Page Title</title>
</head>
<body>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="400.000000pt" height="400.000000pt" viewBox="0 0 400.000000 400.000000"
preserveAspectRatio="xMidYMid meet">
<g
fill="#000000" stroke="none">
<path fill ="red" d= "m50 50 50 50 100 100 50 100" />
<path d= "m0 0 50 50 100 100 50 100" />
<path fill = "blue" d= "m0 0 c0 0 0 0 0 0 50 50 100 100 50 100" />
</g>
</svg>
</body>
</html>
The path definition
m 0 0 50 50 100 100 50 100
Is equivalent to
m 0 0
l 50 50
l 100 100
l 50 100
An equivalent bezier curve to that might be
m 0 0
c 0 0 50 50 50 50
c 0 0 100 100 100 100
c 0 0 50 100 50 100"
I am choosing to put the first control point at the start of the line/bezier. And the second at the end. I could have chosen to put them both at the start, or both at the end.
If you were using the path for animated motion, you should place the control points at the 1/3 and 2/3 point along the line. Eg.:
m 0 0
c 16.7 16.7 33.3 33.3 50 50
c 33.3 33.3 66.7 66.7 100 100
c 0 0 16.7 33.3 33.3 66.7 50 100"
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="400.000000pt" height="400.000000pt" viewBox="0 0 400.000000 400.000000"
preserveAspectRatio="xMidYMid meet">
<g fill="#000000" stroke="none">
<path fill ="red" d= "m50 50 50 50 100 100 50 100" />
<path d= "m0 0 50 50 100 100 50 100" />
<path fill = "blue" d= "
m 0 0
c 0 0 50 50 50 50
c 0 0 100 100 100 100
c 0 0 50 100 50 100" />
</g>
</svg>
Related
This is the image which I need to create.
I need to make this image with svg or with figma in png format. the black portion will be transparent. please help me. thanks
This is a very simple path.
M 0 100
Move to (0, 100) (bottom left)
H 100
Horizontal line to bottom right
V 0
Vertical line to top right
A 100 100 0 0 1 0 100
Semicircular arc of radius 100, clockwise, to (0, 100) (bottom right).
Z
Close path
svg {
width: 200px;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M 0 100 H 100 V 0 A 100 100 0 0 1 0 100 Z" fill="black"/>
</svg>
You can create a rectangle that is masked off by a circle.
body {
background-color: silver;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200">
<defs>
<mask id="m1">
<rect width="100" height="100" fill="white" />
<circle r="100" fill="black"/>
</mask>
</defs>
<rect width="100" height="100" fill="white" mask="url(#m1)"/>
</svg>
I'm trying to animate the following GIF in SVG.
Code:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="100" height="100">
<path d="M18.53.359h.225A16.684 16.684 0 0130.56 5.12a16.902 16.902 0 014.813 12.007A18.372 18.372 0 0130.18 29.66l-.671.672a18.215 18.215 0 01-11.99 5.163l-.436.012h-.13A16.757 16.757 0 015.12 30.662a16.845 16.845 0 01-4.74-12.08A18.35 18.35 0 015.513 6.114l.307-.311A18.203 18.203 0 0118.095.371l.435-.012zM16.413 2.6c-3.508 0-6.778 1.443-9.558 4.253-3.306 3.299-4.719 7.273-4.102 11.522.495 3.425 2.323 6.938 5.012 9.63l.31.303c4.452 4.235 13.288 7.796 20.265 1.086l.248-.244.236-.248.354-.344a12.592 12.592 0 003.686-11.167 17.578 17.578 0 00-4.95-9.618c-2.689-2.699-6.17-4.532-9.597-5.032-.63-.093-1.267-.14-1.904-.141z">
<animate
attributeName="d"
from="start_path"
to="end_path"
dur="0.66s"
fill="freeze"
repeatCount="indefinite"
/>
</path>
</svg>
The solution I have is using clip-path but just wanna try using path coordinates if possible.
Perhaps the simplest solution is to use a circle as a mask. Then animate the dash array of the circle.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="100" height="100">
<defs>
<mask id="wipe">
<circle cx="18" cy="18" r="16"
fill="none" stroke="white" stroke-width="5" stroke-dasharray="100.6" stroke-dashoffset="100.6"
transform="rotate(-35,18,18)">
<animate attributeName="stroke-dashoffset"
from="100.6"
to="0"
dur="0.66s"
repeatCount="indefinite"/>
</circle>
</mask>
</defs>
<path d="M18.53.359h.225A16.684 16.684 0 0130.56 5.12a16.902 16.902 0 014.813 12.007A18.372 18.372 0 0130.18 29.66l-.671.672a18.215 18.215 0 01-11.99 5.163l-.436.012h-.13A16.757 16.757 0 015.12 30.662a16.845 16.845 0 01-4.74-12.08A18.35 18.35 0 015.513 6.114l.307-.311A18.203 18.203 0 0118.095.371l.435-.012zM16.413 2.6c-3.508 0-6.778 1.443-9.558 4.253-3.306 3.299-4.719 7.273-4.102 11.522.495 3.425 2.323 6.938 5.012 9.63l.31.303c4.452 4.235 13.288 7.796 20.265 1.086l.248-.244.236-.248.354-.344a12.592 12.592 0 003.686-11.167 17.578 17.578 0 00-4.95-9.618c-2.689-2.699-6.17-4.532-9.597-5.032-.63-.093-1.267-.14-1.904-.141z" mask="url(#wipe)"/>
</svg>
You'll probably want to tweak the animation to add a short pause at the end. And to fade the colours as per your GIF version.
Here is path d solution with 2 arcs, whithout stroke, only fill:
let r = 90,
rx = 70/90,
ry = 85/90,
circ = Math.PI*2;
requestAnimationFrame(draw)
function draw(t) {
t = (t/1000)%1;
let a = t*circ,
la = a % circ > Math.PI?1:0,
x = r * Math.cos(a),
y = r * Math.sin(a);
path.setAttribute("d", [
"M", r, 0,
"A", r, r, 0, la, 1, x, y,
"L", rx*x, ry*y,
"A", r*rx, r*ry, 0, la, 0, r*rx, 0,
"Z"
].join(" "));
path.setAttribute("opacity", 1-t);
requestAnimationFrame(draw);
}
<svg width=90vw height=90vh viewBox="-100,-100,200,200" >
<path id="path" transform=rotate(-45) ></path>
</svg>
I want to move a circle along a path inside an svg with different easing. I wanted to use animateMotion but have never used it before. Using JS is not an option in this case.
It works fine in Chrome and Opera, but not in Safari and Firefox.
<animateMotion
dur="4s"
repeatCount="indefinite"
calcMode="spline"
keySplines="0 0 0.5 1 ; 0 0 0.5 1 ; 0.3 0 1 1"
keyTimes="0 ; 0.3 ; 0.6 ; 1"
path="M54,183.8c0-86.5,128.5-87.2,128.5,0c0-86.5,116.9-87.2,116.9,0c0-86.5,115.1-87.2,115.1,0
c0-86.5,55.5-123.5,55.5,111" />
If I remove calcMode, keySplines and keyTimes it works in all browsers.
I would also appreciate any alternative solution for moving an element on rounded curves with different easings.
Solution
I figured out, that two things were independently from each other creating the issue:
Safari does not accept spaces between KeyTimes Values (all other browsers do, and Safari also does within KeySplines).
Firefox seems to need one more value for KeyTimes and KeySplines. So I added one value to each line.
Fixed Code:
keySplines="0 0 0.5 1 ; 0 0 0.5 1 ; 0 0 0.5 1 ; 0 0 0.5 1"
keyTimes="0;0.2;0.4;0.6;1"
Full Example:
<svg version="1.1" id="Layer_5" 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">
<g>
<circle r="13.5" fill="black">
<animateMotion
dur="4s"
repeatCount="indefinite"
calcMode="spline"
keySplines="0 0 0.5 1 ; 0 0 0.5 1 ; 0 0 0.5 1 ; 0 0 0.5 1"
keyTimes="0;0.2;0.4;0.6;1"
path="M54,183.8c0-86.5,128.5-87.2,128.5,0c0-86.5,116.9-87.2,116.9,0c0-86.5,115.1-87.2,115.1,0c0-86.5,55.5-123.5,55.5,111" />
</circle>
<path stroke="red" fill="none" d="M54,183.8c0-86.5,128.5-87.2,128.5,0c0-86.5,116.9-87.2,116.9,0c0-86.5,115.1-87.2,115.1,0c0-86.5,55.5-123.5,55.5,111"/>
</g>
</svg>
I have a piece of svg code that links an animation to a simple path and that works well :
<path id="p0" d="M 110,150 C 300,80 400,300 450,100 500,-100 -90,220 110,150"
stroke="black" fill="none" stroke-width="1" />
<ellipse rx="20" ry="12" fill="#aaa" stroke="#666" stroke-width="2" opacity=".8">
<animateMotion id="One" dur="10s" fill="freeze"
rotate="auto" repeatCount="indefinite" >
<mpath xlink:href="#p0"/>
</animateMotion>
</ellipse>
Now I need to have the same animation on an animated path. I tried the following :
<path id = "p0" stroke = "black" stroke-width = "1" fill = "none" >
<animate attributeName="d" dur="2s" repeatCount="indefinite" values=
"M 100 200
C 100 150 250 150 100 100
C 0 50 100 400 100 200;
M 100 200
C 100 150 250 150 100 100
C 0 50 100 100 100 200;
M 100 200
C 100 150 250 150 100 100
C 0 50 100 400 100 200" />
</path>
<ellipse rx="20" ry="12" fill="#aaa" stroke="#666" stroke-width="2" opacity=".8">
<animateMotion id="One" dur="10s" fill="freeze"
rotate="auto" repeatCount="indefinite" >
<mpath xlink:href="#p0"/>
</ellipse>
But to no avail : the ellipse doesn't follow the path and remains invisible...
Any idea ? Is it at least possible ?
Thanks in advance.
EDIT : I just noticed that it works on Firefox, but the problem is that it links the ellipse to the first part of the path values only; in other words it doesn't follow the path animation... :(
If you give the path a valid d attribute, it seems to work in Chrome.
<svg width="500" height="500">
<path id = "p0" stroke = "black" stroke-width = "1" fill = "none"
d="M 100 200 C 100 150 250 150 100 100 C 0 50 100 400 100 200">
<animate attributeName="d" dur="2s" repeatCount="indefinite" values=
"M 100 200
C 100 150 250 150 100 100
C 0 50 100 400 100 200;
M 100 200
C 100 150 250 150 100 100
C 0 50 100 100 100 200;
M 100 200
C 100 150 250 150 100 100
C 0 50 100 400 100 200" />
</path>
<ellipse rx="20" ry="12" fill="#aaa" stroke="#666" stroke-width="2" opacity=".8">
<animateMotion id="One" dur="10s" fill="freeze"
rotate="auto" repeatCount="indefinite" >
<mpath xlink:href="#p0"/>
</animateMotion>
</ellipse>
</svg>
I have a path with various arcs. I want to animate just a single arc indefinitely. Currently, what I can do is this :
http://jsfiddle.net/gLxkt/1/
<animate id="c1" xlink:href="#p1" attributeName="d" attributeType="XML"
from="M 300 300 C 300 300 600 300 300 400 "
to="M 300 300 C 300 300 400 300 300 400 " dur="1s" fill="freeze" />
<animate id="c2" begin="c1.end" xlink:href="#p1" attributeName="d" attributeType="XML"
from="M 300 300 C 300 300 400 300 300 400 "
to="M 300 300 C 300 300 600 300 300 400 " dur="1s" fill="freeze" />
Which can do this once. How can I make the animation indefinite?
The end="indefinite" makes it repeat and the begin makes it start both at 0s and when the other animation finishes. Continuously repeats in Firefox.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"
>
<path id="p1" d="M 300 300 C 300 300 600 300 300 400 " stroke="blue" fill="none" stroke-width="4" />
<g>
<path id="p1" d="M 300 300 C 300 300 600 300 300 400 " stroke="blue" fill="none" stroke-width="4" />
<animate id="c1" begin="c2.end; 0s" end="indefinite" xlink:href="#p1" attributeName="d" attributeType="XML"
from="M 300 300 C 300 300 600 300 300 400 "
to="M 300 300 C 300 300 400 300 300 400 " dur="1s" fill="freeze" />
<animate id="c2" begin="c1.end" end="indefinite" xlink:href="#p1" attributeName="d" attributeType="XML"
from="M 300 300 C 300 300 400 300 300 400 "
to="M 300 300 C 300 300 600 300 300 400 " dur="1s" fill="freeze" />
</g>
</svg>
An easy way is to use the "values" array - which works in Chrome, Firefox & Safari (and I presume Opera) but not IE which has no support for SMIL anyway (although there's a polyfill library somewhere). But Robert's answer is clearly more elegant.
<animate id="c1" xlink:href="#p1" attributeName="d" attributeType="XML"
values="M 300 300 C 300 300 600 300 300 400;M 300 300 C 300 300 400 300 300 400;M 300 300 C 300 300 600 300 300 400" dur="2s" repeatCount="indefinite" fill="freeze" />
http://jsfiddle.net/gLxkt/2/