I read this Pocket Guide to SVG today and learned a lot from it, but... it does not cover animation. I need some guidance on how to do a simple animation. I dont need any transitions between frames, I just want to define shapes for frame one, shapes for frame two, etc.
https://svgpocketguide.com/book/
<!-- https://svgpocketguide.com/book/#section-4 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="1080" height="1080">
<!-- the doctype and svg need to be like this to render in Firefox -->
<rect width="1080" height="1080" fill="white"/>
<!-- delay frames by waiting 0.5 seconds between frames -->
<animation frame 1>
<line x1="75" y1="75" x2="10" y2="50" stroke="hsl(0,82%,56%)" stroke-width="3"/>
<line x1="75" y1="75" x2="175" y2="475" stroke="hsl(236,82%,56%)" stroke-width="3"/>
<circle cx="10" cy="50" r="5" fill="black" />
<circle cx="75" cy="75" r="5" fill="black" />
<circle cx="175" cy="475" r="5" fill="black" />
</animation frame 1>
<animation frame 2>
<line x1="75" y1="75" x2="10" y2="50" stroke="hsl(0,82%,56%)" stroke-width="3"/>
<line x1="75" y1="75" x2="175" y2="475" stroke="hsl(236,82%,56%)" stroke-width="3"/>
<circle cx="10" cy="50" r="5" fill="black" />
<circle cx="75" cy="75" r="5" fill="black" />
<circle cx="175" cy="475" r="5" fill="black" />
</animation frame 2>
</svg>
<!-- https://svgpocketguide.com/book/#section-4 -->
<!-- https://oak.is/thinking/animated-svgs/ -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="1080" height="1080">
<rect width="1080" height="1080" fill="white"/>
<line x1="400" y1="400" x2="10" y2="515" stroke="hsl(250,82%,56%)" stroke-width="3">
<animate
attributeName="x1"
dur="0.5s"
values="50;100;200;350;400"
calcMode="discrete"
repeatCount="1"
/>
<animate
attributeName="y1"
dur="0.5s"
values="50;100;200;350;400"
calcMode="discrete"
repeatCount="1"
/>
<animate
attributeName="stroke"
dur="0.5s"
values="hsl(50,82%,56%);hsl(100,82%,56%);hsl(150,82%,56%);hsl(200,82%,56%);hsl(250,82%,56%)"
calcMode="discrete"
repeatCount="1"
/>
</line>
<circle cx="50" cy="50" r="5" fill="black" />
<circle cx="100" cy="100" r="5" fill="black" />
<circle cx="200" cy="200" r="5" fill="black" />
<circle cx="350" cy="350" r="5" fill="black" />
<circle cx="400" cy="400" r="5" fill="black" />
</svg>
This question shows a method for frame-based animation in an SVG. It uses CSS animation, but you could achieve the same thing with SMIL. However, the CSS way is a little cleaner IMO.
SIMPLE – Animate Multiple SVGs in Sequence (like a looping GIF)
Here's another answer, that may help: SVG frame-based animation
I have patterns that each have a single image in them.
I have not used svgs much before and do not know which attributes to change to get clear result. I've been trying all sorts of combinations of preserveAspectRatio, viewBox, patternUnits, but I cannot seem to get what I want.
https://codepen.io/shkasjon/pen/WYwZmy
here you can see that the second svg image is displayed clearly and sharply and the first one is blurred.
How can i fix the quality of the first svg image?
<svg xmlns="http://www.w3.org/2000/svg" width="146" height="146" viewBox="-10 -10 470 468">
<defs><pattern id="image-as_profile_widget-4" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"><image itemprop="photo" height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.gravatar.com/avatar/4a7131ab3b3fa22f2fea9fadaa018981?s=146"></image></pattern></defs><path fill="url(#image-as_profile_widget-4)" d="M9.635 132.808C24.782 59.782 71.388 19.109 144.085 6.822c53.74-9.081 107.5-9.196 161.15.255 74.852 13.185 119.85 56.23 134.185 130.36 11.075 57.29 11.249 115.191-.174 172.427-15.324 72.52-63.132 117.285-135.561 129.527-53.74 9.08-107.5 9.195-161.15-.255-74.852-13.186-120.05-58.38-134.384-132.509-11.64-57.668-10.52-115.935 1.484-173.82z" id="path-1"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="146" height="146" viewBox="-10 -10 146 146">
<defs><pattern id="image-as_profile_widget-2" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"><image itemprop="photo" height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.gravatar.com/avatar/4a7131ab3b3fa22f2fea9fadaa018981?s=146"></image></pattern></defs>
<rect x="0" y="0" rx="4" ry="4" width="146" height="146" fill="url(#image-as_profile_widget-2)" stroke="#ffffff" stroke-width="0" stroke-opacity="1" id="path-1"></rect>
</svg>
patternUnits="userSpaceOnUse" add to <pattern >
<svg xmlns="http://www.w3.org/2000/svg" width="146" height="146" viewBox="-10 -10 470 468">
<defs><pattern id="image-as_profile_widget-4" height="100%" width="100%" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"><image itemprop="photo" height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.gravatar.com/avatar/4a7131ab3b3fa22f2fea9fadaa018981?s=146"></image></pattern></defs><path fill="url(#image-as_profile_widget-4)" d="M9.635 132.808C24.782 59.782 71.388 19.109 144.085 6.822c53.74-9.081 107.5-9.196 161.15.255 74.852 13.185 119.85 56.23 134.185 130.36 11.075 57.29 11.249 115.191-.174 172.427-15.324 72.52-63.132 117.285-135.561 129.527-53.74 9.08-107.5 9.195-161.15-.255-74.852-13.186-120.05-58.38-134.384-132.509-11.64-57.668-10.52-115.935 1.484-173.82z" id="path-1"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="146" height="146" viewBox="-10 -10 146 146">
<defs><pattern id="image-as_profile_widget-2" patternUnits="userSpaceOnUse" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"><image itemprop="photo" height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.gravatar.com/avatar/4a7131ab3b3fa22f2fea9fadaa018981?s=146"></image></pattern></defs>
<rect x="0" y="0" rx="4" ry="4" width="146" height="146" fill="url(#image-as_profile_widget-2)" stroke="#ffffff" stroke-width="0" stroke-opacity="1" id="path-1"></rect>
SVG path element not working in Firefox and Safari but it works in Chrome.
Why doesn't the path filled using pattern in Firefox and Safari?
<svg id="" xmlns="http://www.w3.org/2000/svg" height="500" width="600" style="position: absolute;">
<defs>
<pattern id="imgpattern" x="0" y="0" width="1" height="1" patternUnits="userSpaceOnUse">
<image width="600" xlink:href="https://i.pinimg.com/564x/e1/a5/b7/e1a5b7edacee456a4f3bc3e00c3c01d9.jpg"></image>
</pattern>
</defs>
<path d="M50,100 C50,100 100,100 100,50 L100,50 500,50 C500,50 500,100 550,100 L550,100 550,400 C550,400 500,400 500,450 L500,450 100,450 C100,450 100,400 50,400 L50,400 50,100 L50,100 0,100 0,0 0,425 L0,425 50,425 C50,425 75,425 75,450 L50,450 50,425 0,425 0,500 525,500 525,450 C525,450 525,425 550,425 L550,425 550,450 525,450 525,500 600,500 600,75 550,75 C550,75 525,75 525,50 L525,50 550,50 550,75 600,75 600,0 75,0 75,50 C75,50 75,75 50,75 L50,50 75,50 75,0 0,0 0,100" fill="#ff0000;" stroke="#F000" stroke-width="1px" style="fill:url(#imgpattern)"></path>
</svg>
There is no height attribute on the image. SVG 2 allows width/height to be omitted but only Blink has implemented this part of SVG 2 so far.
You also have a redundant fill on the rect (as you're applying a pattern fill as a style)
<svg id="" xmlns="http://www.w3.org/2000/svg" height="500" width="600" style="position: absolute;">
<defs>
<pattern id="imgpattern" x="0" y="0" width="1" height="1" patternUnits="userspaceOnUse">
<image width="600" height="600" xlink:href="https://i.pinimg.com/564x/e1/a5/b7/e1a5b7edacee456a4f3bc3e00c3c01d9.jpg"></image>
</pattern>
</defs>
<path d="M50,100 C50,100 100,100 100,50 L100,50 500,50 C500,50 500,100 550,100 L550,100 550,400 C550,400 500,400 500,450 L500,450 100,450 C100,450 100,400 50,400 L50,400 50,100 L50,100 0,100 0,0 0,425 L0,425 50,425 C50,425 75,425 75,450 L50,450 50,425 0,425 0,500 525,500 525,450 C525,450 525,425 550,425 L550,425 550,450 525,450 525,500 600,500 600,75 550,75 C550,75 525,75 525,50 L525,50 550,50 550,75 600,75 600,0 75,0 75,50 C75,50 75,75 50,75 L50,50 75,50 75,0 0,0 0,100" stroke="#F000" stroke-width="1px" style="fill:url(#imgpattern)"></path>
</svg>
I have a below code,
<div id="akbar">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="400" height="200" viewBox="0 0 400 200">
<g transform="scale(1,-1) translate(0,-200)">
<rect x="50" y="0" fill="#f00" width="100" height="100">
<animate attributeName="height"
from="0"
to="100"
dur="0.5s"
fill="freeze" />
</rect>
<rect x="150" y="0" fill="#f70" width="100" height="200">
<animate
attributeName="height"
from="0"
to="200"
dur="0.5s"
fill="freeze" />
</rect>
<rect x="250" y="0" fill="#ec0" width="100" height="150">
<animate
attributeName="height"
from="0"
to="150"
dur="0.5s"
fill="freeze" />
</rect>
</g>
</svg>
</div>
I would like to animate the svg rectangle to grow like music waves.
How can I achieve that?
I need this behavior
You can achieve it using
values,
keyTimes
and keySplines
attributes of an <animate> tag.
JSfiddle example.
I stripped your example to single column only:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="400" height="200" viewBox="0 0 400 200">
<g transform="scale(1,-1) translate(0,-200)">
<rect x="50" y="0" fill="#f00" width="100" height="100">
<animate
attributeName="height"
from="0"
to="100"
dur="1s"
fill="freeze"
values="0; 200; 150; 160; 150; 160"
keyTimes="0; 0.2; 0.4; 0.6; 0.8; 1"
keySplines=".42 0 1 1;
0 0 .59 1;
.42 0 1 1;
0 0 .59 1;
.42 0 1 1;
0 0 .59 1;"
/>
</rect>
</g>
</svg>
As it is not perfect yet, you can play around with the attributes to adjust the timing better (keySplines especially) and make it more music waves like.
As you can see on the provided example, single column steps of movements are:
All the way from bottom to top
Then, from top to ~83% of height
Then, from ~83% to ~88%,
Then, from ~88% to ~83%,
Then, from ~83% to ~88%
I guess that increasing the difference between those repeating percentage numbers (83 and 88) will give you slightly better effect than mine (which is based on 75% and 80%, easier to calculate on widht: 200px), but it is close.
Also take a look at CSS tricks article on SVG animation, it is very thorough and covers all the details about mentioned attributes - and much more.
I want to set a faint yellow color lighting effect (car head lights) to my svg element. It is possible to do this on mouse hovering?
Here is my car's svg element:
<path d="M-286.912,486.288c-5.668,11.518-10.595,21.793-15.771,31.941c-2.707,5.307-7.279,7.822-13.323,7.754
c-8.107-0.09-16.215-0.022-24.236-0.022c-2.128-14.509,10.613-32.582,25.01-35.839c7.575-1.714,15.223-3.119,22.869-4.498
C-291.004,485.378-289.497,485.944-286.912,486.288z M-289.368,487.823c-0.416-0.483-0.833-0.966-1.249-1.449
c-7.414,1.581-14.821,3.191-22.242,4.736c-16.099,3.351-22.808,14.912-26.056,29.591c-0.493,2.228-0.81,4.176,2.248,4.142
c7.625-0.084,15.336,0.294,22.832-0.779c3.441-0.492,7.727-3.229,9.433-6.206C-298.845,508.159-294.301,497.879-289.368,487.823z"/>
The SVG data you posted doesn't seem to do anything. However, you can use SVG filters to add glare effects. Here's an example:
svg:hover .headlight {
fill: yellow;
filter: url(#f1);
}
<svg width="600" height="300" viewBox="0 0 600 300">
<defs>
<filter id="f1" x="-25%" y="-25%" width="150%" height="150%">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" result="glare" />
<feMerge>
<feMergeNode in="glare" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<path fill="black" stroke="none" d="M0 0 600 0 600 300 0 300z" />
<circle cx="150" cy="150" r="50" fill="darkslategray" class="headlight" />
<circle cx="450" cy="150" r="50" fill="darkslategray" class="headlight" />
</svg>