Mandalize Help

A complete guide to every feature in Mandalize — the free, browser-based tool for drawing animated mandala and kaleidoscope art from freehand strokes, vector shapes, stamped images and animated GIFs.

1. What is Mandalize?

Mandalize is a free, browser-based mandala maker for creating animated kaleidoscope art. It combines freehand drawing, vector shapes, stamped images and animated GIFs, all repeated automatically around a radially symmetric mandala — then lets you keyframe-animate any of it and export the result as an image, animated GIF/WebP, or video.

It runs entirely in your browser: no login, no install, and no account required. Mandalize is a procedural drawing, animation and compositing tool — it does not generate imagery with AI.

2. Symmetry System

Mandalize uses dihedral symmetry: setting the axis count to n produces 2n repeated copies of everything you draw or place, evenly spaced around the mandala's centre.

• Axes −/+ — set the number of symmetry axes. 0 switches to free draw with no repetition, just a single centre-point guide.
• Mirror — when on, alternating copies are flipped for a classic kaleidoscope look. When off, all copies are pure rotations of each other, giving a rotational pinwheel look instead.
• Rotate ↺ / ↻ — steps the axis rotation by 45°/n per click (a quarter of one symmetry cell). You can also type an exact degree value into the rotation field.
• Guides — toggles the dashed symmetry guide lines. Guides always show n full lines through the centre, visually creating 2n cells, and never appear in exports.

3. Drawing Tools

• Brush — freehand drawing, smoothed and repeated with radial symmetry.
• Line — click to place the start, move for a live preview, click again to finish; hold the grid-snap modifier for 15° angle increments.
• Line Chain — the same click-to-place/click-to-finish flow as Line, except finishing one segment immediately starts the next one from that same point, so repeated clicks chain a whole connected polyline out of individual straight strokes. Press Escape or switch tools to stop.
• Size / Colour / Opacity / Smooth — control brush thickness, stroke colour, transparency, and how aggressively freehand points are smoothed into curves.
• Gradient mode — instead of a flat colour, strokes can use a scrolling multi-stop colour gradient (adjustable spread and scroll speed) that animates continuously along the line.
• Eyedropper — picks a colour directly from the canvas.

4. Vector Shapes

Alongside freehand drawing, Mandalize has a dedicated vector shape tool for clean geometric forms:

• Circle, Star, Polygon — drag to draw. Stars have adjustable point count and inner radius ratio; polygons have an adjustable side count that's remembered as your default for the next shape you draw (both across the session and after closing the browser).
• Petal — a closed, leaf-shaped loop: click to set the tip, click to set the base, click again to bulge its curvature.
• Bezier — an open curve with two independently draggable control-point handles: click for the tip, click for the end, click to set the initial curve, then fine-tune both control points afterward.
• Wing — the same click flow as Bezier, but automatically mirrors a second arm across the axis running from the tip to the mandala's centre, so the two arms radiate outward together. Gradient colouring on a Wing mirrors too — both arms sample the same colour at the shared tip.
• Fill — optional solid fill colour, independent of the stroke colour (Bezier and Wing are always open strokes, never filled).
• Stroke controls — thickness, dash pattern, line cap (round/butt/square) and line join (round/miter/bevel), all rendered correctly together, including on dotted and gradient strokes.
• Gradient strokes — like brush strokes, shape outlines can use an animated colour gradient instead of a flat colour.

5. Text Tool

Click to place a text layer, type any text, and pick from a curated list of Google Fonts — or upload your own font file, which is embedded directly in the saved project (base64) so it round-trips through Save/Load without needing to be re-uploaded. Text shares the same Colour, Opacity, gradient and Fading Trail controls as every other shape.

• Straight — the default: a normal horizontal baseline, positioned and rotated like any other shape.
• Arc Text — bends the text along a circular arc instead of a straight line. Radius, start angle, direction (clockwise/counter-clockwise) and flip are all independently adjustable, and the on-canvas rotate handle also drags the radius in and out — one handle, two controls.
• Warp Glyphs — an alternative to Arc Text's rigid letter placement: instead of keeping each glyph undistorted, this bends the rendered text itself around the arc like a logo/badge warp, letters curving continuously rather than just rotating in place.
• Radial Text — a dedicated mode for a single clean ring of text centred exactly on the mandala's true centre, independent of the mandala's own axis count — turning it on auto-enables Arc Text and centres the shape; turning it off restores wherever the text was positioned before.

