Project Nayuki


Symmetry sketcher (JavaScript)

Stroke width:
Paint color:
Rotation symmetry:
Mirror symmetry:
Show guidelines:
Canvas size: pixels
Background color:

Description

This JavaScript program allows you to draw sketches with your mouse, in a way that automatically produces symmetry. The number of rotational symmetry points can be configured, and mirror symmetry can be turned on or off. The source code is available for viewing.

Additional usage tips:

  • With the mouse cursor on the image canvas, use the scroll wheel to increase or decrease the stroke width.

  • Click the “Undo” button or press Ctrl+Z to undo the last drawing stroke. The number of undo steps available is limited. There is no redo functionality.

  • Click the “Done” button to get the clean final image, without any guideline or hover overlays. You can right-click on this image to save it to a file!

  • The paint and background colors can be in any format recognized by CSS. For example: #00AB12, #FFF, red, black, rgb(0,255,128).

Examples