Pike's SVG Dolls

By mbystedt on Nov 22, 2012, 4:48:33 PM

To start

Load this html file in a web browser capable of displaying svg. If your browser is not capable of displaying SVG then please switch to the latest version of FireFox, Chrome, Safari or IE.

Using Paper Dolls

The paper dolls interface is divided into 3 sections. A viewer, an attribute selection area and a color palette.

The Viewer

The viewer simply shows your creation. No user interaction is possible. Future versions may implement animation and scaling of the model.

Attributes

To change the attributes of elements first click on of the choices to the right in the attributes panel. The first three attributes also use the color panel below the attributes panel.

Colors

The after clicking one of the first three attributes you can then change its color by clicking in the color panel.

A Final Word

That's about all there is to paper dolls. Now, click around and try your hand at designing a svg paper doll! Create combinations that repulse your fashion sense and burns the eyeballs of passersby.

Source code may be freely downloaded and examined. Please do not plagiarize.