SVG Morphing

Description

SVG Morphing generates animations between different shapes. You can define your own shapes through SVG path or polyline tags.
It might seem very complex and nerdy to build shapes by copying and pasting endless sequences of numbers, but it's not really like that if you understand how it works. You can see the SVG (Scalable Vector Graphics) as an HTML tag with his attributes: every attribute defines a particular characteristics of the shape. The example below is a black triangle, 600px size.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" xml:space="preserve">
  <g>
    <path d="M447.6,259.4L599,518.7H299.5H0l151.4-259.4L299.5,0L447.6,259.4z"/>
  </g>
</svg>

Type of Shape

At now SVG Morphing use two tags type:

1. Path
2. Polyline







In both cases the attributes may change during the transition steps.


Controls

There are 3 different ways to trigger the animation:

  1. Animation: an infinite loop between shapes
  2. Rollover: when the mouse cursor (finger on mobile) reach the element
  3. Scroll: when the scroll intercepts the element

Trigger Animation
loop between shapes
Trigger Rollover
works only with the firs two shapes, can be linked.
Trigger Scroll
animation starts only when you are in scroll area


Animations

Animations between shapes is globally managed in this tabulator. Can be also managed in single path or polyline element.

  1. Speed transition: the transition speed between shapes
  2. Step duration: the amount of seconds before the next transition
  3. Easing: the type of easing (in, out, InOut)
  4. Equation: the function of the easing


Path

Here the attributes of a single path

  • Numbers: the coordinates sequence
  • Transform: the rotation
  • Position: x and y position
  • Style: fill-IMAGE, fill-COLOR, stroke-COLOR, stroke-WIDTH
  • Animation: Speed, step duration and easing type and speed function


Demo

Here a working example

Still need help? Contact Us Contact Us