6. Images, Sprites & GIFs

• Palette — drag images or animated GIFs/WebPs into the palette panel, or use + Import. Animated files keep playing their native animation on the canvas.
• Stamp tool — select a palette item, then click the canvas to place it with full radial symmetry. A semi-transparent preview shows exactly where every copy will land before you click.
• Sprite properties — once placed, each stamped copy (a "sprite") has Scale, Rotation, Orbit (its angle around the mandala centre), Offset X/Y and Opacity controls, each independently keyframe-animatable.
• Select tool — click a placed sprite to move, scale or rotate it directly on the canvas.
• Sprite sheets — a palette image can be treated as a grid of frames (configurable rows/columns) and a specific cell selected for stamping.
• Transparent colour — pick a colour on a palette image to treat as transparent, with an adjustable tolerance.
• Crop — set a crop rectangle on a palette image before stamping it.

7. Warp Mode

Warp mode bends a stamped image into an arc around the mandala's origin instead of keeping it flat — useful for circular platforms, rings, and patterns that should follow the curve of the mandala rather than sit as a flat rectangle. The drag handle moves to the arc's centre for intuitive positioning, and Scale, Orbit and Offset X/Y all animate correctly while warped.

8. Layers Panel

The layers panel lists every stroke, shape and sprite in the active mandala, topmost layer first — and that order is real: whichever you drew or placed most recently renders on top, regardless of whether it's a stroke, a shape, or a sprite, the same way layers work in a normal design tool.

