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.