This demo shows how to create an interactive svg webapp. Place a beard/mustache on a photo of your choice.

Running the demo

Hover the bottom part of the photo to show the palette of available face enhancements, and drag the one of your choice from the palette to the photo.

When an item is selected it can be rotated by pressing the right- or left-arrow key. To scale an item press up- or down-arrow key to zoom in or out respectively. To rotate/scale in smaller steps hold down the shiftkey at the same time. To remove an item, select it and then press backspace or delete.

You can also add your own photo by clicking the "Add photo" button in the palette, as well as save the result to a data uri. Per default the saved svg file only links to the photo, but it's also possible to save a standalone file by following this link (note that big photos can take a bit of time to export, and your browser may appear frozen during the encoding phase).

See attributions about the resources used in this demo.