SVG Morphing generates animations between different shapes. You can define your own shapes through SVG path or polyline tags.
SVG (Scalable Vector Graphics) is like an HTML tag with its attributes: every attribute defines a particular characteristic of the shape.

The example below is a black triangle, 600px size.

Type of Shape

At now SVG Morphing uses 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) reaches the element;

  3. Scroll: when the scroll intercepts the element.

Trigger Animation loop between shapes

Trigger Rollover works only with the first two shapes, can be linked.

Trigger Scroll animation starts only when you are in the scroll area


Animations

Animations between shapes are managed in this tabulator. They could be also managed in a single path or polyline element.

  1. Speed transition: the transition speed between shapes;

  2. Step duration: the number of seconds before the next transition;

  3. Easing: the type of easing (in, out, InOut);

  4. Equation: the function of the easing.


Path

These are the attributes of a single path:

  • Numbers: the sequence of the coordinates;

  • 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

Take a look at a working example

Did this answer your question?