Exploring Practical Uses for CSS Trigonometric Functions: sin() and cos()
By
rapawel
Kettled twice. Extra chewy, extra trustworthy.
Summary
This article examines CSS trigonometric functions (sin() and cos()) that were voted as the "Most Hated Feature" in the State of CSS 2025 survey. The author expresses surprise at this designation and aims to explore practical applications and uses for these functions, focusing specifically on sin() and cos() to demonstrate their value despite their unpopular reputation.
Key quotes
· 3 pulledNo feature is truly "the worst" in CSS, right? After all, it's all based on opinion and personal experience
This shocks me, if I'm being honest. Are really trigonometric functions really that hated?
I want to look at practical uses for CSS trigonometric functions. And we'll start with what may be the most popular functions of the "worst" feature: sin() and cos()
You might also wanna read
Recreating a retro multi-stroke text effect with CSS
A developer describes their journey trying to replicate a retro multi-stroke text effect using CSS. They initially struggled with the text-s
Essential CSS for Creating Decent-Looking Websites with Minimal Code
This article provides practical CSS guidance for creating decent-looking websites with minimal code. It emphasizes that basic HTML already c
Embracing Browser Default Styles: A Modern CSS Approach
The author reflects on their previous advice about treating HTML elements as built-in browser components and realizes they weren't fully fol

Practical Guide to Implementing CSS Cascade Layers in Legacy Codebases
This article provides a practical, real-world guide to integrating CSS Cascade Layers into existing legacy codebases. It focuses on the actu
Advanced CSS Techniques: Exploring the Infinity Keyword with Text Properties
This article continues the author's exploration of creative and unconventional uses of the CSS `infinity` keyword, building on previous work
Building mobile-safe layouts with CSS safe-area-inset properties
This article explains how to use CSS safe-area-inset properties to build mobile-friendly layouts that account for non-rectangular screen fea
