Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

CSS3 Kaleidoscope Effect

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 css
Octocat-spinner-32 img Shave 6% off butterfly-montage with ImageOptim January 03, 2013
Octocat-spinner-32 js
Octocat-spinner-32 README.md
Octocat-spinner-32 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.