html5 How to morph or animate one SVG to another?

Question

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 trick.

Pointers to this problem would be greatly appreciated.

Goal
On the browser, I want to animate svg1 into svg2, using transition type ease-out

Constraints

Any javascript library, if required at all
Should be able to every element to the other element of same ID
morph shapes, paths, fill*, stroke*, cx, cy, rc, ry
Should work on current Firefox and Chrome, IE 10 would be nice to have
Should work in new mobiles such as iphone 5, nexus 4 and 7
Decent performance, even on mobiles
Indifferent if it renders as <svg> or <canvas>

svg1:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>
  <linearGradient id="svg_6">
   <stop stop-color="#828236" offset="0"/>
   <stop stop-color="#7d7dc9" offset="0.99219"/>
  </linearGradient>
  <linearGradient id="svg_7" x1="0" y1="0" x2="1" y2="1">
   <stop stop-color="#828236" offset="0"/>
   <stop stop-color="#7d7dc9" offset="0.99219"/>
  </linearGradient>
  <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_1">
   <stop offset="0" stop-color="#828236"/>
   <stop offset="0.99219" stop-color="#7d7dc9"/>
  </linearGradient>
 </defs>
 <g>
  <title>Layer 1</title>
  <ellipse ry="145" rx="116" id="svg_2" cy="201" cx="317" fill-opacity="0.36" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="url(#svg_7)"/>
  <ellipse ry="21" rx="10" id="svg_5" cy="137" cx="274" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#0cd60c"/>
  <ellipse ry="31" rx="17" id="svg_9" cy="114" cx="346" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#0cd60c"/>
  <path id="svg_14" d="m235,239c55.66666,-1.33333 133.33334,-71.66667 167,-4l-167,4z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
 </g>
</svg>

svg2:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>
  <linearGradient id="svg_6">
   <stop offset="0" stop-color="#828236"/>
   <stop offset="0.99219" stop-color="#7d7dc9"/>
  </linearGradient>
  <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_7">
   <stop offset="0" stop-color="#828236"/>
   <stop offset="0.99219" stop-color="#7d7dc9"/>
  </linearGradient>
  <linearGradient id="svg_1" x1="0" y1="0" x2="1" y2="1">
   <stop stop-color="#828236" offset="0"/>
   <stop stop-color="#7d7dc9" offset="0.99219"/>
  </linearGradient>
 </defs>
 <g>
  <title>Layer 1</title>
  <ellipse id="svg_2" fill="url(#svg_7)" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0.36" cx="317" cy="201" rx="116" ry="145"/>
  <ellipse id="svg_5" stroke="#000000" fill="#0cd60c" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="277.5" cy="132.5" rx="13.5" ry="25.5"/>
  <ellipse id="svg_9" stroke="#000000" fill="#0cd60c" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="349.5" cy="110" rx="20.5" ry="35"/>
  <path id="svg_14" fill="none" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m235,240c21.66666,81.66669 114.33334,96.33331 167,-4l-167,4z" />
 </g>
</svg>

ps you can visualize here, by simply pasting the codes in the area.

I have no code to show, I didn't want to start off wrong. My intuition tells me there is a 50% chance that the best solution don't involve navigating those nodes one by one diffing then!

score 7 · Answer 1 · edited Aug 31 '20 at 06:26

7

As far as I can see you only want to morph paths

This is a nice tutorial: SVG Essentials/Animating and Scripting SVG

W3C spec for SVG Paths: w3.org/TR/SVG/paths

W3C spec for animation: w3.org/TR/SVG/animate

Here's an example: carto.net/svg/samples/path_morphing

edited Aug 31 '20 at 06:26

Jan Schultke

17,446
6
47
96

answered Feb 14 '13 at 08:11

Mike

1,158
5
22
32

+1 I highly appreciate your answer, still I am looking for a broader morph, have updated the question – Fabiano Soriani Feb 14 '13 at 08:25
What do you mean by "broader morph"? I guess Raphaël would work for you. – Mike Feb 14 '13 at 08:44
1

It would mean, given an SVG I'd like to transition it to any other SVG, all id's present in SVG1 should also be in SVG2, so it just tween all sorts of mathematical values according to some easing function – Fabiano Soriani Feb 14 '13 at 20:46

score 6 · Answer 2 · answered Dec 30 '15 at 09:46

Have to mention that 2015 have brought us several pretty nice libraries for svg morph:

https://alexk111.github.io/SVG-Morpheus/
http://greensock.com/morphSVG (probably the best of the best, but you have to buy their license)
https://github.com/gorangajic/react-svg-morph (for react)

jared · Answer 3 · 2023-02-14T19:52:04.113

paraphrasing:

Currently you have to use the same number of vertices in both path-elements, and they have to be of the same type and appear in the same order in the other path-description. You should also orient both polygons in the same direction (left-right and right-left would produce unwanted results).

So you can do it (see the link below for an example) but you need to plan it out so that you create shape A's path and shape B's path in the exact same way with identical curve types, points, etc.

I created one shape in illustrator
i duplicated that shape.
I modified the duplicate into a new shape, careful not to add vertices or change from bezier to linear curve type etc
fyi to confirm point count you can select the path, then go path>simplify and it will show you current points on that path...
I save that svg file, then copy/paste those paths into another svg with the animation information.
NOTE: the paths are placed within an element in the svg file that corresponds to the layer name that it's on in illustrator. If you keep both shapes on different layers in illustrator and name them clearly it will help keep your svg files organized.
NOTE #2: If you create your shape and it's very simple, ie only straight lines, it will likely get saved as a _polygon instead of a _path which I personally found difficult to animate, so I recommend adding a bezier handle to at least a single point(and the identical corresponding point in the second shape).

