ReactJS + SVG === fun. At least for me anyway.
A Pen by Seth Davenport on CodePen.
<div id="rosette"></div> |
ReactJS + SVG === fun. At least for me anyway.
A Pen by Seth Davenport on CodePen.
// 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; | |
} | |
} |