Tue 19

Pure CSS Scallop Clock from Android 12.

Android 12 Beta 5 comes with v7.0 of the Google Clock app. It includes some new analog clock designs. One of them is the Scallop design. I though this design looked cool so I decided to recreate it using only CSS.

For reference, the following image taken from the Google Pixel 6 product page shows how it actually looks:

For the outline, each hump is actually the corner of a rectangle. The "border-radius" property is used to round the corners and "skewY" is used to increase the angle between sides. There are 12 humps, thus 12 rectangles are used for the perimeter of the clock. A radial gradient is used to fill the center of the clock.

The minute and hours hands are straightforward enough. The only thing to note is that the origin of rotation is right before the tip and not at the edge.

The date text uses Google Sans as its font. You can get a copy of Google Sans through the Google Font API, although technically only Google themselves are licensed to use it. The curved text effect is achieved by transforming each letter separately.