Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Trigonometry in CSS
//----------------------------------*\
// TRIGONOMETRY FUNCTIONS
//----------------------------------*/
// # Trigonometry in CSS
//
// - Through Taylor/Maclaurin polynomial representation: http://people.math.sc.edu/girardi/m142/handouts/10sTaylorPolySeries.pdf
// - Useful if you don't want to use JS.
// - With CSS Variables.
// - `calc()` can't do power (x ^ y) so I used multiplication instead.
// `--angle` is in radians! Convert from degrees using `α * π / 180` (or `α * 0.01745329251`) :)
// Sine function representation
.sin {
--sin-term1: var(--angle);
--sin-term2: calc((var(--angle) * var(--angle) * var(--angle)) / 6);
--sin-term3: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 120);
--sin-term4: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 5040);
--sin-term5: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 362880);
--sin: calc(var(--sin-term1) - var(--sin-term2) + var(--sin-term3) - var(--sin-term4) + var(--sin-term5));
}
// Cosine function representation
.cos {
--cos-term1: 1;
--cos-term2: calc((var(--angle) * var(--angle)) / 2);
--cos-term3: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 24);
--cos-term4: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 720);
--cos-term5: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 40320);
--cos: calc(var(--cos-term1) - var(--cos-term2) + var(--cos-term3) - var(--cos-term4) + var(--cos-term5));
}
// Tangent function representation
.tan {
--tan-term1: var(--angle);
--tan-term2: calc((1/3) * var(--angle) * var(--angle) * var(--angle));
--tan-term3: calc((2 / 15) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle));
--tan-term4: calc((17/315) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle));
--tan: calc(var(--tan-term1) + var(--tan-term2) + var(--tan-term3) + var(--tan-term4));
}
@r3dvorak

This comment has been minimized.

Copy link

r3dvorak commented Jul 21, 2019

Hi,
how can I use this, if I don't have an angle but only the length of side a and side b ?
(the original PDF is not available any longer)

Thanks,
Richard

@stereokai

This comment has been minimized.

Copy link
Owner Author

stereokai commented Jul 22, 2019

You will have to modify these formulas to α = sin ^ -1 * (sideA / sideB) (or the equivalents of tan and cos, depending on which sides you have - see here)

@ffoodd

This comment has been minimized.

Copy link

ffoodd commented Aug 12, 2019

FYI @stereokai I’m using you SIN calculation to draw some charts with CSS :)
Here is some demo page (in French for now) → https://ffoodd.github.io/chaarts/pie-charts.html
You're credited both in source code and in details, below first chart.

Thanks a lot for this!

@stereokai

This comment has been minimized.

Copy link
Owner Author

stereokai commented Sep 9, 2019

@ffoodd that looks amazing! What a great job! I love your implementation :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.