Designing watch faces with SVG and JavaScript

My homage to the creative work of Tokyoflash Japan

The canvas of three different watch faces

The designs of Tokyoflash Japan

During the 2010s, I followed the fantastic work of a company making watches with unique designs: Tokyoflash Japan.

These designs are statement pieces inspired by sci-fi, technology, culture, and fan submissions.

Many of their designs defy accessibility and readability, and that’s OK, as these pieces are driven by artistic freedom and experimentation. Some results are better than others, and some are more welcoming than others.

Years passed, and I forgot about this brand. But I recently stumbled upon their site and was inspired to remix their work.

What if I try to port these watches to the web?

Building watch faces with SVGs and JavaScript

I was looking for my next weekend project to tackle, and I wanted to try something I had never done before. Something that could teach me new things.

I was browsing Tokyoflash Japan’s site, asking myself: “What if I try to port these watches to the web? How would I go about it? Where do I start?”

Each watch face is unique and presents its own challenges. But the process that has worked for me is quite straightforward:

1. Getting acquainted with the project: Design the watch face in Figma.
2. Analysis phase: Break down the design into components, optimize them, and clean up the project.
3. Planning phase: At a high level, plan how to lay out the DOM structure of the project, the SVG assets, and which pieces to control with code.
4. Prototype phase: Use CodePen to start a quick project and experiment with the HTML structure, CSS, and JS.
5. Build it.

This article is not intended to be a tutorial but rather a brief recount of the experience of building this project.

Here’s an example of the three watch faces I’ve ported so far. Each one is showing the same time: 12:49.

Three wildly different ways to represent the same time

Let’s take a look at each design in detail and learn how to read the time.

Watchface: Kisai

A minimalistic style that aims for maximum simplicity and intuitiveness.

Watchface diagram: Spider | Time shown: 4:42

How to read the time:

• The position represents the hour hand. In the example above, it’s “4”.
• The displayed number represents the minute hand. In the example above, it’s “42”.
• The time shown is 4:42.

Watchface: Spider

A cryptic style that demands your attention to figure out the time.

Watchface diagram: Spider | Time shown: 12:49

How to read the time:

• Each concentric hexagon represents one digit in the 00:00 format.
• The time is read from the outer ring to the inner ring. (not ‘left-to-right’)
• The time shown is 12:49.

Watchface: Adjust

A modular style that shows the time through pattern recognition.

Watchface diagram: Adjust | Time shown: 12:35

How to read the time:

• Each two vertical boxes represent one digit.
• Then, the two digits at the top represent the hours. The two at the bottom represent the minutes.
• The time shown is 12:35.

The designs from Tokyoflash Japan are bold, unique, and true statements of applied art. I’ve been having a lot of fun porting these designs to the web, and I’ve learned a lot about SVGs, including controlling them using JS.

I created a site where I upload these designs; please check it out:

I launched a site so you can try these watch faces on your own

Please visit watchface.netlify.app and experience checking the time using these watch faces.

I‘m in Mastodon talking about design and prototyping tools. If you liked reading this post, follow me there as I continue to document findings and observations related to Interaction Design.