
Show HN: SVG Clocks - Edmond
https://s3.amazonaws.com/macslow/index.html
======
onion2k
Very nice indeed. Technically you should be able to do the same thing in
CSS... I knocked this together in 20 minutes as a proof of concept:
[http://codepen.io/onion2k/details/kmouK](http://codepen.io/onion2k/details/kmouK)

Sadly you'd need some JS to set them to the right time though, which rather
ruins the beauty of it. I think. If anyone knows a way to do it without JS I'd
love to hear how.

~~~
leephillips
I made a star chart, which is kind of like a clock in the form of a map of the
sky, in pure HTML/CSS, that starts at the correct current time without
resorting to JS:

[http://lee-phillips.org/skymap/](http://lee-phillips.org/skymap/)

You might consider my solution cheating, however.

EDIT: The trick I used is basically what jwarren describes below.

~~~
onion2k
Interesting article and a great app. But yeah, that's "cheating". :)

------
blueblob
The purple animal thing has the hands render at the wrong place (not the
center) on my machine, cool idea though.

~~~
jebus989
Oh I thought that was an abstract clock design

~~~
Edmond
lol, you could interpret it that way...a work of art :)

------
scoot
Reminds me of something an early web-server software development company Roxen
did for one of their clients, a watch manufacturer, circa 1995/6.

Basically they were rendering an animated gif on the server and streaming to
the browser, so that the watch told the correct time, but the hands appeared
behind the glass of the photo-realistic watch.

This was when most sites (not that there were many!) only had rudimentary
static graphics, with the odd flashing "under construction' sign.

I googled, but couldn't find any reference to it, although Roxen the company
still seems to be going, with the Roxen Web Server having become a CMS
platform.

------
bradleyland
Clock 19 shows the incorrect time for me, but it's the one I'm most interested
in using. I'm diving in to the code right now, but I'm struggling to
understand the math on lines 57-60 of the SVG:

    
    
        //smooth-out the rotation of the hour hand: rotate 0.008333333 of a degree every second
        hour_rotate_angle = ((30*tDate.getHours())-90)+(0.008333333*((tDate.getMinutes()*60)+tDate.getSeconds()));
        hour_hand.setAttribute(&quot;transform&quot;, &quot;rotate(&quot;+hour_rotate_angle+&quot;,50,50)&quot;);
        hour_hand_shadow.setAttribute(&quot;transform&quot;, &quot;rotate(&quot;+hour_rotate_angle+&quot;,50,50)&quot;);
    

360/0.008333333 is 43,200.

43,200 seconds equates to only 12 hours, so I'm wondering if this clock is off
because it's missing 12 hours out of the day. If I half the coefficient
0.008333333 to 0.004166666, does that make it correct...

I think I just ironed out my struggle. I'm posting this before I know the
result... I hope the suspense is killing you all.

~~~
Edmond
You are going to be disappointed in my answer: I can't remember what I was
thinking :)

I only dug out these clocks over the weekend and tweaked the home page a bit
before posting it here. I haven't touched the actual Javascript or svg in over
5 yrs!

I initially posted them so they could be used with iGoogle gadgets (remember
those?) The original clocks where hosted on Google sites (just to show their
age :))
[https://sites.google.com/site/clockamatics/](https://sites.google.com/site/clockamatics/)

If I had to guess, that magic number is some sort of compensator to smooth out
the animation, but I honestly don't remember...should be a lesson for why code
should be well documented:)

~~~
bradleyland
I posted a reply above before refreshing the page, so I hadn't seen your
reply. Hope this helps your project :)

~~~
Edmond
thank you! I'll update it.

