I wanted to get #17 out the door, and the MVP was basically "chord notes with shapes" (I figure that once kids start using it with the shapes, those shapes will end up being locked in, since it will be disruptive to change the shapes on them), but I wasn't able to get the CSS to look quite how I liked. Here is how it looks now:
As you can see, the shapes are pretty indistinct for the dark colors. I am also not sure I really want it to be white text on black shapes. I think what we need to do is make the shapes have an outline, but that is surprisingly hard to accomplish with CSS using clip-paths like I'm doing here. Maybe since I'm just clipping the path using some CSS shape or SVG the right thing to do is to move away from clip-path and just make those divs be a shape? Not quite sure how to accomplish that.
I wanted to get #17 out the door, and the MVP was basically "chord notes with shapes" (I figure that once kids start using it with the shapes, those shapes will end up being locked in, since it will be disruptive to change the shapes on them), but I wasn't able to get the CSS to look quite how I liked. Here is how it looks now:
As you can see, the shapes are pretty indistinct for the dark colors. I am also not sure I really want it to be white text on black shapes. I think what we need to do is make the shapes have an outline, but that is surprisingly hard to accomplish with CSS using clip-paths like I'm doing here. Maybe since I'm just clipping the path using some CSS shape or SVG the right thing to do is to move away from
clip-pathand just make those divs be a shape? Not quite sure how to accomplish that.