June 26, 2025
Centaur Slider
Yesterday, I wanted to create something and ended up with a weird centaur slider. Move the thumb and see how the creature changes.
Considering I used an SVG for the human/centaur/horse, I should look into transforming the paths instead of using CSS to transition them. It will make the animations smoother. Also, I should learn how to draw horses. The second to last looks more like an alpaca 😳😅
Source code and live demo: https://codepen.io/alvaromontoro/pen/wBaNzzw
Some features of this demo:
Styling for input ranges
CSS Transitions
:has() selector
Cross-browser support: works in all major browsers (it may have something missing on Firefox)