Unfortunately, generating arcs is quite difficult to animate using standard SVG methods, so I fell back to javascript for this (the benefit of that is that it's synchronised to the system clock). I was inspired by the loopy thingies that are floating around imgur at the moment, and decided to make something that looks similar, but answers the question "what happens if they all advance at the same speed?" If you're wondering about the connection between this and the other Concentric Loops SVG, just look at the inner 6 dots. This version "ticks", has a time/date display, and has fixed an annoying bug due to how SVG displays arcs 動畫 迴圈 旋轉 同心環 v3
Another "everything comes together after 2 minutes", based on a reddit submission [http://www.reddit.com/r/gifs/comments/2on8si/connecting_to_server_so_mesmerizing/]. Each point has a frequency different of 1/120 Hz, giving a beat frequency of 2 minutes 擊敗 頻率 動畫 Beat Frequency Clock
Having developed a clock using spinning tiles, I had another thought regarding something that would exploit the clone facility of SVG. This clock "ticks" in the same way as my colour clock, but I have commented out a more normal movement if you prefer that. The code also has defined variables for changing the number of copies, and for the update interval. The template used for creating the second "tick" image is a functioning clock, and the hour and minute hand of the main clock are represented by the year and day/month respectively. This version has been modified from the previous clocky clock to add colour, which makes it a bit more satisfying to watch at each minute change 動畫 時鐘 遞迴 顏色 clocky 時鐘
I was asked by dizzyzane on reddit to make a version of this with a black background and downvote-coloured text. Here it is 動畫 時鐘 reddit Upvote 時鐘與黑色背景
I was inspired by user schiz0yd on reddit to create an animated clock that used spinning tiles. This clock "ticks" in the same way as my colour clock, but I have commented out a more normal movement if you prefer that. The code also has defined variables for changing the number of copies, and for the update interval. If you don't like the upvote arrow, you can change the object defined in the group "gTemplate 動畫 時鐘 reddit Upvote 時鐘
I was asked by -TheWaddleWaddle- on reddit to make a smooth version of this clock. Here it is 動畫 時鐘 reddit 帶有白色背景的光滑 Upvote 時鐘
Question variant of my upvote clock (font used is "Century Schoolbook L", converted to a shape for portability, with the dot replaced with a circle for precision). The question marks spin around at twice the speed that they rotate around the circle, and change colour once they complete a circle. This makes a full cycle two minutes, rather than one. [Yes, the thumnail colours are wrong. Sorry about that] 動畫 時鐘 reddit 問題時鐘
Icon for customization Mac OS X Adium. To change icon just dubble click on ID_Green.AdiumIcon file. After installation you will find new icon in Adium Preferences/Appearance/Dock icon 時尚 現代 創意 Mac OS X Animated Green Adium Icon GIF
An animated clock using colours. Blobs at the end of the hour, minute, and second regions change colours over time (red = 12, yellow = 3, green = 6, blue = 9). My idea was that this might help younger children to tell the time without having to know what numbers mean (e.g. it's yellow and orange). I have also implemented a sine-wave second "tick", and stuck the minute hand to integer positions (in a somewhat similar fashion to the DB clocks in Germany). This makes the clock a bit more interesting, because each hand tells the time in a different way. [Update frequency is 100ms, but can be changed by editing the changeTime timeout at the end of the changeTime function.] 動畫 時鐘 旋轉 彩色時鐘 5
Inspired by alex8664's Seven segment displays. Counts down from 99 to 00. SVG code can easily be modified to add/remove a digit. SVG code can be inserted into an SVG image then scaled and positioned where desired. svg animated lights work in browsers that support animation 液晶屏 領導 動畫 動畫數字顯示
Having developed a clock using spinning tiles, I had another thought regarding something that would exploit the clone facility of SVG. This clock "ticks" in the same way as my colour clock, but I have commented out a more normal movement if you prefer that. The code also has defined variables for changing the number of copies, and for the update interval. The template used for creating the second "tick" image is a functioning clock, and the hour and minute hand of the main clock are represented by the year and day/month respectively 動畫 時鐘 遞迴 Clocky 時鐘
IJoshFTW implied that the loop clock should have a one-minute cycle, so here it is 動畫 迴圈 旋轉 同心環時鐘 (1 分鐘週期)