Skip to content

Instantly share code, notes, and snippets.

@mcanthony
Created October 25, 2015 01:20
Show Gist options
  • Save mcanthony/35e8ac63571cbd5208f4 to your computer and use it in GitHub Desktop.
Save mcanthony/35e8ac63571cbd5208f4 to your computer and use it in GitHub Desktop.
Rosette Generator
<div id="rosette"></div>
// Cheating a bit: it's all a big blob of JS and CSS in S3 right now because that's how I set it up before I joined codepen.
// Each SVG (path or circle) has a class name generated from it's position relative to the others, which is what enables the SASS code to work.
// Go here to see the actual code: https://github.com/SethDavenport/visualizations
// Thanks to https://github.com/mattmischuk for his help with the slidey menu.
<script src="https://s3.amazonaws.com/generative-art/rosette-generator-bundle.js"></script>
.rosette__cell {
&:nth-of-type(even) {
fill: Lavender;
transition: cx 2s, cy 2s, opacity 0.5s ease-in-out;
}
&:hover {
opacity: 0.2;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment