Clock

Check out the time here!

Built with vanilla JavaScript, no libraries or frameworks.
SVG illustration designed in Adobe Illustrator.
SVG optimised with svg-optimiser.

Key learnings:

Creating custom CSS transitions with the Chrome cubic-bezier tool.

This is also a great resource for getting the cubic-bezier values you want for a transitions.

1. Add the transition to your CSS.
2. Go to the Chrome dev tools and edit the cubic-bezier attribute.
3. Copy the cubic-bezier value from the dev tools into your code.

.clock {
  transition: all 0.8s;
  transition-timing-function: cubic-bezier(0, 1.24, 0.99, 0.21);
}