I had some fun coding an old Math joke using HTML and CSS, with a touch of trigonometry functions –yes, CSS has some of those too! So here's a hippopotamus happily sleeping on the hypotenuse of a right triangle.
Two things I learned during the coding process:
- It's incredibly easy to add Greek alphabet letters using HTML entities like θ and ψ (even the capitalized versions!) Maybe it's common knowledge, but I learned it today, and that's nice.
- Discovering the hypot() function in CSS. I'm familiar with other trigonometric functions but I had never heard of this one, and it made calculating the hypotenuse of the triangle based on the other two sides a piece of cake.
I always say that CSS Art is good for learning... and it's true! Even when you have some experience with the languages involved in the process.
Source code and live demo: https://codepen.io/alvaromontoro/pen/xbwZVLa
-----
Music: bensound.com
License code: P8J1KZEE2WQ24WGZ
Artist: : Benjamin Tissot
