Draw anything with a few blocks and a few rules.

1. Blocks: the only thing you draw

A block is one shape with a position, a size, a turn, a color and a handful of settings of its own. That is the whole vocabulary.

You never draw lines point by point. You pick a block from the shelf, then adjust it. A circle becomes a sun, a head, a spot on a wing or a snowball depending on where it sits and what color it is. Blocks further down the Layers list are drawn first, so later blocks sit on top, just like cut paper on a table.

The shelf has four families:

• Shapes are filled forms: circle, box, triangle, polygon, star, heart, petal, drop, egg, moon, ring, wing, ghost, blob and cloud.
• Lines are strokes: straight, curve, arc, wave, zigzag and spiral. Their color and thickness come from the outline settings.
• Algorithms are blocks that are themselves little programs: a fractal tree, a snowflake arm, the Koch snowflake, the Sierpinski triangle, a golden-angle seed spiral, a sunburst and a pattern filler.
• Characters hold the Cute face, which turns any shape into a creature.

2. Mirror: draw half, get the whole

Most living things are bilaterally symmetric: the left side mirrors the right. Butterflies, faces, leaves, beetles and people all share this.

Add a Mirror repeat (or press M) and the block is copied and flipped across a fold line. The fold is the center of the canvas unless you choose This block or A point I choose. Place your block beside the fold, not on it, or the copy lands exactly on top of the original.

Designers call this a reflection. Because our brains read symmetry as health and order, a mirrored drawing instantly looks intentional. A small, deliberate break in symmetry (a tilted head, one raised antenna) adds life. To do that, give the one part that differs its own block with no mirror.

3. Spin around: flowers, mandalas, snowflakes

Spin around copies a block around a center point, evenly spaced, like petals on a daisy or spokes on a wheel. Mathematicians call this rotational symmetry.

Six copies of one petal is a flower. Twelve copies with Color shift per copy turned up walk around the color wheel and give you a rainbow. Turn on Kaleidoscope and every other copy is mirrored too, which is exactly how a kaleidoscope’s two mirrors work. That combination of turning and flipping is called dihedral symmetry, and it is the symmetry of snowflakes, rose windows and most mandalas.

4. Step and repeat: growth and rhythm

Step and repeat makes copies one after another. Each copy moves, turns, resizes and shifts color by the same amount as the last. It is the simplest kind of iteration: do the same small thing again and again.

Small numbers matter a lot here. A resize of 0.9 shrinks slowly and gives you dozens of visible steps; 0.6 disappears in four. The swirl above is the classic “whirling squares” sketch artists have drawn since the Bauhaus. Try changing only the turn from 8° to 3° and watch it turn into a tunnel.

5. Grid: wallpaper and textiles

Grid fills rows and columns. With Brick offset every other row shifts half a step, which is how bricks, honeycombs and many fabric prints are laid out.

Mathematicians have proven there are exactly 17 ways to repeat a pattern across a flat surface using shifts, turns and mirrors. These are the wallpaper groups, and every one of them appears in the tile work of the Alhambra in Spain. You can build many of them in BlockBloom by stacking Grid with Mirror or Spin around (see section 8).

6. Scatter and seeds: controlled randomness

Scatter sprinkles copies around at random, with a bit of variety in size, turn and color. Stars, snow, confetti, freckles and grass all look better scattered than lined up.

Computers cannot really roll dice. They use a formula that produces numbers that look random, starting from a number called the seed. The same seed always gives the same sprinkle, which means your picture never changes by itself, and a share link opens exactly what you saw. Change the seed to reshuffle.

Generative artists call this idea seeded randomness. It is how an artist can make ten thousand unique variations of a design and still reproduce any one of them.

7. The golden angle: how sunflowers pack seeds

Turn by 137.5° between each seed, move a little further out each time, and you get the famous sunflower spiral. That angle is the golden angle, and it packs seeds with almost no gaps.

Why that number? If the turn were a simple fraction of a circle, such as 1/3 or 2/5, the seeds would line up in straight spokes with empty wedges between them. 137.5° is 360° divided by the golden ratio squared (about 2.618). The golden ratio is the “most irrational” number, the hardest to approximate with a fraction, so no two seeds ever line up. Nudge the angle by even a few tenths of a degree and the packing breaks.

If you count the spirals curving each way in a real sunflower, pine cone or pineapple, you usually get two neighboring Fibonacci numbers (1, 1, 2, 3, 5, 8, 13, 21, 34, 55…). The pattern is called phyllotaxis, from the Greek for “leaf arrangement”. You can use it as a block (Seed spiral) or as a repeat (Golden spiral) that works on any shape:

8. Stacking repeats: order matters

A block can have several repeats. Each one repeats everything above it in the list. That is how three simple ideas become intricate.

