Abstract Clocks, telling the time in abstract & beautiful ways.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
clocks
index.html
readme.md
styles.css

readme.md

Abstract Clocks

These gradiental clocks are the result of the experimentation of representing time in abstract yet distict ways. Each clock has a different way of representing time, and are explained below. They'll make a lot more sense if you're looking at the clock though!

Clocks!

1 - Daily Rotation

This clock displays the time in 24 hour format. With the inner circle's dark edge, and the outer circles light edge pointing to the current time.

For Example:

  • If the time were 12 O'Clock (midnight) the inner circles dark edge would be pointing perfectly to the top.
  • If the time were 6AM the inner circles dark edge would be pointing to the right (3 oclock on a regular clock)
  • If the time were midday, the inner circles dark edge would be pointing directly down.

2 - Hourly Rotation

This clock behaves similarly to a regular wall clock, with the inner circle's dark edge pointing where the minute hand would, and the other pointing to where the hour hand would be.

For Example:

  • If the time were 12 O'Clock (midnight) the inner circles and outer dark edge would be pointing perfectly to the top.
  • If the time were 9.30AM the inner circles dark edge would be pointing to the bottom (30 minutes), and the outer edge pointing to the right (the 9 on a regular clock)
  • If the time were midday, again, both darker edges would be facing the top.

3 - Rise and Fall

This clocks gradients rise and fall throughout the day. With the outer gradient mirroring the inner.

For Example:

  • If the time were 12 O'Clock (midnight) the inner circle will be mostly filled with the darker orange, as though the sun was down.
  • If the time were 6AM the inner circles gradient would be about centered, equal parts the ligher and darker colors.
  • If the time were midday, the inner circle would be mostly light. From this point onwards, the gradients will receed with time, returning to the darker colors at midnight.

4 - Hourly Rise and Fall

This clocks inner gradient rises and then quickly falls once each hour, the outer gradient rises and falls gradually throughout the day.

For Example:

  • If the time were 12 O'Clock (midnight) the inner circle will be mostly filled with the lighter white, as well as the outer gradient with the darker color.
  • If the time were 6.30AM the inner circles gradient would be about centered, equal parts the ligher and darker colors. The outer, a little over 1/4 of the way up.
  • If the time were 12.45, the inner circle would be mostly dark (75%). The outer gradient, will be mostly light, but will be falling back to dark again, as we've passed the middle of the day.

5 - Rainbow

This clock is a color circle, rotating through time on a 12 hour schedule. The best way to understand it, is to know which colors match each time.

For Example:

  • If the time were 12 O'Clock, the clock would be split between yellows and greens.
  • If the time were 6AM or PM, the clock would be spit between purples and reds.
  • If the time were 9AM or PM, the clock would be split between reds and oranges.