5 ms·

Show HN: Animated Watch Illustrations with CSS3 and SVG

41 points by mattsjohnston5 13y ago

I wanted a little project to practice illustration as well as animation on the web. Plus I'm a big fan of watches.

tantalor 13y ago
Are you trying to get sued?
- mattsjohnston5 13y ago
  I already had Timex tweet out the site! https://twitter.com/timex/status/369505126752346112 https://twitter.com/timex/status/369505126752346112
  - mmcnickle 13y ago
    I doubt Rolex will do the same. They are extremely protective of their brand[1], I'd avoid doing one of their watches. [1] To the point where they won't let you host their brand assets on your own servers. You have to link to theirs, so they can revoke access when they please.
deleted 13y ago
[deleted]
MikeAmelung 13y ago
Why does it animate counter-clockwise when I click from San Francisco to London?
- mattsjohnston5 13y ago
  I think it does that when London is already a day ahead of the current timezone. That's obviously a bit counter intuitive so if like to get that working properly.
systemtrigger 13y ago
Impressive attention to detail. I love how there is a slight difference between the way the second hand ticks, between models. Did you start each one with a photo as scaffolding and draw the SVG on top? Did you use Illustrator or Gimp? Beautiful execution.
- mattsjohnston5 13y ago
  Yeah, for each illustration I started with a front-facing photo and lined up the center of the face with the exact center of the document. From there I make sure every circle I draw is perfectly centered and I draw all the hands facing upwards.
colmvp 13y ago
Really nice job, Matt. I especially like the color choices. Very fun.
supercoder 13y ago
Lovely!
premasagar 13y ago
Very nicely executed.
emhart 13y ago
Downright inspiring. I'm not a killjoy, but I am rarely excited by these sorts of illustrative personal projects. something about this, though, really captures my attention. Especially that you intend to continue working your way through more. Many of my friends are horophiles if you happen to be taking requests. Also, any chance of you doing a time-lapse of your process at some point?
- mattsjohnston5 13y ago
  Thanks for the encouragement. I've thought about doing a tutorial, but I hadn't considered doing a tmelapse. That could be pretty cool.
  - emhart 13y ago
    Tutorials are great, but when something comes close enough to my domain to understand it pretty well, I love a timelapse as I have those "OH! I see what you did there!" moments while getting an appreciation for the full scope of the project. Either way, I'll be checking back regularly. Great work.
  - Kronopath 13y ago
    A tutorial would be wonderful. I'd actually had the idea to make something eerily similar to this for a while. I was considering something more canvas-y, but you've now got me wondering whether CSS3+SVG would be nicer.
- mattsjohnston5 13y ago
  Oh, and I love getting suggestions. Have your friends tweet me their favorite watches and I'll check them out!
  - emhart 13y ago
    Will do :)

I wanted a little project to practice illustration as well as animation on the web. Plus I'm a big fan of watches.

tantalor 13y ago

Are you trying to get sued?

mattsjohnston5 13y ago
I already had Timex tweet out the site! https://twitter.com/timex/status/369505126752346112 https://twitter.com/timex/status/369505126752346112
- mmcnickle 13y ago
  I doubt Rolex will do the same. They are extremely protective of their brand[1], I'd avoid doing one of their watches. [1] To the point where they won't let you host their brand assets on your own servers. You have to link to theirs, so they can revoke access when they please.

deleted 13y ago

[deleted]

MikeAmelung 13y ago

Why does it animate counter-clockwise when I click from San Francisco to London?

mattsjohnston5 13y ago
I think it does that when London is already a day ahead of the current timezone. That's obviously a bit counter intuitive so if like to get that working properly.

systemtrigger 13y ago

Impressive attention to detail. I love how there is a slight difference between the way the second hand ticks, between models. Did you start each one with a photo as scaffolding and draw the SVG on top? Did you use Illustrator or Gimp? Beautiful execution.

mattsjohnston5 13y ago
Yeah, for each illustration I started with a front-facing photo and lined up the center of the face with the exact center of the document. From there I make sure every circle I draw is perfectly centered and I draw all the hands facing upwards.

colmvp 13y ago

Really nice job, Matt. I especially like the color choices. Very fun.

supercoder 13y ago

Lovely!

premasagar 13y ago

Very nicely executed.

emhart 13y ago

Downright inspiring. I'm not a killjoy, but I am rarely excited by these sorts of illustrative personal projects. something about this, though, really captures my attention. Especially that you intend to continue working your way through more. Many of my friends are horophiles if you happen to be taking requests. Also, any chance of you doing a time-lapse of your process at some point?

mattsjohnston5 13y ago
Thanks for the encouragement. I've thought about doing a tutorial, but I hadn't considered doing a tmelapse. That could be pretty cool.
- emhart 13y ago
  Tutorials are great, but when something comes close enough to my domain to understand it pretty well, I love a timelapse as I have those "OH! I see what you did there!" moments while getting an appreciation for the full scope of the project. Either way, I'll be checking back regularly. Great work.
- Kronopath 13y ago
  A tutorial would be wonderful. I'd actually had the idea to make something eerily similar to this for a while. I was considering something more canvas-y, but you've now got me wondering whether CSS3+SVG would be nicer.
mattsjohnston5 13y ago
Oh, and I love getting suggestions. Have your friends tweet me their favorite watches and I'll check them out!
- emhart 13y ago
  Will do :)