Both pictures below use the same two repeats on the same circle: a Spin around with 10 copies, and a Step that shrinks each copy. In the first, the Step comes first and makes a little line of shrinking dots, which Spin then copies ten times. In the second, the Spin comes first and makes a ring, which Step then copies into smaller and smaller rings.

Use the ↑ and ↓ buttons on each repeat card to change the order. Programmers would call this composition of transformations; in plain words, the recipe runs top to bottom.

9. Fractals and recursion: rules that call themselves

A recursive rule uses itself inside itself. “A branch is a stick with two smaller branches on its end” is a complete description of a tree, because each smaller branch follows the same rule.

The Fractal tree block applies that rule a set number of times (its levels). Two levels look like a slingshot. Five levels look like a winter tree. Nine levels, a little randomness and some leaves look alive. Every extra level doubles the number of tips, which is why going past nine gets slow.

The Koch snowflake (Helge von Koch, 1904) starts as a triangle. Every straight edge is replaced by an edge with a bump in the middle, then every edge of that shape gets a bump, and so on. Its outline grows longer forever while the area stays finite.

The Sierpinski triangle (Wacław Sierpiński, 1915) does the opposite: cut the middle out of a triangle, then cut the middle out of each of the three triangles left, forever. Long before Sierpiński, Cosmati stone floors in 13th-century Italian churches used the same design.

The Snowflake arm is a recursive branch too: the main arm grows side branches at an angle, and each side branch grows its own. Spin one arm around six times and you get a crystal much like the ones Wilson Bentley photographed in Vermont starting in 1885.

The botanist Aristid Lindenmayer formalized branching rules like these in 1968 as L-systems, now used to grow plants in films and games. See the References page for his free book.

10. Clipping: painting through a stencil

Clip inside hides every part of a block that falls outside another block. It works exactly like a stencil or masking tape.

This is the secret to Easter eggs: a Pattern block (stripes, zigzags, dots, waves, scallops or checks) is much bigger than the egg, then clipped inside it. The same trick puts a garland inside a Christmas tree, stripes inside a fish, or a shadow inside a round cheek.

Ukrainian pysanky eggs are traditionally decorated in bands: a line around the middle, then lines around the ends, then each band filled with its own motif. Try that with three clipped Pattern blocks, each moved to a different height.

11. Shape language: what shapes say

Before anyone sees a face, they read the outline. Animators and character designers rely on three basic shapes.

This is why heroes in cartoons are often built from circles, sturdy sidekicks from boxes, and villains from sharp triangles. Mixing them tells a story: a round character with one pointy detail (a spiky hairdo, a sharp tail) reads as “cute, with an edge”.

12. Why cute is cute

In 1943 the scientist Konrad Lorenz described the Kindchenschema (“baby schema”): the features that make babies, puppies and kittens look adorable to us. Designers have used it ever since.

The recipe is simple: a big round head, a small body, large eyes set low on the face, a tiny mouth, soft rounded edges and rosy cheeks. Both drawings below use exactly the same blocks.

This is also why Japanese kawaii characters feel so friendly. For your own creatures: start with a Circle, Blob or Ghost block, drop a Cute face a little below center, turn Eye size up, and keep the Rosy cheeks on.

13. Color: hue, value and saturation

Every color has three parts. Hue is its name on the color wheel (red, blue, teal). Value is how light or dark it is. Saturation is how vivid or gray it is.

Value does most of the work. If a picture looks muddy, it is almost always because the colors are too close in lightness, not because the hues are wrong. A quick check: squint at your picture. The main subject should stand out as a clearly lighter or darker shape.

Color harmonies

Harmonies are dependable combinations picked by their positions on the color wheel:

• Complementary: opposite hues (blue and orange, purple and yellow). High energy; let one dominate.
• Analogous: neighbors (teal, green, lime). Calm and natural.
• Triadic: three hues evenly spaced (red, yellow, blue). Playful, like toys.
• Monochrome: one hue in many values. Elegant, and impossible to get wrong.

In the studio, Shuffle colors swaps every color in your picture for one from a curated palette, and the palette row in the inspector lets you click to fill, Shift+click for a gradient’s second color, and Alt+click for the outline. Gradients and Glow fills add easy depth: use a lighter color where light hits and a deeper one in shadow.

14. Composition: where things go

Composition is the arrangement of shapes in the frame. A few habits make almost any picture stronger.

• Rule of thirds. Turn on Guides (G) to see the canvas split into thirds. Placing the main subject near where lines cross feels more alive than dead center. Symmetric subjects such as mandalas and snowflakes are the exception; they love the center.
• One focal point. Decide what the picture is about and give it the strongest contrast, the brightest color or the sharpest detail. Everything else supports it.
• Negative space. The empty area around a subject is part of the design. Leave room to breathe.
• Overlap for depth. A shape in front of another instantly reads as closer. So do larger, brighter and more detailed shapes; things far away are smaller, paler and bluer (painters call this atmospheric perspective).
• Odd numbers. Three flowers look arranged; two or four look like a lineup.

