Introduction

This set of dynamic examples has been built with Graphery SVG in order to describe how to get the most out of this library. In each case, it describes how to build the graph step by step.

• clock: Display a dynamic clock with the current time. This example describes how to create lines into a circle, define polygons for clock hands, and transform it for clock movement.

• spirograph: Generate an attractive image with lines between two points with concentric orbit. It's a good example of movements, custom colors, and a very beautiful result.

• crazy bubbles: The continuous movement of the bubbles in the box allows us how to use Javascript to make controlled animations with requestAnimationFrame().

• sleepy dog: An interactive SVG with .addEventListener() and several animations with the elements animate, animateTransform, and the method .animateTo().

• car racing: A very simple car racing game with animateMotion.

• fractal-tree: In this example, we show you how to generate a tree using a fractal algorithm, and how to animate it with the sequence plugin.

• countdown: In this example, we show a morphing number countdown animate it with the sequence plugin.