Skip to content
CSS3 Kaleidoscope Effect
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
css
img
js
README.md
index.html

README.md

Kaleidos: CSS Kaleidoscope Effects

A simple kaleidoscope effect produced with a bunch of SASS-powered CSS rotation and scale transforms.

See it in action here: http://coldhead.github.com/kaleidos/ or here http://gif.ly/

Suddenly, Convenience! Add it to your browser here: https://github.com/miketaylr/kaleidos-extension/

Parameters

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.

Dedication

Dedicated to @jeanettehayes, who I thought might like this kind of thing.

Minutiae

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.

TODO

  • Some kind of build process like all the cool kids are doing.

Terms & Conditions

This project is dual licenced under the MIT and GPL licenses because that's what Cowboy said to do. I hope that's okay with everyone.

Something went wrong with that request. Please try again.