• Visibility toggle — an eye icon on every layer hides or shows it without deleting it.
• Hover highlight — hovering a layer row pulses a white outline around the matching item on the canvas (or the item's exact drawn shape, for strokes), so you can always tell what you're looking at. Hidden layers show no highlight while hidden, and reappear highlighted the moment you unhide them.
• Delete — a bin icon on drawing (stroke) layers deletes that stroke after a confirmation prompt.
• Duplicate — shapes and sprites have a Duplicate button (in the inspector, above Delete) that deep-copies the selected item — including its own animation keyframes and gradient — as an independent copy on top of the original, not a shared reference.
• Trail controls — a ∿ icon on drawing layers opens the trail-animation speed and length controls (see below) directly inline.
• Clicking a shape or sprite layer selects it, exactly like clicking it on the canvas.
• Arrow-key navigation — with a layer selected, ↑/↓ moves the selection up or down through the same real stacking order shown in the panel.
• Clear Selection — on touch devices, a button below the layer list deselects the current sprite, shape or stroke (on desktop, clicking empty canvas already does this, so the button only appears where it's actually needed).

9. Keyframe Animation

Shapes and sprites share the same animation system. Every animatable property — Scale, Rotation, Orbit, Opacity, plus position — has a ∿ button that opens a looping keyframe timeline for that property:

• Duration — how many seconds one loop of that property's animation takes.
• Keyframes — drag dots on the timeline to set a value at a specific point in the loop, or choose from a set of ready-made presets per property.
• Easing — each segment between two keyframes has its own easing curve: linear, ease, ease-in, ease-out, bounce, or elastic.
• Loop-match indicator — when a property's first and last keyframe values match, the timeline draws a faint dashed reference line and highlights the curve, so you can see at a glance that the animation will loop seamlessly.
• Radial vs. Tangential position — position animation is split into two independent controls instead of raw X/Y: Radial moves a shape straight in and out along its own axis spoke from the mandala centre, and Tangential slides it side to side around the ring at a constant distance from centre. The two stay fully decoupled from each other regardless of where on the canvas the shape was originally drawn — animating one never causes drift in the other.

10. Trail Animation

Any drawn stroke can become a fading trail instead of rendering as a static line: a bright, comet-like segment sweeps continuously along the path and fades out behind itself, then loops. Two controls are available per stroke, right in the layers panel:

• Speed — how many seconds one full sweep of the trail takes.
• Length — what percentage of the total stroke length is visible in the trail at once.
• Continuous chase — instead of pausing to let the trail catch up before restarting, the trail keeps moving forever. Closed shapes wrap the trail seamlessly through the seam like a comet orbiting endlessly; open paths (drawings and lines) chase in one direction, with a follow-on trail already starting before the previous one finishes fading out.

Trail-animated strokes keep their full gradient colouring (if any) while animating.

11. Effects

A global stack of post-processing effects, applied to the fully-rendered canvas every frame and during every export. Add as many instances as you like from the Effects panel, reorder them, toggle each on or off, and animate any of their animatable parameters with the same keyframe system as shapes and sprites:

• Bloom — a glow that blooms outward from bright areas, with Amount (up to 400%), Threshold (a real per-channel brightness cutoff — only content above the threshold contributes to the glow) and Blur Radius controls.
• Echo — a persistent fading trail of the whole canvas, like a long-exposure photograph.
• Chromatic Aberration — splits the red, green and blue channels apart for a lens-glitch look, with adjustable amount and angle.
• Vignette — darkens the canvas edges, with adjustable amount and spread.
• Zoom Blur — a radial motion-blur streaking outward from the centre.
• Hue Rotate — cycles every colour on the canvas around the colour wheel.
• Scanlines — darkens alternating horizontal rows for a CRT/retro look.
• Invert Flash — inverts the whole canvas's colours; combine with a keyframe preset for a single strobe or flash beat rather than a held invert.

12. Snapping

• Grid snap — snaps drawing and placement to a configurable X/Y grid spacing, with an optional lock to keep X and Y spacing tied together.
• Axis snap — snaps to the mandala's own symmetry guides: a configurable radial ring spacing (distance between concentric snap rings along each axis) and a configurable number of tangential subdivisions between each pair of guide lines.

13. Canvas & Viewport

• Background colour — sets the canvas background, used both on-screen and in every export.
• Canvas size presets — square (512 up to 4096), landscape (1200×900 up to 4K), portrait (900×1200 up to a 1242×2688 phone preset), or any custom width/height up to 8192×8192. Resizing preserves the existing drawing.
• Pan & zoom — scroll to pan, Ctrl/⌘+scroll to zoom toward the cursor, drag with Space or the middle mouse button held to pan, and use the zoom buttons or Fit to reset the view. On touch devices, drag with two fingers to pan and pinch to zoom, both at once, the same as a map app.

14. Multiple Mandalas

A single project can contain more than one mandala layered on the same canvas, each with its own axis count, rotation, mirror setting, strokes, shapes and sprites. Use the + button in the mandalas panel to add another, and the trash icon to delete the active one (the last remaining mandala can't be deleted).

15. Theater Mode

Theater Mode hides every toolbar and panel and centres the canvas full-screen for distraction-free viewing or presenting. A brief on-screen hint fades out after a few seconds; press Esc any time to exit back to the normal editor.

16. Exporting

All export options live under the Export menu in the toolbar:

• PNG — a single still image at the canvas's native resolution.
• Animated GIF — universally supported animated image. Mandalize recommends a frame rate and frame count automatically, based on the lowest-common-multiple loop length of every animation in the scene, so the export loops seamlessly.
• Animated WebP — same animated-loop behaviour as GIF, with a smaller file size.
• Video (MP4/WebM) — exports a real video file, automatically choosing MP4/H.264 where the browser supports it and falling back to WebM otherwise. Includes ready-made size presets for Instagram (post and Reels/Story), TikTok, YouTube Shorts, Twitter/X and Pinterest, plus configurable frame rate, duration and quality. Content is automatically letterboxed to fit a differently-shaped export frame without stretching.

Guides, selection handles and hover highlights are always hidden automatically during every export.

17. Saving & Loading Projects

Save writes the entire project — every mandala's strokes, shapes and sprites, all animation keyframes, palette images (embedded directly in the file), canvas size and background colour — to a single self-contained .json file with no external dependencies. Load reads one back exactly as it was, including every animation and layer setting.

18. Keyboard Shortcuts

← Back to Mandalize