All Questions
Tagged with svg svg-animate
633
questions
2
votes
1
answer
41
views
Is it possible to disable svg's animate element for prefers-reduced-motion media query?
I've got an svg with animation done using animateTransform element
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<...
- 24.3k
0
votes
0
answers
23
views
Tween.js - Trying to play SVG animation forwards on mouse-over and backwards on mouse-out
In my current code, the animation plays forwards and backwards on mouse-over. Is there a way to make it play forwards on mouse-over and backwards on mouse-out? Thanks.
// write a simple tween ...
- 93
1
vote
1
answer
46
views
How to do svg laser pointer in js. like one in excalidraw or google slides?
I trying to create a mouse trail using svg path elements.
used beziers for smoothening but somehow smoothening is not good.
can some one help me with this.
const smoothing = 0.10;
function line(...
1
vote
1
answer
70
views
Is it possible to create an SVG stroke animation that animates for the same duration regardless of stroke length?
In the example provided, the smaller shape animates much faster than the larger shape because its stroke length is much less.
My understanding is that setting the stroke-dasharray to 100% rather than ...
- 69
1
vote
1
answer
99
views
Is there a way to make an svg circular progress bar using stroke dasharray? [closed]
I have been trying to recreate this progress bar, but I have been stuck to the step where I can implement the dashes between the line. If you have any ideas it would be great.
This is what i have ...
2
votes
2
answers
46
views
Staggering animation of SVG markers
Is it possible to stagger the animation of SVG markers to sync up with a line animation, i.e. so the markers become visible at the same time the line becomes visible behind it?
I've tried targeting ...
- 69
0
votes
1
answer
38
views
Continous svg animation of a polyline
I have the following code (in TypeScript) that creates a polyline (based on 4 differents points x1y1, xCy1, xCy1, x2y2, where Xc is the half distance between x1 and x2 on a plane), so it is not a ...
0
votes
0
answers
57
views
Layering an animated SVG outline (path) exactly over an animated (animateTransform) SVG clip-path applied to divs?
I eventually got there (almost), but I had some trouble trying to put this demo (Code Sandbox link) together, where there are basically two divs that use SVG clipPath + CSS clip-path and CSS mix-blend-...
- 1
1
vote
1
answer
256
views
svg animation using framer motion
I need to create this base shape and those curved gray lines, those gray lines should always be there as they are static and on top of those gray lines should infinitely flow the blue colored balls, ...
1
vote
1
answer
250
views
how to convert my animated SVG in to GIF fromat
I didn't found any efficient solution right now,
I'm able to do it with puppeteer and FFmpeg but it takes time and
also did not get the resolution that I wanted.
currently, this approach launches ...
0
votes
1
answer
32
views
How to animate do a reveal from center animation on an SVG?
I have this logo which looks like an S.
<svg width="505" height="732" viewBox="0 0 505 732" fill="none" xmlns="http://www.w3.org/2000/svg">
&...
0
votes
1
answer
65
views
Why doesn't animate inside a linearGradient referenced by another linearGradient work?
Sample SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140">
<linearGradient id="reuseme" gradientUnits="userSpaceOnUse" spreadMethod="reflect">
<stop offset="0"...
- 811
0
votes
1
answer
143
views
SVG gradient offset animation
I'm working on an SVG animation. But I've encountered a problem... I want to animate a changing gradient offset in my SVG. I use this SVG for this. I have already animated changing colors animation ...
- 1
0
votes
1
answer
60
views
How can I animate the gradient of this SVG to cycle from red to blue, top to bottom repeatedly?
How can I change this SVG so that the gradient cycles from top to bottom continuously such that when the red is dropping off the bottom, it is appearing from the top and when the blue is dropping off ...
- 811
0
votes
1
answer
99
views
How can I implement an SVG path animation like the one on deno.com?
I saw a SVG path animation effect on the Deno official website.
I would like to know how to achieve a similar effect.
Could you please provide me with some implementation ideas, and if possible, some ...
- 17
