← Back to the work

design / development

Petals

A creative-development experiment where I bent React and SVG into a flower-and-mandala maker, then extended it with Strapi for accounts and CRUD.

A screenshot of the Petals SVG editor, a tool for generating flower and mandala patterns.

In this project, I explored React and tried to push the useState hook to its limits. I leveraged React to build an SVG editor that lets users design their own flower and mandala patterns.

This project gave me an intuitive way to explore React’s potential while teaching me deep lessons about managing state, props, components, and render performance. Beyond React, I challenged myself to understand the mechanics of SVGs — manipulating bezier handles and binding them to inputs the user can play with.

Afterwards, I extended its functionality with Strapi to develop a backend that supports user accounts, authentication, and CRUD for managing user-created artworks. That version isn’t hosted, but you can find it on my GitHub repository.

Next file — 02WebGL TV →