Thanks, this seems like a good way to investigate further. I will inspect better how this is being done, http://jaredstanley.com/html5/svg_mask/iku.svg looks cool =) — Fabiano Soriani, May 01 '13 at 23:43
This is a great summary. I've used the two paths approach (Second hidden), and then parsed the paths string for vertices to tween between them (updating the path string each frame in the tween). You can see me tween two bezier paths at http://runny.ink with javascript. — Ezra Morse, Apr 27 '15 at 04:51

score 3 · Answer 4 · edited Apr 24 '16 at 08:02

3

Indeed, there are quite a few libraries that allow svg morphing, as Darwin mentioned.

Some extras I've found were: snap.svg, KUTE.js, GSAP. Svg.js has a plugin for svg morph and I don't believe velocity.js has support for this yet.

edited Apr 24 '16 at 08:02

Robert Longson

118,664
26
252
242

answered Apr 23 '16 at 15:04

Simon d

31
2

score 0 · Answer 5 · answered Feb 14 '13 at 08:38

If you can define the morphing as a list of changes instead of second SVG, you could use d3 http://d3js.org/ framework

It has a bit steep learning curve, but it gives you a lot of power. If you want something easier I suggest Raphael http://raphaeljs.com/ - capabilities are similiar, but it's easier to start.

score 0 · Answer 6 · answered Jan 16 '23 at 12:45

Looking at a pure SVG option (ie. no Javascript) and building on the previous answers, here's a working example that might reduce the hairpulling for others.


<svg height="120px" width="120px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
    <path>
        <animate 
            dur="10s" 
            repeatCount="indefinite" 
            attributeName="d" 
            calcMode="spline" 
            keySplines="0.4 0 0.2 1; 0.4 0 0.2 1" 
            fill="freeze" 
            values="
                M 336,0 
                c -97.2,0 -176,78.8 -176,176 
                c 0,18.7 2.9,36.8 8.3,53.7 
                c 0,0 0,0 -161.3,161.3
                c -4.5,4.5 -7,10.6 -7,17 
                c 0,0 0,0 0,80
                c 0,13.3 10.7,24 24,24 
                c 0,0 0,0 80,0 
                c 13.3,0 24,-10.7 24,-24 
                c 0,0 0,0 0,-40
                c 0,0 0,0 40,0
                c 13.3,0 24,-10.7 24,-24 
                c 0,0 0,0 0,-40
                c 0,0 0,0 40,0
                c 6.4,0 12.5,-2.5 17,-7 
                c 0,0 0,0 33.3,-33.3
                c 16.9,5.4 35,8.3 53.7,8.3 
                c 97.2,0 176,-78.8 176,-176 
                C 512,78.8 433.2,0 336,0 
                Z
                M 376,176.5 
                c -22.4,0 -40.5,-18.1 -40.5,-40.5 
                c 0,-10.5 4,-20 10.5,-27.2 
                c 7.4,-8.2 18.1,-13.3 30,-13.3 
                c 22.4,0 40.5,18.1 40.5,40.5 
                c 0,22.4 -18.1,40.5 -40.5,40.5 
                Z;
                M 256,0 
                c -45,0 -85.8,15.8 -115.6,41.5 
                c -30.2,26.1 -49,62.4 -49,102.5
                c 0,0 0,0 0,48
                c 0,0 0,0 -18.3,0
                c -35.3,0 -73.1,35.3 -73.1,64
                c 0,0 0,0 0,192
                c 0,35.3 32.8,64 73.1,64 
                c 0,0 0,0 78.9,0
                c 0,0 0,0 104,0
                c 0,0 0,0 107,0
                c 0,0 0,0 75.9,0
                c 40.3,0 73.1,-28.7 73.1,-64 
                c 0,0 0,0 0,-192
                c 0,-35.3 -32.8,-64 -73.1,-64 
                c 0,0 0,0 -18.3,0
                c 0,0 0,0 0,-48
                c 0,-39.2 -17.9,-74.7 -47,-100.7 
                C 343.7,16.6 302.1,0 256,0 
                Z 
                M 164.6,192 
                c 0,0 0,0 0,-48
                c 0,-44.2 40.9,-80 91.4,-80 
                c 50.5,0 91.4,35.8 91.4,80 
                c 0,0 0,0 0,48
                c 0,0 0,0 24,0
                Z;
                M 336,0 
                c -97.2,0 -176,78.8 -176,176 
                c 0,18.7 2.9,36.8 8.3,53.7 
                c 0,0 0,0 -161.3,161.3
                c -4.5,4.5 -7,10.6 -7,17 
                c 0,0 0,0 0,80
                c 0,13.3 10.7,24 24,24 
                c 0,0 0,0 80,0 
                c 13.3,0 24,-10.7 24,-24 
                c 0,0 0,0 0,-40
                c 0,0 0,0 40,0
                c 13.3,0 24,-10.7 24,-24 
                c 0,0 0,0 0,-40
                c 0,0 0,0 40,0
                c 6.4,0 12.5,-2.5 17,-7 
                c 0,0 0,0 33.3,-33.3
                c 16.9,5.4 35,8.3 53.7,8.3 
                c 97.2,0 176,-78.8 176,-176 
                C 512,78.8 433.2,0 336,0 
                Z
                M 376,176.5 
                c -22.4,0 -40.5,-18.1 -40.5,-40.5 
                c 0,-10.5 4,-20 10.5,-27.2 
                c 7.4,-8.2 18.1,-13.3 30,-13.3 
                c 22.4,0 40.5,18.1 40.5,40.5 
                c 0,22.4 -18.1,40.5 -40.5,40.5 
                Z;
                "/>
    </path>
</svg>

html5 How to morph or animate one SVG to another?

6 Answers6

Linked