Kaleido

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

Properties

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