Math in CSS | CSS Pain

Published: 17 November 2025
on channel: HTML Academy

325

CSS is capable of more than meets the eye. In this episode, we'll test whether it's possible to reproduce all of school mathematics with pure CSS: from straight lines to sines and cosines. It turns out it's possible, and it's easier than it seems.

In this episode:

– How to plot functions in pure CSS using absolute positioning and calc().
– Linear functions: controlling slope using the coefficient a, Y-axis offset using b, and working with negative values.
– Quadratic functions: using pow() for exponentiation, drawing parabolas, and controlling their shape.
– Cubic functions and roots of any degree using fractional exponents in pow().
– Logarithms in CSS: the log() function with different bases and arbitrary axis offsets.
– Trigonometry: plotting sine waves using sin(), cos(), and tan(), controlling amplitude, frequency, and phase.
– Practical application: where CSS math is needed in real-world layouts—parallax effects, animated menus along paths, scroll-driven animations.

The main thing is to know that these possibilities exist. An interactive demo is included so you can experiment for yourself.

Demo → https://htmlacademy.ru/demos/143
Talk "Mathematics in CSS" → • Никита Дубко. Математика в CSS: что и заче...

Timecodes:

00:00 Introduction
00:59 Straight Line
01:56 Linear Function
03:17 Quadratic Function
04:32 Cubic Function
05:20 Logarithms
05:45 Trigonometric Functions
06:33 Conclusion and Recommendations

#css #frontend #webdevelopment

On this page of the site you can watch the video online Math in CSS | CSS Pain with a duration of hours minute second in good quality, which was uploaded by the user HTML Academy 17 November 2025, share the link with friends and acquaintances, this video has already been watched 325 times on youtube and it was liked by 19 viewers. Enjoy your viewing!

407