Manuele Capacci



Kaleido is a canvas playground to experiment with visual repetition, random displacement and happy accidents.

You start loading your graphic elements (SVGs yeld better results) and the component provides you full control on number of rows and columns, and variations of elements’ size, rotation, paddings, horizontal and vertical displacement, and so on.

Change the “seed” to change the randomization, or keep it fixed if you like the particular effect you got.

Next Iterations:

  • Circular displacement
  • Displacement animation
  • Control on refresh opacity


The player includes the following properties.

Property Type Description Default
Seed numebr Randomization seed value. 1
Elements file Your graphic elements. none
Size Variation number Size variation multiplier. 1
Rotation Variation number Rotation variation in degrees. 0
Columns number Numebr of columns. 1
H. Spacing number Padding between the columns. 0
H. Displacement number Variation on horizontal position. 0
Rows number Numebr of rows. 1
V. Spacing number Padding between the rows. 0
V. Displacement number Variation on vertical position. 0

Follow me on Twitter for updates on the component or contacting me