Questions tagged [svg-morphing]
19 questions
19
votes
6 answers
html5 How to morph or animate one SVG to another?
I did some searching but I have to admit, I have 0 experience with SVG, I've seen a bunch of modern libraries, such as Raphael, PaperJS, KineticJS, EaselJS but I have no idea of what would fit the goal here, maybe even CSS keyframes would do the…
Fabiano Soriani
- 8,182
- 9
- 43
- 59
12
votes
2 answers
How to animate path morphs using snap.svg
I have been searching for a good example on how to animate a svg path morph. I know how to do do pretty complex ones using SMIL, but snap.svg is new and shiny, and everyone seems to love it, so I'd like to take a look. I can't find a good example…
Les Ballard
- 283
- 1
- 4
- 17
4
votes
2 answers
How to morph a SVG diamond into a circle
I've recently been dipping my toe into SVGs and I'm currently trying to morph a diamond into a circle when the user hovers over it.
I found this tutorial over at CSS Tricks
I've noticed that they're using points to do the animation however my SVG…
user1788364
- 1,141
- 3
- 19
- 33
2
votes
1 answer
How to morph svg into another svg correctly with Anime.js?
I have a problem where two of my svg have the same number of points, but something isn't right when I play the animation, the two svgs are so close together but the animation just jumps out of nowhere and it isn't right, a weird shape happens before…
kony
- 92
- 6
2
votes
1 answer
Javascript - morph/animate svg path data WITHOUT SMIL or libraries
I want to morph/animate svg path data WITHOUT SMIL or libraries (jquery, Snap.svg, Velocity.js etc.), just pure javascript (and optionally with css if possible). I want to do this because Chrome deprecated SMIL and they suggest to animate with css…
Joey Q
- 21
- 4
2
votes
2 answers
SVG Path and morphing
I have a bit of a theoretical questions.
Lets say i have 2 paths in svg. Each with a different number of points. One has 4 Bézier curves and the other 3.
What i want to do is morph one into the other.
Now, i know they have to have the same exact…
Ivan Horvatin
- 217
- 1
- 2
- 14
1
vote
1 answer
How do i avoid the mangled svg path in the svg morph transition?
I ahev the following svg created in inkscape
1
vote
2 answers
SVG morph not morphing smoothly - anime js
I am trying to create a simple SVG morph using Anime JS but the SVG doesn't transition smoothly as you can see below it jumps. Does anyone know why this is happening?
const SVG_PATHS = [
{ value:…
Reece
- 2,581
- 10
- 42
- 90
1
vote
0 answers
Smoothly Morph SVG using snap.js
I tried using snap.js to achieve the morphing effect between my two blob shapes. However, the morphing transition is not as sooth as the example that I followed here. I created the shape in illustrator and exported it as svgs. Does anyone know what…
Thomas Nguyen
- 11
- 2
1
vote
1 answer
SVG path d: I expected ('M' or 'm'), but got "NaN 0,0..100"
I used [skylake] library == svg morphing animation menu and wanted to do the same menu animation(svg morphing animation) like this one : http://jemimahbarnett.com . When your mouse entered the svg menu is opened && closed when your mouse left. I did…
Ody Light
- 57
- 1
- 8
1
vote
2 answers
SVG smoothly morphing shape into other predefined shapes with Javascript
I want a smooth transition between the shapes (the example below shows a sudden transition just so you get an idea where I need a smooth transition).
The order of the shapes is determined by Javascript (for the example I fixed an arbitrary…
user66554
- 558
- 2
- 14
1
vote
1 answer
Rotating SVG path points for better morphing
I am using a couple of functions from Snap.SVG, mainly path2curve and the functions around it to build a SVG morph plugin.
I've setup a demo here on Codepen to better illustrate the issue. Basically morphing shapes simple to complex and the other…
thednp
- 4,401
- 4
- 33
- 45
1
vote
1 answer
SVG - smooth morph Paths into each other
I'm currently searching for a solution to morph two or more paths into each other, to create a smooth pinch2Zoom animation. Currently I'm working with opacity to blend the two path's into each other:
avater
- 100
- 2
- 13
1
vote
1 answer
Is svg.js capable of path morphing animation
I've written a tool for creating animated svgs using path morphing. Currently, my tools rely on just building the code out of strings, but I was interested in transitioning to the svg.js library. I've kind of run into a roadblock with the path…
Bradley Bossard
- 2,439
- 2
- 23
- 30
0
votes
0 answers
problem with morphing svg shapes in javascript
i have two quite "complex" svgs, the first of them being a text of five words and the other svg is a simple house without many details. What I would like to achieve is that the first svg sort of morphs into the house for a loading animation on a…
heckspoiler
- 33
- 4