YouTube Video: https://youtu.be/tYKlLQmg6OM
Building out an analogue clock includes a surprising amount of detail. In this video, we’ll build out our own analogue clock by creating a custom SVG, styling it with plain CSS, and animating it with vanilla JavaScript. Included in this project:
- Creating a custom SVG with circle, text, and path elements
- Using requestAnimationFrame to animate the clock performantly
- Converting the project from a functional style to an object oriented stying
- Adding world clocks from different timezones with date-fns and date-fns-tz
🔗 Key Links 🔗
- Live Demo: https://codinginpublic.dev/projects/analogue-world-clocks/
- GitHub: https://github.com/coding-in-public/analogue-world-clocks
🔗 Additional Links 🔗
- HappyHues (color palette): https://www.happyhues.co/
- NodeJS: https://nodejs.org/en/
- ParcelJS: https://parceljs.org/
- NPM package for timezones: https://www.npmjs.com/package/date-fns-tz
- List of timezones: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
📹 Related/Mentioned Videos 📹
- How to Animation SVG Strokes: https://youtu.be/-Na_WRk3k74
🌐 Connect With Me 🌐
- Website: https://www.codinginpublic.dev
- Blog: https://www.chrispennington.blog
- Twitter: https://twitter.com/cpenned