Symmetra

mandala · symmetry · canvas api

github ↗︎ try it here ↗︎

i’ve always loved coloring mandalas. i had way too many coloring books growing up, and whenever i had free time i’d sit down with a pile of markers and spend hours filling them in. i always found it relaxing, especially during covid, so i wanted to recreate a little bit of that feeling in the browser.

instead of coloring a finished pattern, symmetra lets you create your own. every stroke is mirrored across multiple symmetry lines in real time, so even simple sketches turn into detailed mandalas. changing the number of symmetry lines completely changes the final drawing, which makes it fun to experiment with.

the project is built around the html canvas api. every mouse movement is reflected across multiple axes while keeping the drawing smooth enough to feel natural. i also added different brush sizes, colors, undo and redo, and the ability to export finished drawings.

one stroke, mirrored across 8 axes

the best part has been watching other people use it. my friends open it during breaks between classes and end up competing to see who can draw the coolest mandala. they still send me screenshots of things they’ve made, and seeing that people keep coming back to something i built has been a lot more rewarding than i expected.