Kaleidos: CSS3 Kaleidoscope Effects
A simple kaleidoscope effect produced with a bunch of SASS-powered CSS3 transforms.
You can pass parameters via the query string: e.g. ?n=13&src=http://someurl/someimage.png
n is a positive integer representing the number of "segments" to create within the kaleidoscope. The provided CSS enthusiastically supports up to 32 segments but the effect works best with lower values.
src is a URL for an alternate image.
Assigning a truthy value to clean inhibits the display of the link to Github.
Dedicated to @jeanettehayes, who I thought might like this kind of thing.
The name "kaleidos" is derived from the Ancient Greek καλός (kalos), "beautiful, beauty" and εἶδος (eidos), "that which is seen: form, shape".
This project is optimised for butterfly wings. A modern browser is mandatory. Happiness is mandatory.
This might be more accurately described as a teleidoscope but who has ever heard of such a thing, really.
- Some kind of build process like all the cool kids are doing.
- Hands-free animation for mobile devices and lazy people.
- Whatever @miketaylr requires for Opera.