Skip to main content
Filter by
Sorted by
Tagged with
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 ...
Jake Shaw's user avatar
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&...
DanielBlazquez's user avatar
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:...
ucsendre's user avatar
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" ...
John's user avatar
  • 103
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 ...
elechris's user avatar
  • 316
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> <...
Konrad's user avatar
  • 24.4k
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 ...
John's user avatar
  • 103
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(...
gowtham manikandan's user avatar
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 ...
Ez3k4's user avatar
  • 1
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 ...
marklovin's user avatar
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 ...
Dragoș Axinte's user avatar
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 ...
marklovin's user avatar
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 ...
personax's user avatar
  • 125
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 ...
personax's user avatar
  • 125
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 ...
Robert Rachita's user avatar
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-...
Avana's user avatar
  • 1
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, ...
Govind ganeriwal's user avatar
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 ...
Yagnik Vadaliya's user avatar
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"> &...
Saifur Rahman Mohsin's user avatar
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"...
jamieburchell's user avatar
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 ...
DAKOUMA's user avatar
  • 11
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 ...
jamieburchell's user avatar
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 ...
user23344127's user avatar
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 ...
leo0807's user avatar
  • 1,429
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 ...
pbspry's user avatar
  • 117
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 ...
Guilherme Silva's user avatar
-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 ...
a.tr.a.tr.a.tr's user avatar
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'...
Allblue's user avatar
  • 23
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)....
user1912399's user avatar
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 ...
Abnet Hussien's user avatar
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 { ...
Habizsabi's user avatar
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....
Dzserold's user avatar
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 ...
kss's user avatar
  • 1
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 ...
Hasan's user avatar
  • 961
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 ...
Eshan Rajapakshe's user avatar
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: ...
Eshan Rajapakshe's user avatar
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%&...
IWannaDance's user avatar
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 [...
Prabhat Pal's user avatar
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 ...
g0m3z's user avatar
  • 729
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 ...
Andrew's user avatar
  • 11
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&...
Daniel Obode's user avatar
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/...
Mikssx's user avatar
  • 11
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 ...
Tices's user avatar
  • 13
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 ...
Sun's user avatar
  • 3,514
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 {...
vanowm's user avatar
  • 10.1k
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 ...
BlasterGod's user avatar
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 ...
andreas's user avatar
  • 1,555
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 ...
Tanisha's user avatar
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; ...
George Fragkos's user avatar
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 ...
ShaneF's user avatar
  • 1

1
2 3 4 5
15