Kaleidoscope Image React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import KaleidoscopeImage from "./KaleidoscopeImage";

export default function Example() {
  return (
    <KaleidoscopeImage
      src={"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22600%22%20viewBox%3D%220%200%20600%20600%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22ink%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23233a54%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238588ad%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23ink)%22%20d%3D%22M0%200h600v600H0z%22%2F%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22190%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23e0c9a0%22%20stroke-width%3D%2212%22%2F%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22190%22%20r%3D%2278%22%20fill%3D%22none%22%20stroke%3D%22%23a5b7cc%22%20stroke-width%3D%2220%22%2F%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22190%22%20r%3D%22106%22%20fill%3D%22none%22%20stroke%3D%22%23162a43%22%20stroke-width%3D%2220%22%2F%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22190%22%20r%3D%22134%22%20fill%3D%22none%22%20stroke%3D%22%23e0c9a0%22%20stroke-width%3D%2212%22%2F%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22190%22%20r%3D%22162%22%20fill%3D%22none%22%20stroke%3D%22%23a5b7cc%22%20stroke-width%3D%2220%22%2F%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22190%22%20r%3D%22190%22%20fill%3D%22none%22%20stroke%3D%22%23162a43%22%20stroke-width%3D%2220%22%2F%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22190%22%20r%3D%22218%22%20fill%3D%22none%22%20stroke%3D%22%23e0c9a0%22%20stroke-width%3D%2212%22%2F%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22190%22%20r%3D%22246%22%20fill%3D%22none%22%20stroke%3D%22%23a5b7cc%22%20stroke-width%3D%2220%22%2F%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22190%22%20r%3D%22274%22%20fill%3D%22none%22%20stroke%3D%22%23162a43%22%20stroke-width%3D%2220%22%2F%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22190%22%20r%3D%22302%22%20fill%3D%22none%22%20stroke%3D%22%23e0c9a0%22%20stroke-width%3D%2212%22%2F%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22190%22%20r%3D%22330%22%20fill%3D%22none%22%20stroke%3D%22%23a5b7cc%22%20stroke-width%3D%2220%22%2F%3E%3Cpath%20d%3D%22M0%20410Q250%20160%20600%20480%22%20fill%3D%22none%22%20stroke%3D%22%23d2ac91%22%20stroke-width%3D%2220%22%2F%3E%3Cpath%20d%3D%22M0%20450Q250%20200%20600%20520%22%20fill%3D%22none%22%20stroke%3D%22%23e1d6bb%22%20stroke-width%3D%225%22%2F%3E%3C%2Fsvg%3E"}
      alt={"Mirrored blue, lilac and warm gold concentric ribbons"}
      segments={10}
      speed={45}
      zoom={0.8}
      paused={false}
      radius={24}
    />
  );
}

Using Kaleidoscope Image

Supply an image with clear shapes or varied colour through src. The component mirrors sections of that image rather than generating its own artwork.

Use segments to change the radial geometry and zoom to choose which details fill it. Each instance has its own SVG clipping ID, and reduced motion stops rotation.

Props

Name	Type	Required	Default	Description
src	string	No	""	Source image URL or data URL.
alt	string	No	""	Accessible description of the complete pattern.
segments	number	No	10	Even number of mirrored wedges, from 4 to 20.
speed	number	No	45	Seconds per complete rotation.
zoom	number	No	1	Scale of the image inside each wedge.
paused	boolean	No	false	Freeze the rotation.
radius	number	No	24	Frame corner radius in pixels.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.