Last week, I created an input range that looks like a plane flying to its destination (move the plane right and left):

I tried to add as many details as possible while keeping the code simple and independent of external resources (JavaScript or images):

• It uses a single HTML element (an input range, although it should be a <progress>)
• It includes a single JS command to update a CSS variable
• The plane takes off and lands using trigonometric functions
• Using container queries, the plane changes into a helicopter in smaller sizes (although I wouldn't recommend it to go from NYC to Madrid)
• Both the plane and helo are CSS art, not SVG (again with the independence of external resources... although I'll admit it would look better with SVG)
• It has printing styles
• It was coded with accessibility in mind (although it may not be perfect): works with a keyboard and also in high-contrast mode
• It will work in all modern browsers

Any feedback? I will write an article this weekend with more details on how it was coded. Anything you'd like me to include about the code or the process?