720
questions
0
votes
1
answer
42
views
How to increase the stroke height of spinning circle SVG (How to make it thicker)
I am trying to increase the thickness of this spinning SVG circle. I don't know if it's stroke height or something. I've tried all I can but seems the SVG editor in site doesn't include the option to ...
0
votes
0
answers
25
views
SVG animation and Bootstrap modal problem
I have an SVG animation in a Bootstrap dialog that doesn't start until the modal has finished loading.
Demo: Codepen
This is the SVG
<svg xmlns='http://www.w3.org/2000/svg' aria-hidden="true&...
0
votes
1
answer
42
views
svg inline css animation keyframes timing
I want to make an animated svg logo using css animation with keyframes.
The animation works well, but I can not find a way to properly time the keyframes.
I want to achieve the below timeline:
step 1:...
0
votes
2
answers
124
views
Radial SVG gradient is not animating on hover
The radial gradient is supposed to grow from 10% to 100% on hover, but it's just not doing anything. Can't understand what I'm doing wrong.
<svg id="svgDoc" xmlns="http://www.w3.org/2000/svg" ...
1
vote
2
answers
60
views
how to make SVG motion move position in a perfect sine(t) in 1 axis
I'm trying to make an object in an animated SVG image move in a perfect sine motion in one axis (up and down or left and right). For instance: x(t) = a + b * sin(t * 2PI*f)
(I'm also trying to animate ...
3
votes
1
answer
76
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>
<...
0
votes
0
answers
30
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 ...
1
vote
1
answer
63
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(...
0
votes
0
answers
50
views
Animating a SVG/Image moving on a certain path (vertically and horizontally) along the screen while the user scrolls
The animation (one and more svg's) should move to different coordinates while the user scrolls down the site. Im struggeling with the horizontal movement which should be controlled by vertical ...
1
vote
1
answer
73
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 ...
2
votes
1
answer
130
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
59
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 ...
0
votes
0
answers
16
views
Is there a way to set the inital position of the animatable objects in the specific path before they start moving along this path?
I want to set the animatable objects one by one with a certain gap on a specific path before they start moving, like the visual effect in the following picture. I tried to Google it, but I failed. I ...
0
votes
0
answers
19
views
Is there a way to use SVG <animateMotion> to make a customized polygon to follow a specific path moving?
Updated: solved.
I noticed that the circle can follow the path smoothly, but the triangle behaves differently compared to the circle. Is there a way to make the triangle move along the path smoothly ...
0
votes
1
answer
51
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
69
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
vote
1
answer
389
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
330
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
37
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
66
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"...
1
vote
1
answer
181
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 ...
0
votes
1
answer
63
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 ...
0
votes
1
answer
105
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 ...
0
votes
0
answers
63
views
Antv x6 failed to use `children` property in `Makrkup`
Issue Description
I want to create a custom Node; however, the children property in Markup is not working. Initially, I thought it might be due to layering issues and made modifications by using ...
0
votes
1
answer
391
views
SVG transform animations won't work in Safari
I've got a simple animated SVG that works great in Chrome/Firefox but it doesn't animate at all in Safari. I understand this is due to SVG 1.1 vs. 2.0 (Safari doesn't yet support 2.0) , and that ...
2
votes
2
answers
181
views
Unknown delay between infinite alternate css animation's
I'm creating a simple css text animation, and is getting delayed at the end for god knows why, I'm am extremely tired and only need to make this work.
Basically I have a SVG with a <text> tag ...
-1
votes
1
answer
55
views
Hover & Click on overlapped SVG's
I have a div with several SVG's textPaths that are overlapped with a position absolute. The problem is that I can hover and click in all of them in Google Chrome, but not in Safari (the ...
1
vote
1
answer
152
views
How would I make a looping text marquee that is clipped to a path?
i'm still quite inexperienced with coding in general, but what I'm trying to do is to make an infinite marquee of text that is clipped to an svg path
I tried looking around and having a go. But I can'...
0
votes
0
answers
55
views
animated SVG Bar with dots for displaying a current flow
I want to signal the current flow between two images. I would like to have a line with dots running along it. The dots should run evenly and infinitely from left to right and not jump back (or around)....
0
votes
2
answers
63
views
Trinity knot svg
I want to make a trinity knot infinite animation loop right now I am stuck with an infinite loop animation I just want to add one knot on top so the logo looks like a trinity knot. I am a beginner on ...
0
votes
1
answer
53
views
Why is the SVG text not spins in place?
So I have this code:
#ring-svg {
padding: 0;
margin: 0;
width: 100svw;
height: 100svh;
background-color: rgb(35, 35, 35);
}
.alt-font {
font-family: "TnganAlt";
}
#textcircle {
...
0
votes
1
answer
54
views
Safari does not show the svg
I have an svg code in my index.html file but it doesnt appear on Safari. I tryed differend solutions those are not working for me
<svg class="blob" viewBox="0 0 500 500" xmlns="http://www.w3....
0
votes
0
answers
17
views
animation dosen't work svg in Safari innerWidth
Window.innerWidth is fine if it's more than a certain size, but if it's less than a certain size, the animation won't work properly.
The starting point shifts to the left
react code
<svg ...
1
vote
2
answers
390
views
wave animation on each path of the svg
In my react project, I have an SVG that contains horizontal lines (path), and when I hover the mouse on each path I want to start wave animation that starts from the hovered point and continuously ...
0
votes
0
answers
105
views
How to add a background image to animated SVG
I have an animated SVG shape. I need to add a background image masked by that SVG.
Until the animation ends, the background image should be blurred.
And once the animation is finished the background ...
1
vote
2
answers
166
views
How to Create Hand-Drawn SVG Animation with a Mask
I'm trying to create the below SVG animation with a mask. I have tried with CSS stroke properties, but I cannot get it the way I want.
Here is the W-shaped SVG I have created.
path {
stroke: ...
0
votes
0
answers
148
views
How to make a moving turbulence filter with SVG feturbulence?
As the question says, is there a way to do that? For example, I can make a infinite moving linear gradient:
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%&...
1
vote
1
answer
405
views
How to completely animate pathLength of svg to 0 in framer-motion?
I am trying to animate a svg path to disappear on click. The animation works, but at the end of the animation a dot is left behind.
Here is my code
export default function App() {
const [...
0
votes
1
answer
174
views
SVG donut with colored segments and clock animation
I'm new to SVG and trying to familiarize myself with it. I would like to create a SVG donut with several segments each segments with different color. It's important that the segments should be ...
0
votes
0
answers
30
views
SVG: How to re-use animated symbol with <use> while varying animation attribute [duplicate]
Trying to develop some SVG icons as procedurally as possible, thought I'd start with something simple: a fading ellipsis. Got as far as defining and cloning a comprising a circle with animated ...
0
votes
1
answer
59
views
animate svg fill like a loading bar
I am trying to animate an svg to fill as if it we loading and I can' t seem to find anything online that has worked yet.
<svg width="302" height="245" viewBox="0 0 302 245&...
0
votes
1
answer
327
views
SVG animation low performance on safari
I am working on svg animation with changing path and my biggest problem is safari, it is really smooth on other browsers but safari is just terrible with it
<svg
xmlns="http://www.w3.org/...
0
votes
1
answer
314
views
How do I draw a line behind an animation?
I am trying to add a line behind an element (plane svg) which is moved around in a keyframe animation. I want the line to follow its path as the plane moves and also leave a trace so that the plane's ...
0
votes
1
answer
46
views
Hide and Show Child Tree elements whenever click in SVG
I am trying to implement, some parent and childs as a tree. When I click parent element all it's childs should hide. when I click on same parent, all it's childs shoulds appear.
I am implemented but ...
0
votes
1
answer
138
views
Infinite seamless scroll part of a SVG
I'm trying replicate this GIF in SVG:
.barsBox
{
overflow: hidden;
display: flex;
width: 108px;
margin: 0 auto;
}
.bars
{
animation: scroll 0.7s steps(7) infinite;
}
@keyframes scroll
{...
1
vote
2
answers
1k
views
Draw SVG That Contains Multiple Paths, One Path At A Time, Animated With Javascript
I am new to SVG animations, I looked in to SNAP SVG and other libraries, but I cannot find a way to achieve my goal.
I have a SVG file (or the SVG is directly integrated in HTML), that contains ...
0
votes
0
answers
100
views
SVG animation works in Chrome & Safari, but not in Firefox
I have a Logo as SVG paths, which I animated to be triggered by scrolling.
On Chrome & Safari it works like a charm (desktop & mobile), but not in Firefox.
This is the SVG (some letters ...
0
votes
1
answer
647
views
want to animate svg image in python
i have two svg file ,my_avatar.svg and my_avatar1.svg in which one image has an avatar with eye open and one with eye closed I want to animate these two svg file such that animmation will show eyes ...
0
votes
0
answers
74
views
@keyframes animation not working with SVG clipping paths
I hope everyone is well.
I have been trying for some days now to make the following work properly:
#menu {
/*clip-path: url(#enter-clip-path-one);*/
position: absolute;
top: 0;
left: 0;
...
0
votes
1
answer
84
views
svg animation not "running" correctly
Well, this is my first post, and I usually can solve issues from coming to the community, but now I need some help. I have created a "SVG" that has some animation that over a 24 hour period ...