Building a Mandala Maker: From a Single Stroke to Printable Art

Draw a small curve, repeat it around a center, and it starts to look like a flower. Add another shape, and the whole pattern changes.

That interaction is the idea behind the mandala maker I recently added to ColorWillow, a website with printable coloring pages and tools for creating your own.

An actual Surprise pattern exported from the maker with rainbow ink on a black background.

The free online mandala maker combines freehand drawing, reusable shapes, and generated starting patterns. You can edit the result, download it as SVG, PNG, or PDF, or print it as a coloring page. Drawing and pattern generation run in the browser, without an account or image upload.

The interesting part of building it was deciding how much the tool should do for you, and how much control it should leave in your hands.

One stroke repeated around a center

The basic drawing model is small: record a stroke once, then render rotated copies around the center.

With eight repeats, each copy is rotated another 45 degrees. Mirror mode adds reflected copies, giving a different rhythm to the same mark. A loose curve can become a ring of petals; a short angular stroke can become a border.

SVG fits this well: define the original path once in <defs>, then use <use> to instance it at different angles. This is a simplified version of the rotation-only rendering step:

function rotatedCopies(pathId, folds) {
  return Array.from({ length: folds }, (_, i) =>
    `<use href="#${pathId}" transform="rotate(${i * 360 / folds})" />`
  ).join("");
}

The SVG viewBox is centered on (0, 0), so each rotation happens around the drawing center. The original path stays shared across its repeats, and the export retains vector geometry.

I keep the repetition settings with each stroke. Changing the symmetry control affects what you draw next, which lets one design combine different rhythms without unexpectedly rearranging earlier work.

There are also shapes such as petals, leaves, circles, and decorated fans. You can place one and drag to rotate it, then build outward from there.

The live editor combines a drawing surface, a generated starting pattern, and controls for individual layers.

Giving random patterns some structure

An empty canvas can be a demanding first screen. “Surprise me” gives you a complete pattern to react to.

The generator combines motif families, repeat counts, silhouettes, and levels of detail. Those choices sit inside layout rules: different elements occupy different distances from the center, and their sizes account for the space available between repeats.

I use a seeded pseudo-random sequence to make those choices reproducible. The core is small:

function seededRandom(seed) {
  let state = seed >>> 0;
  return () => {
    state = (Math.imul(state, 1664525) + 1013904223) >>> 0;
    return state / 4294967296;
  };
}

With the seed, density, and other inputs held fixed, the same generator recipe produces the same strokes. That lets the density control rebuild a pattern from a consistent starting point, rather than drawing a completely unrelated composition on every slider movement.

That structure matters. Repeating an elaborate petal too many times can turn its details into a knot of lines. Increasing density needs to preserve enough space for the pattern to remain readable.

Layer overlap needed attention too. Painting a petal white to cover the lines behind it would leave white patches on a dark or transparent export.

Instead, I wrap the accumulated earlier layers in an SVG mask: white keeps the existing ink, and a black copy of the new petal's boundary hides the covered area. I then draw the new petal's outlines above it. Using maskUnits="userSpaceOnUse" keeps the mask in the same coordinates as the artwork. The covered region becomes transparent, so the chosen background shows through.

The density slider gives people a way to explore simpler and more intricate versions. While a Surprise remains unedited, it can reshape that generated pattern live. After you edit a layer, density applies to the next Surprise, preserving the changes you have made.

These patterns come from geometry and composition rules running locally. They need no image-generation service or per-design inference call.

Keeping the generated result editable

The most useful property of Surprise is that its output uses the same drawing model as the rest of the editor.

Each repeated motif remains a layer. Select a petal layer and you can move, resize, recolor, or hide all of its repeats together. You can remove a busy border, open up the center, or add your own strokes.

Selecting one layer highlights its repeated petals together. The highlight is an editing guide and does not appear in the export.

Keeping structured drawing data makes that possible. A flattened image would lose the relationships between the original mark, its repeats, and its settings.

The SVG scene is derived from that data. The editor and exports share the rendering code, which helps keep the downloaded artwork consistent with what you were editing.

It also means a generated pattern can become something quite different through a few deliberate changes. Surprise supplies the initial composition; the layers give you a way to take it somewhere else.

Designing for both the screen and the printer

A colorful mandala on black makes a striking screen image. A coloring page needs a different presentation: clear black outlines, white paper, and space for pencils or markers.

Ink and output background are separate controls. Choosing a white export background keeps your ink colors; turning on Black & white produces black outlines. That distinction lets you explore color on screen and then prepare a paper version of the same design.

Rainbow rings use a shared radial gradient centered on the artwork. Colors change with distance from the center, so motifs around the same ring stay visually connected. Setting gradientUnits="userSpaceOnUse" makes the gradient use the drawing's coordinate system, rather than fitting a separate gradient into each shape's bounding box.

The same pattern exported with Black & white enabled and a white background, ready to use as a coloring page.

The formats serve different purposes. SVG keeps vector paths for scaling and further use. PNG provides a raster image. PDF places the artwork on A4 or US Letter, with an adjustable print size and a small paper preview.

PNG is rasterized from the SVG scene. The PDF embeds that rendered image on the selected paper size.

For a quick printable result, choose Black & white, keep the output background white, and select your paper size. If you would rather start with a finished illustration, ColorWillow also has a collection of printable mandala coloring pages.

Making it easy to return to a drawing

The maker saves up to ten editable drawings in the current browser. A saved drawing keeps its layers and settings, so you can continue adjusting it later.

There is also an editable-file download and a restore option. Browser storage can be cleared or become unavailable, so a downloaded file gives people a portable copy of work they want to keep.

This keeps the first session simple: open the page, try a pattern, and start changing it. Signing in is unnecessary for this tool.

Building it reinforced three choices I would make again: let a small gesture produce an immediate result, give randomness a composition to work within, and preserve enough structure for people to keep editing.

You can try the mandala maker yourself, or explore ColorWillow for more free printable coloring pages.

I would love to see what you make with it—and hear which parts of drawing, editing, or printing could feel better.