Photograph of a green leaf floating above a male hand

While developers should keep to the ideals of progressive development as much as possible when using , there are absolutely times that we must create elements ex nihilo. Often these are elements that depend on JavaScript for their functionality, and therefore should be created with JavaScript:

Drink Coca-Cola
Adjust the browser width to see changes in the SVG brand module

It has been wonderful to see used with increasing frequency for logos, but most sites only take advantage of the most obvious features of the format: its immunity to scale, innately responsiveness and small file size. In practice, this means that most SVG logos remain the same at all viewport sizes, simply growing larger or smaller.

As I’ve addressed in the past, responsiveness isn’t just about “making things squishy“: it’s about providing the user with the appropriate detail at different viewport sizes. Brands are no exception: any well-designed logo is modular, with components that can be employed at different levels of detail. This modularity should be used in web development to take maximal advantage of space in responsive designs.

I’ve previously demonstrated an analog clock made with SVG and JavaScript, which I thought used a particularly elegant technique. While it’s possible to create the clock movement with , CSS transforms and , it’s not possible to set such a clock to the correct time for the user. To do that, we need … and if we’re starting with that, it made sense to experiment with the Web Animation API, showing that it too can use steps() animation for the second hand. (Due to the newness of the Web Animation API, this demo will currently only work in Chrome).