Kaleidoscope Maker

How to use

Move a pointer over the canvas to shift the artwork’s focal point. No click or drag is needed: just moving the mouse over the canvas changes the shape. You can also focus the canvas and use the arrow keys to move the focal point in small steps.

Changes to symmetry, rotation, and color appear immediately. Choose “Turn motion on” only when you want the pattern to move. Motion is off by default.

If you are not sure what to make, press “Surprise me” to pick new settings and a new focal point all at once. Press it as many times as you like. “Start over” returns the pattern settings and focal point to how the page opened.

What each setting changes

• Focal point (pointer position): the vertical position changes the length of the petals. They are longer toward the bottom of the canvas and shorter toward the top. The horizontal position changes the width of the petals and how much their tips bend. They are wider toward the right, and the tips bend more the farther the pointer is from the center to either side.
• Symmetry: a whole number from 4 to 12, 6 by default. It sets how many times the same shape is repeated around the center.
• Rotation: 0 to 360 degrees in steps of 1 degree. It turns the whole pattern around the center. 0 and 360 degrees look the same.
• Color: the color of the largest, outermost layer. The default is violet (#7C3AED).
• Motion: when on, the whole pattern keeps turning at a constant speed, one full turn in about 18 seconds. “Stop motion” stops it at the current angle.
• Surprise me: picks a new symmetry (4 to 12), rotation (0 to 359 degrees), color, and focal point at random. The color is a vivid one, and dark hues such as blue are lightened until they have at least a 3:1 contrast ratio with the navy background. The focal point is one of the positions the arrow keys can reach (steps of 2.5%). Motion stays on or off as it was.
• Start over: returns to a symmetry of 6, a rotation of 0 degrees, violet, motion off, and the focal point at the center. The angle turned by motion also returns to 0. The “Image size” choice does not change.

Each press of an arrow key moves the focal point by 2.5% of the canvas width, so it takes 20 presses from the center to an edge. The focal point cannot leave the canvas.

How the pattern is built

The pattern is drawn by arranging petal-like shapes radially from the center. It does not load a photo or image and reflect it; the shapes are calculated from the settings.

• The same shape is placed in as many directions as the symmetry value, dividing the circle evenly.
• In each direction, a petal and its flipped mirror image are drawn as a pair. The mirror image extends to the opposite side of the center.
• With an even symmetry value and the focus at the horizontal center, opposite petals overlap and the pattern appears to extend in as many directions as the symmetry value. At 6, there are 12 petals in 6 directions. Moving the focus left or right shifts the petal tips and changes how they overlap.
• With an odd symmetry value, the mirror images fall between the petals and the pattern appears to extend in twice as many directions.
• Each petal is drawn in five layers. From the outside in they are the chosen color, violet, cyan, rose, and amber, each smaller than the one before. Only the outer color can be chosen; the four inner colors and the navy background are fixed.
• Each layer is slightly transparent and has a pale outline. Colors blend where layers and petals overlap.

Drawing the pattern uses no random numbers, so the same settings and the same focal point always give the same pattern. Random numbers are used only when “Surprise me” picks the settings.

Controls and export

Choose “Download PNG” to save the current artwork as kaleidoscope.png. If the download does not complete, the artwork and settings remain on screen so you can keep working or try again.

The saved image is square and includes the navy background. Choose its size under “Image size”:

• Same as the screen (default): the displayed width of the canvas multiplied by the pixel ratio of the screen. The current value is shown next to the option. For example, a canvas displayed 400 px wide on a screen with a pixel ratio of 2 gives an 800 × 800 px PNG. The value changes when you resize the window.
• 1080 × 1080 px: a convenient size for square social media posts.
• 2048 × 2048 px: for when you need a large image, such as a wallpaper or a print.

With 1080 px or 2048 px, the screen image is not stretched. The same settings and focal point are drawn again at that size, and the petals and outlines scale with the image, so it looks the same as on screen and its lines stay sharp. When you choose “Download PNG”, the size of the saved image is shown below the buttons.

“Share” works only in browsers that can share image files. The shared image also uses the size chosen under “Image size”. If the browser does not support it, download the PNG instead. Cancelling the share sheet does not change the artwork.

Privacy

Drawing, interaction, and PNG creation all happen in this browser and are not sent to an external API. Settings, the focal point, and the image exist only in React memory. They are not stored in cookies, a database, or localStorage. Reloading the page restores the initial state.

FAQ

Can I use it on a phone?

In browsers that support pointer input, touch can move the focal point. Dragging a finger across the canvas moves the focal point without scrolling the page. Supported file formats and share targets depend on the browser and device.

Can I save a still image with motion off?

Yes. With motion off, the visible still artwork can be saved as a PNG. If you save while motion is on, the image is the frame at the moment you press the button.

Can I make a kaleidoscope pattern from my own photo?

No. The app cannot load images; it draws shapes from the symmetry, rotation, color, and focal point settings.

Can I change the background or the inner colors?

No. The color setting changes only the outermost layer. The navy background and the inner violet, cyan, rose, and amber are fixed.

Can I set the size of the saved image?

Under “Image size” you can choose the screen size, 1080 × 1080 px, or 2048 × 2048 px. Other sizes cannot be entered. The default, “Same as the screen”, depends on the displayed width of the canvas and the pixel ratio of the screen, and changes when you resize the window.

How do I return to the initial settings?

Press “Start over” to return to a symmetry of 6, a rotation of 0 degrees, violet, motion off, and the focal point at the center. Reloading the page does the same. There is no undo for a single step, so save an artwork you like as a PNG before pressing “Surprise me” or “Start over”.