SVG Pomodoro Clock

Code Feedback
1

Here’s my tomato clock. I got into SVG sprites for this. It’s just for desktop though. No way am I going to make this responsive without getting paid for it. Feedback welcome. https://codepen.io/Code_Noob_/full/yzPrGK/

3 Likes
2

@CodeNooooob impressive, i love it so much its the best Pomodoro clock i’ve seen so far.
I wonder what library/technology did you use to draw the SVG shapes ?
keep it up

3

Thanks mate, glad you like it. I use an old version of illustrator to make SVGs on an ancient pc I have. A bit tricky, but worth the effort hopefully.

4

Agreed, hands down! Easily as good as many of the featured pens on Codepen.

Couple of minor improvements I could think of:

  • Give the Start and Reset buttons hover effects (makes them feel more buttoney/interactive)
  • Make the hammock rocking animation smooth
5

Thanks Lionel. Yeah, the hammock animation is a bit jerky. I’d have to draw a lot more frames to smooth that out though and I’m not sure that’s worth doing since nobody is really going to use this app. I’m not sure how to implement a hover effect on those buttons without getting pretty complicated, but I’ll bear your suggestion in mind. Thanks for your feedback.

6

I know next-to-nothing about animating SVGs, but isn’t there a native way to smoothly change between one path and another? I might be wrong, maybe it would require a library.

Forked with demo (implemented for #startButton only).

Changes:

/*CSS*/
#startButton:hover {
  background-image: url("http://res.cloudinary.com/lionelrowe/image/upload/v1507968833/_CLOCK_Start_button_jnmbqc_hover_r3bwu2.svg");
}

and

/*JS*/
var preload = new Image();
preload.src = 'http://res.cloudinary.com/lionelrowe/image/upload/v1507968833/_CLOCK_Start_button_jnmbqc_hover_r3bwu2.svg';
7

Hi Lionel. Yeah you can make smooth transitions to paths as far as I know, but it seems to get very complicated very quickly when dealing with complex SVGs, which makes sprites a better option for me I think. To get a smoother animation with sprites, you just need more frames. So yeah, I could do it. It’s just not worth it right now. I’ve got too much to learn. I have to learn more and better Javascript, finish the other projects, start the data visualisation certificate, etc.

About the buttons, thanks for that bit of code. That basically caches the image for later use right? Nice.

After thinking about your suggestion, first I decided that I’d need to have Javascript detect the current state of the button and then load another image as the on-hover one. That would be a bit tricky and time consuming. Then I thought maybe I could create another sprite of 2 x 6 images. The left images would be default and I could get the hover change by using hover{ background-position: right;} assuming that wouldn’t conflict with the top, center, bottom CSS already in place. But your solution of just loading a different sprite and allowing the existing CSS to deal with it works great. Thanks for that. I think I’ll use that.

8

Essentially, yes. Without the JS part, the image only starts loading the first time the user hovers over the button, so there’s visible lag that first time.

No problem! Yeah, there are often several different ways to achieve the same effect. With SVG, another one is to programmatically change fill colors, but that’s only elementary to do if the image is directly embedded in the HTML document as an svg element, not when it’s used as a background image.