------
erbbysam
Nice work, sorry to be that guy, but it should IIII, not IV on the second
clock face - [http://www.ubr.com/clocks/frequently-asked-questions-
faq/faq...](http://www.ubr.com/clocks/frequently-asked-questions-faq/faq-
roman-iiii-vs-iv-on-clock-dials.aspx) ( via
[https://en.wikipedia.org/wiki/Roman_numerals](https://en.wikipedia.org/wiki/Roman_numerals)
)

------
ccurtsinger
Looks nice, but the hour hand is wrong on all the 24 hour clocks.

~~~
blueblob
Is it just that you are in a different timezone than the author?

~~~
ccurtsinger
No. The clocks use the local Date object, but the rotation calculations for
hour hand were copied over from a 12 hour clock.

One downside of 24 hour clocks: a broken one is only right _once_ a day.

~~~
rplnt
Another downside is that it's confusing all day long. I have yet to see such
clock somewhere else than US television. And to be honest, I don't see a point
of such clock-face.

~~~
cormullion
Here are some more for you to see...

[http://24hourtime.info](http://24hourtime.info)

------
slowmover
TIL one can embed javascript in SVG. Can it be used to do more than just
changing the positions and rotations of objects already defined in the file?
(In other words, could someone write Space Invaders entirely in SVG?)

~~~
eitland
I made GPS navigation in SVG back in 2005:
[http://techinorg.blogspot.no/p/erik-
itland.html](http://techinorg.blogspot.no/p/erik-itland.html)

------
njx
Here is a D3 based SVG analog clock dashboard
[https://my.infocaptor.com/dash/mt.php?pa=world_clocks_using_...](https://my.infocaptor.com/dash/mt.php?pa=world_clocks_using_d3_part2_511031bc87e14)

------
thoughtmonster
Pretty cool! Reminds me of wrist.im ([http://wrist.im](http://wrist.im)),
which is an attempt to faithfully recreate several iconic (new and old) wrist-
watches in SVG.

------
kendalk
Wow, beautiful!

I'm wondering if there are some uses for this, apart from just having a clock
in your browser which is cool enough.

------
valarauca1
Nicely Done.

I noticed when it updates the second hand (this is present on most clocks).
The hand moves and appears very blocking for several frames until anti-
aliasing kicks in.

Is this a web browser issue?

(FF27, windows 7 x86_64).

~~~
Edmond
It appears to happen on FF only. I have Chrome and it is smooth....might
reflect a regression on the part of FF because I actually did these ports
about 5 yrs ago and don't remember the lagging in the past.

------
farnulfo
Nice but can't beat the original QClockTwo
[http://www.qlocktwo.com/info.php?lang=en](http://www.qlocktwo.com/info.php?lang=en)
!

------
hankScorpi0
Slick stuff. Clock 8, 15 seem to be applying incorrect transformations to the
hands (although I have seen some very odd clocks out there).

------
agwa
Very cool!

What's the copyright/license on these?

~~~
Edmond
consider it creative commons...in other words do with it as you please...The
original SVGs were created for linux desktop and I believe they were GPL, I
only added Javascript to make it browser friendly.

------
Eleutheria
Oh god, I coded my first xml clock in 2002 very similar to #1. I even had the
first web page completely done in SVG. The whole index.html was a nicely done
svg tag with a sidebar and links with plenty of transparencies and rounded
corners.

Those were the days. Phoenix was the browser.

------
flaxin
the clocks are great BUT am getting 403 responses

NetworkError: 403 Forbidden -
[https://s3.amazonaws.com/macslow/clock#{i}.svg?w=3&h=3](https://s3.amazonaws.com/macslow/clock#{i}.svg?w=3&h=3)

NetworkError: 403 Forbidden - [https://s3.amazonaws.com/macslow/images/ui-
bg_glass_75_e6e6e...](https://s3.amazonaws.com/macslow/images/ui-
bg_glass_75_e6e6e6_1x400.png)

NetworkError: 403 Forbidden - [https://s3.amazonaws.com/macslow/images/ui-
icons_888888_256x...](https://s3.amazonaws.com/macslow/images/ui-
icons_888888_256x240.png)

NetworkError: 403 Forbidden - [https://s3.amazonaws.com/macslow/images/ui-
bg_flat_75_ffffff...](https://s3.amazonaws.com/macslow/images/ui-
bg_flat_75_ffffff_40x100.png)

~~~
Edmond
yea those are due to JQuery UI icons for the spinner control not being
accessible...I'll fix it.

