header yorick

SVG constructions

"Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation." ~Wikipedia definition

Because of their structure, SVG images can not only be made with drawing software (such as Inkscape), but also with any text editor. Image elements and animations can be dynamically created or removed with Javascript, which makes the SVG format very suited for incorporation into websites.

Below are some examples of what you can do with (dynamic) SVGs. With the exception of the final scribble example, all these images were created in a plain text editor and some Javascript!

NOTE: At this moment, Internet Explorer does not support SVG animations. This page is therefore viewed best in Chrome or Firefox!

Beside the examples below, perhaps the best way to see what you can do with SVGs on a website is by visiting my map of Heiankyō. This interactive page provides an accurate representation of the old capital of Japan in SVG format and uses Javascript manipulation to load/change content, color elements and show/hide elements.


The first example of SVG manipulation is shown in my minigame Hover!.

Image triangulations

An animated triangulation of Lenna.

Lenna You cannot display SVG

Sonar display

For an explanation of the code, click here.

You cannot display SVG

Random maze generator

Touching bubbles

Animated squares

A neat animation of animated squares (click the right button to see the math involved):

Simple shapes

With very simple straight and arced line elements I created some shapes and even the alphabet!

Animated scribbles

It is also possible to create any shape you want and make an animated scribble out of it.

You cannot display SVG

Or, in a slightly more complex example:

You cannot display SVG

Custom animations

Some custom animations.

You cannot display SVG

You cannot display SVG

You cannot display SVG