Pomodoro Slicer/Ripener

GitHub Pages
Source

The tomato is “sliced” while counting down a pomodoro and “ripens” while taking a break.

I’d be particularly interested in any feedback on the following:

  • The slicing effect is a hack - it’s done by drawing an SVG of the background color on top of the image. Initially, I was hoping to use CSS clip-path, but it has poor cross-browser support. Any ideas on a less hacky but still compatible way to do this?
  • Am I managing state well, and if not, how could I refactor my JS to improve this?

Thanks! :slight_smile: