All Questions
Tagged with svg css-animations
522
questions
0
votes
0
answers
21
views
My svg animation isn't responding properly to js transformations (translation)
I coded this animation with an svg text that's supposed to move like this: first the text "Times New Roman" enters from the right side of the screen, right after that "ce" reaches ...
- 1
0
votes
1
answer
35
views
Javascript Intersection Observer API problem
I have a problem related to the Intersection observer API in Javascript.
I wrote a little code where a svg "draws itself" when it enters the viewport and "erases itself" whet it ...
0
votes
0
answers
32
views
How to add pulsating and hover effects to a detailed svg in css?
This is a react component in which i have these detailed and beautiful svg.
import "./App.css";
import logo from "./assets/image_1711723636308_ynt4tg.svg";
function App() {
...
2
votes
1
answer
71
views
SVG Triangle To Circle Animation
I am currently trying to create an animation where a triangle morphs into a circle and back again. My current problem is that when they morph into each other, the lines curve in different ways.
...
0
votes
0
answers
20
views
Drow line when user scroll
I have to animate lines like those shared in the screenshot and I have tried the below code but it's not working for me. I am getting an error in my ID. Would you help me out
window....
- 2,297
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, ...
0
votes
1
answer
224
views
Animate gradient pulse along SVG path
I want to animate a small line segment across a SVG path, with a gradient across the line segment. Similar to the "pulsing" effects on this site: https://www.authkit.com/
In my case, I want ...
- 99
0
votes
1
answer
56
views
Initiating CSS Animation Only After Complete Page Load
i need a solution with Wordpress.
In my case, i want to CSS Animtations only effect after the page is 100% loaded.
An example:
text
My HTML
<div class="svg-one">
<svg xmlns=&...
- 1
0
votes
0
answers
52
views
Adding an animated svg on an input depending on the CheckValidation result
I'm trying when the email input passes validation to add a tick (a css animated svg) inside the input and set the input border to green and when it doesn't pass validation to put a cross (a css ...
0
votes
2
answers
56
views
SVG Scale Animation
I am trying to modify this SVG code below to change the Scale Animation from Center Point instead of Upper-Left Corner.
The transform I want to scale from 1 to 0.8 (smaller)
[https://codepen.io/Binh-...
- 33
1
vote
1
answer
271
views
Animate SVG path to look like a flowing pipe
I'd like to use SVG and CSS to create a "flowing pipe" animation. I want to recreate the effect seen here: https://twitter.com/JohnPhamous/status/1732463692443512981
I got the basic SVG ...
- 651
0
votes
0
answers
55
views
Animate svg lines
I have an SVG file with lines in it. Now I would like the line on the left to animate from right to left (one time), and the line on the right to animate from left to right (one time).
I have made an ...
- 11
0
votes
0
answers
62
views
Stroke-dashoffset and stroke-array properties are not working in firefox, but work in jsfiddle and codepen
I tried using SVG and properties stroke-dashoffset and stroke-array but they are not applied for some reason. I am new in working with SVG's and vector spaces so I don't know much but I need a fix to ...
1
vote
2
answers
138
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: ...
- 159
2
votes
1
answer
211
views
How do I animate an SVG of the letter X to appear as if it's being drawn?
This Codepen does exactly what I want but I'd like to understand why it works the way it does.
I understand the general concept of line animation and have successfully animated the letter O, which is ...