15. Recipes

Each of these matches a starter picture in the studio. Follow the steps from a blank canvas, or open the finished version and click its parts to see the settings.

Butterfly

1. Add a Wing. Move it to the right of center (arrow keys with Shift move 10 pixels at a time).
2. Press M to mirror it. Set its Fill to Gradient and pick two colors.
3. Add a Circle for a spot, place it on the upper wing, add Step and repeat (3 copies, shrinking), then Mirror.
4. Add a tall, thin Circle in the center for the body, a round one for the head, and a Cute face on top.
5. Add a Curve for one antenna and mirror it. Finish with scattered 4-point Stars behind everything.

Open the finished butterfly →

Cute ghost

1. Set the canvas background to Glow with a deep purple and a near-black.
2. Add a Ghost block. Fill: Glow, white to pale lavender. Adjust Waves and Wiggle for the hem.
3. Add a Cute face slightly above the ghost’s middle. Try the Joyful expression.
4. Add a Drop for one arm, turn it about 110°, and mirror it. Send it backward ([) so it sits behind the body.
5. Add a Moon, then tiny 4-point Stars with Scatter.

Open the finished ghost →

Christmas tree

1. Add a Triangle near the bottom. Add Step and repeat: 4 copies, move up about 90, resize 0.76.
2. Add a brown Box for the trunk and send it behind the tree.
3. Add a Wave line in yellow, give it the same Step settings as the tree, and set Clip inside to the tree. Instant garland.
4. Add ornaments: a small Circle with Step (color shift 35) and Mirror.
5. Top it with a Star and scatter white circles for snow.

Open the finished tree →

Snowflake

1. Set a dark blue Glow background.
2. Add a Snowflake arm at the canvas center. Add Spin around with 6 copies.
3. Adjust Side branches, Branch angle and Sub-branch size. Every combination is a different crystal, just like real snow.
4. Add a Polygon with 6 sides in the middle. For the background, add a tiny faded arm with Spin around (This block) and then Scatter.

Open the finished snowflake →

Easter egg

1. Add an Egg and name it “Egg”.
2. Add a Pattern block that is larger than the egg. Choose Zigzags, pick colors, then set Clip inside to Egg.
3. Add a second Pattern (Polka dots), shrink it to a band across the top, and clip it to the egg as well.
4. Duplicate the egg and its patterns (Ctrl+D) and move them for a basket of eggs, or try Shuffle colors for a new set.

Open the finished eggs →

More to open and study

The studio’s Start from a picture tab also has a flower, a sunny day, an autumn tree, a mandala, a pumpkin, a golden spiral, a heart pattern and a kitty. Open one and press . repeatedly to step through its blocks one by one.

16. Keyboard and accessibility

Everything in BlockBloom works with a keyboard alone, a mouse alone, or both together. No drawing tablet and no steady hand required.

• , and . step through blocks. Esc selects nothing.
• Arrow keys move the selected block 1 pixel; hold Shift for 10.
• + and − resize, R and Shift+R rotate 15°, F flips.
• M toggles a mirror, [ and ] change layer order, H hides, Ctrl+D duplicates, Delete deletes.
• B plays the bloom animation; Esc stops it.
• Ctrl+Z undoes and Ctrl+Shift+Z redoes, up to 150 steps. Your picture is also saved in the browser automatically.
• With the mouse: drag to move, scroll to resize, Shift+scroll to rotate.
• Every slider also has a number box, so you can type exact values.
• Press ? in the studio for the full list.

The interface uses the Atkinson Hyperlegible typeface, designed by the Braille Institute for low-vision readers, keeps visible focus outlines on every control, announces actions to screen readers, and respects your system’s reduced-motion setting.

17. Going further

• Download picture (PNG) saves a Portable Network Graphics (PNG) image at twice the canvas size, ready for printing or posting.
• Download vector (SVG) saves a Scalable Vector Graphics (SVG) file. It stays sharp at any size and opens in Inkscape, Adobe Illustrator, Affinity Designer and Figma, so you can keep refining by hand, cut it on a vinyl cutter, or laser-engrave it.
• Save project file keeps every block and repeat editable. Project files are plain JavaScript Object Notation (JSON) that you can read and even edit in a text editor.
• Bloom (the ▶ button, or B) plays your picture assembling itself, block by block and copy by copy. Download bloom animation records that as a WebM video, ready for social posts.
• Copy share link packs the whole picture into the web address. Anyone who opens the link sees your picture and can remix it.

Ready for more? The References page collects free museum collections, nature photography, pattern books, color tools and the books behind the algorithms on this page. If you write code, the project’s docs/ folder explains how to add your own blocks and repeats.