{"id":377074,"date":"2023-03-08T06:05:52","date_gmt":"2023-03-08T14:05:52","guid":{"rendered":"https:\/\/css-tricks.com\/?p=377074"},"modified":"2023-03-08T06:06:03","modified_gmt":"2023-03-08T14:06:03","slug":"creating-a-clock-with-the-new-css-sin-and-cos-trigonometry-functions","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/creating-a-clock-with-the-new-css-sin-and-cos-trigonometry-functions\/","title":{"rendered":"Creating a Clock with the New CSS sin() and cos() Trigonometry Functions"},"content":{"rendered":"\n<p>CSS trigonometry functions are here! Well, they are if you\u2019re using the latest versions of Firefox and Safari, that is. Having this sort of mathematical power in CSS opens up a whole bunch of possibilities. In this tutorial, I thought we\u2019d dip our toes in the water to get a feel for a couple of the newer functions: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/sin\" rel=\"noopener\"><code>sin()<\/code><\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/cos\" rel=\"noopener\"><code>cos()<\/code><\/a>.<\/p>\n\n\n\n<p>There are other trigonometry functions in the pipeline \u2014 including <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/tan\" rel=\"noopener\"><code>tan()<\/code><\/a> \u2014 so why focus just on <code>sin()<\/code> and <code>cos()<\/code>? They happen to be perfect for the idea I have in mind, which is to place text along the edge of a circle. That\u2019s been covered here on CSS-Tricks when <a href=\"https:\/\/css-tricks.com\/set-text-on-a-circle\/\">Chris shared an approach that uses a Sass mixin<\/a>. That was six years ago, so let\u2019s give it the bleeding edge treatment.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Here\u2019s what I have in mind. Again, it\u2019s only supported in Firefox and Safari at the moment:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvxOQKo\" src=\"\/\/codepen.io\/anon\/embed\/wvxOQKo?height=650&amp;theme-id=1&amp;slug-hash=wvxOQKo&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvxOQKo\" title=\"CodePen Embed wvxOQKo\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>So, it\u2019s not exactly like words forming a circular shape, but we are placing text characters along the circle to form a clock face. Here\u2019s some markup we can use to kick things off:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"clock\">\n  &lt;div class=\"clock-face\">\n    &lt;time datetime=\"12:00\">12&lt;\/time>\n    &lt;time datetime=\"1:00\">1&lt;\/time>\n    &lt;time datetime=\"2:00\">2&lt;\/time>\n    &lt;time datetime=\"3:00\">3&lt;\/time>\n    &lt;time datetime=\"4:00\">4&lt;\/time>\n    &lt;time datetime=\"5:00\">5&lt;\/time>\n    &lt;time datetime=\"6:00\">6&lt;\/time>\n    &lt;time datetime=\"7:00\">7&lt;\/time>\n    &lt;time datetime=\"8:00\">8&lt;\/time>\n    &lt;time datetime=\"9:00\">9&lt;\/time>\n    &lt;time datetime=\"10:00\">10&lt;\/time>\n    &lt;time datetime=\"11:00\">11&lt;\/time>\n  &lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>Next,&nbsp;here are&nbsp;some&nbsp;super&nbsp;basic styles for the&nbsp;<code>.clock-face<\/code>&nbsp;container. I decided to use&nbsp;the&nbsp;<code>&lt;time&gt;<\/code> tag with a&nbsp;<code>datetime<\/code> attribute.&nbsp;<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.clock {\n  --_ow: clamp(5rem, 60vw, 40rem);\n  --_w: 88cqi;\n  aspect-ratio: 1;\n  background-color: tomato;\n  border-radius: 50%;\n  container-type: inline;\n  display: grid;\n  height: var(--_ow);\n  place-content: center;\n  position: relative;\n  width var(--_ow);\n}<\/code><\/pre>\n\n\n\n<p>I decorated things a bit in there, but only to get the basic shape and background color to help us see what we\u2019re doing. Notice how we save the <code>width<\/code> value in a <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-custom-properties\/\">CSS variable<\/a>. We\u2019ll use that later. Not much to look at so far:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"315\" height=\"373\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/1_art_experiment.png?resize=315%2C373&#038;ssl=1\" alt=\"Large tomato colored circle with a vertical list of numbers 1-12 on the left.\" class=\"wp-image-377159\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/1_art_experiment.png?w=315&amp;ssl=1 315w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/1_art_experiment.png?resize=253%2C300&amp;ssl=1 253w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>It looks like some sort of modern art experiment, right? Let\u2019s introduce a new variable, <code>--_r<\/code>, to store the circle\u2019s <strong>radius<\/strong>, which is equal to half of the circle\u2019s width. This way, if the width (<code>--_w<\/code>) changes, the radius value (<code>--_r<\/code>) will also update \u2014 thanks to another CSS math function, <code>calc()<\/code>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.clock {\n  --_w: 300px;\n  --_r: calc(var(--_w) \/ 2);\n  \/* rest of styles *\/\n}<\/code><\/pre>\n\n\n\n<p>Now, a bit of math. A circle is 360 degrees. We have 12 labels on our clock, so want to place the numbers every 30 degrees (<code>360 \/ 12<\/code>). In math-land, a circle begins at 3 o\u2019clock, so noon is actually <strong>minus 90 degrees<\/strong> from that, which is 270 degrees (<code>360 - 90<\/code>).<\/p>\n\n\n\n<p>Let\u2019s add another variable, <code>--_d<\/code>, that we can use to set a <strong>degree<\/strong> value for each number on the clock face. We\u2019re going to increment the values by 30 degrees to complete our circle:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.clock time:nth-child(1) { --_d: 270deg; }\n.clock time:nth-child(2) { --_d: 300deg; }\n.clock time:nth-child(3) { --_d: 330deg; }\n.clock time:nth-child(4) { --_d: 0deg; }\n.clock time:nth-child(5) { --_d: 30deg; }\n.clock time:nth-child(6) { --_d: 60deg; }\n.clock time:nth-child(7) { --_d: 90deg; }\n.clock time:nth-child(8) { --_d: 120deg; }\n.clock time:nth-child(9) { --_d: 150deg; }\n.clock time:nth-child(10) { --_d: 180deg; }\n.clock time:nth-child(11) { --_d: 210deg; }\n.clock time:nth-child(12) { --_d: 240deg; }<\/code><\/pre>\n\n\n\n<p>OK, now\u2019s the time to get our hands dirty with the <code>sin()<\/code> and <code>cos()<\/code> functions! What we want to do is use them to get the X and Y coordinates for each number so we can place them properly around the clock face.<\/p>\n\n\n\n<p>The formula for the X coordinate is <code>radius + (radius * cos(degree))<\/code>. Let\u2019s plug that into our new <code>--_x<\/code> variable:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">--_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));<\/code><\/pre>\n\n\n\n<p>The formula for the Y coordinate is <code>radius + (radius * sin(degree))<\/code>. We have what we need to calculate that:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">--_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));<\/code><\/pre>\n\n\n\n<p>There are a few housekeeping things we need to do to set up the numbers, so let\u2019s put some basic styling on them to make sure they are absolutely positioned and placed with our coordinates:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.clock-face time {\n  --_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));\n  --_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));\n  --_sz: 12cqi;\n  display: grid;\n  height: var(--_sz);\n  left: var(--_x);\n  place-content: center;\n  position: absolute;\n  top: var(--_y);\n  width: var(--_sz);\n}<\/code><\/pre>\n\n\n\n<p>Notice <code>--_sz<\/code>, which we\u2019ll use for the <code>width<\/code> and <code>height<\/code> of the numbers in a moment. Let\u2019s see what we have so far.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"348\" height=\"364\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/2_off_pos.png?resize=348%2C364&#038;ssl=1\" alt=\"Large tomato colored circle with off-centered hour number labels along its edge.\" class=\"wp-image-377161\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/2_off_pos.png?w=348&amp;ssl=1 348w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/2_off_pos.png?resize=287%2C300&amp;ssl=1 287w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>This definitely looks more like a clock! See how the top-left corner of each number is positioned at the correct place around the circle? We need to \u201cshrink\u201d the radius when calculating the positions for each number. We can <em>deduct<\/em> the size of a number (<code>--_sz<\/code>) from the size of the circle (<code>--_w<\/code>), before we calculate the radius:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">--_r: calc((var(--_w) - var(--_sz)) \/ 2);<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"314\" height=\"314\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/3_correct_pos.png?resize=314%2C314&#038;ssl=1\" alt=\"Large tomato colored circle with hour number labels along its rounded edge.\" class=\"wp-image-377164\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/3_correct_pos.png?w=314&amp;ssl=1 314w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/3_correct_pos.png?resize=300%2C300&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/3_correct_pos.png?resize=150%2C150&amp;ssl=1 150w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Much better! Let\u2019s change the colors, so it looks more elegant:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"717\" height=\"689\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/nY6Vbx2b.png?resize=717%2C689&#038;ssl=1\" alt=\"A white clock face with numbers against a dark gray background. The clock has no arms.\" class=\"wp-image-377119\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/nY6Vbx2b.png?w=717&amp;ssl=1 717w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/nY6Vbx2b.png?resize=300%2C288&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>We could stop right here! We accomplished the goal of placing text around a circle, right? But what\u2019s a clock without arms to show hours, minutes, and seconds?<\/p>\n\n\n\n<p>Let\u2019s use a single CSS animation for that. First, let\u2019s add three more elements to our markup,<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"clock\">\n  &lt;!-- after &lt;time>-tags -->\n  &lt;span class=\"arm seconds\">&lt;\/span>\n  &lt;span class=\"arm minutes\">&lt;\/span>\n  &lt;span class=\"arm hours\">&lt;\/span>\n  &lt;span class=\"arm center\">&lt;\/span>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>Then some common markup for all three arms. Again, most of this is just make sure the arms are absolutely positioned and placed accordingly:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.arm {\n  background-color: var(--_abg);\n  border-radius: calc(var(--_aw) * 2);\n  display: block;\n  height: var(--_ah);\n  left: calc((var(--_w) - var(--_aw)) \/ 2);\n  position: absolute;\n  top: calc((var(--_w) \/ 2) - var(--_ah));\n  transform: rotate(0deg);\n  transform-origin: bottom;\n  width: var(--_aw);\n}<\/code><\/pre>\n\n\n\n<p>We\u2019ll use the <strong>same animation<\/strong> for all three arms:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes turn {\n  to {\n    transform: rotate(1turn);\n  }\n}<\/code><\/pre>\n\n\n\n<p>The only difference is the time the individual arms take to make a full turn. For the <strong>hours arm<\/strong>, it takes <strong>12 hours<\/strong> to make a full turn. The <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/animation\/\"><code>animation-duration<\/code><\/a> property only accepts values in milliseconds and seconds. Let\u2019s stick with seconds, which is 43,200 seconds (<code>60 seconds * 60 minutes * 12 hours<\/code>).<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">animation: turn 43200s infinite;<\/code><\/pre>\n\n\n\n<p>It takes <strong>1 hour<\/strong> for the <strong>minutes arm<\/strong> to make a full turn. But we want this to be a <a href=\"https:\/\/css-tricks.com\/using-multi-step-animations-transitions\/\">multi-step animation<\/a> so the movement between the arms is staggered rather than linear. We\u2019ll need 60 steps, one for each minute:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">animation: turn 3600s steps(60, end) infinite;<\/code><\/pre>\n\n\n\n<p>The <strong>seconds arm<\/strong> is <em>almost the same<\/em> as the minutes arm, but the duration is 60 seconds instead of 60 minutes:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">animation: turn 60s steps(60, end) infinite;<\/code><\/pre>\n\n\n\n<p>Let\u2019s update the properties we created in the common styles:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.seconds {\n  --_abg: hsl(0, 5%, 40%);\n  --_ah: 145px;\n  --_aw: 2px;\n  animation: turn 60s steps(60, end) infinite;\n}\n.minutes {\n  --_abg: #333;\n  --_ah: 145px;\n  --_aw: 6px;\n  animation: turn 3600s steps(60, end) infinite;\n}\n.hours {\n  --_abg: #333;\n  --_ah: 110px;\n  --_aw: 6px;\n  animation: turn 43200s linear infinite;\n}<\/code><\/pre>\n\n\n\n<p>What if we want to start at the current time? We need a little bit of JavaScript:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const time = new Date();\nconst hour = -3600 * (time.getHours() % 12);\nconst mins = -60 * time.getMinutes();\napp.style.setProperty('--_dm', `${mins}s`);\napp.style.setProperty('--_dh', `${(hour+mins)}s`);<\/code><\/pre>\n\n\n\n<p>I\u2019ve added&nbsp;<code>id=\"app\"<\/code>&nbsp;to the clockface and set two new custom properties on it that set a negative&nbsp;<code>animation-delay<\/code>, as Mate Marschalko did <a href=\"https:\/\/css-tricks.com\/of-course-we-can-make-a-css-only-clock-that-tells-the-current-time\/\">when he shared a CSS-only clock<\/a>. The&nbsp;<code>getHours()<\/code> method of JavaScipt&#8217;s&nbsp;<code>Date<\/code> object is using the 24-hour format, so we use the&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Remainder\" target=\"_blank\" rel=\"noreferrer noopener\"><code>remainder<\/code> operator<\/a>&nbsp;to convert it into 12-hour format.<\/p>\n\n\n\n<p>In the CSS, we need to add the&nbsp;<code>animation-delay<\/code>&nbsp;as well:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.minutes {\n  animation-delay: var(--_dm, 0s);\n  \/* other styles *\/\n}\n\n.hours {\n  animation-delay: var(--_dh, 0s);\n  \/* other styles *\/\n}<\/code><\/pre>\n\n\n\n<p><strong>Just one more thing.<\/strong> Using CSS&nbsp;<code>@supports<\/code>&nbsp;and the properties we\u2019ve already created, we can provide a fallback to browsers that do not supprt&nbsp;<code>sin()<\/code>&nbsp;and&nbsp;<code>cos()<\/code>. (Thank you, Temani Afif!):<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@supports not (left: calc(1px * cos(45deg))) {\n\u00a0 time {\n\u00a0 \u00a0 left: 50% !important;\n\u00a0 \u00a0 top: 50% !important;\n\u00a0 \u00a0 transform: translate(-50%,-50%) rotate(var(--_d)) translate(var(--_r)) rotate(calc(-1*var(--_d)))\n\u00a0 }\n}<\/code><\/pre>\n\n\n\n<p>And, voil\u00e0! Our clock is done! Here\u2019s the final demo one more time. Again, it\u2019s only supported in Firefox and Safari at the moment.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvxOQKo\" src=\"\/\/codepen.io\/anon\/embed\/preview\/wvxOQKo?height=650&amp;theme-id=1&amp;slug-hash=wvxOQKo&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvxOQKo\" title=\"CodePen Embed wvxOQKo\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"what-else-can-we-do\">What else can we do?<\/h3>\n\n\n<p>Just messing around here, but we can quickly turn our clock into a circular image gallery by replacing the&nbsp;<code>&lt;time&gt;<\/code>&nbsp;tags with&nbsp;<code>&lt;img&gt;<\/code> then updating the width (<code>--_w<\/code>) and radius (<code>--_r<\/code>) values:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abjQeZy\" src=\"\/\/codepen.io\/anon\/embed\/abjQeZy?height=700&amp;theme-id=1&amp;slug-hash=abjQeZy&amp;default-tab=result\" height=\"700\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abjQeZy\" title=\"CodePen Embed abjQeZy\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Let\u2019s try one more. I mentioned earlier how the clock looked kind of like a modern art experiment. We can lean into that and re-create a pattern I saw on a poster (that I unfortunately didn\u2019t buy) in an art gallery the other day. As I recall, it was called \u201cMoon\u201d and consisted of a bunch of dots forming a circle.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"897\" height=\"874\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/s_2756772B6AAC4896CD9BFF036E07360F7C8D595A4B775A1B72DBF756AC4018A4_1675325303440_image.png?resize=897%2C874&#038;ssl=1\" alt=\"A large circle formed out of a bunch of smaller filled circles of various earthtone colors.\" class=\"wp-image-377080\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/s_2756772B6AAC4896CD9BFF036E07360F7C8D595A4B775A1B72DBF756AC4018A4_1675325303440_image.png?w=897&amp;ssl=1 897w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/s_2756772B6AAC4896CD9BFF036E07360F7C8D595A4B775A1B72DBF756AC4018A4_1675325303440_image.png?resize=300%2C292&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/s_2756772B6AAC4896CD9BFF036E07360F7C8D595A4B775A1B72DBF756AC4018A4_1675325303440_image.png?resize=768%2C748&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>We\u2019ll use an unordered list this time since the circles don\u2019t follow a particular order. We\u2019re not even going to put all the list items in the markup. Instead, let\u2019s inject them with JavaScript and add a few controls we can use to manipulate the final result.<\/p>\n\n\n\n<p>The controls are range inputs (<code>&lt;input type=\"range\"&gt;)<\/code> which we\u2019ll wrap in a <code>&lt;form&gt;<\/code> and listen for the <code>input<\/code> event.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;form id=\"controls\">\n  &lt;fieldset>\n    &lt;label>Number of rings\n      &lt;input type=\"range\" min=\"2\" max=\"12\" value=\"10\" id=\"rings\" \/>\n    &lt;\/label>\n    &lt;label>Dots per ring\n      &lt;input type=\"range\" min=\"5\" max=\"12\" value=\"7\" id=\"dots\" \/>\n    &lt;\/label>\n    &lt;label>Spread\n      &lt;input type=\"range\" min=\"10\" max=\"40\" value=\"40\" id=\"spread\" \/>\n    &lt;\/label>\n  &lt;\/fieldset>\n&lt;\/form><\/code><\/pre>\n\n\n\n<p>We\u2019ll run this method on \u201cinput\u201d, which will create a bunch of <code>&lt;li&gt;<\/code> elements with the degree (<code>--_d<\/code>) variable we used earlier applied to each one. We can also repurpose our radius variable (<code>--_r<\/code>) .<\/p>\n\n\n\n<p>I also want the dots to be different colors. So, let\u2019s randomize (well, not <em>completely<\/em> randomized) the HSL color value for each list item and store it as a new CSS variable, <code>--_bgc<\/code>:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const update = () => {\n  let s = \"\";\n  for (let i = 1; i &lt;= rings.valueAsNumber; i++) {\n    const r = spread.valueAsNumber * i;\n    const theta = coords(dots.valueAsNumber * i);\n    for (let j = 0; j &lt; theta.length; j++) {\n      s += `&lt;li style=\"--_d:${theta[j]};--_r:${r}px;--_bgc:hsl(${random(\n        50,\n        25\n      )},${random(90, 50)}%,${random(90, 60)}%)\">&lt;\/li>`;\n    }\n  }\n  app.innerHTML = s;\n}<\/code><\/pre>\n\n\n\n<p>The <code>random()<\/code> method picks a value within a defined range of numbers:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const random = (max, min = 0, f = true) => f ? Math.floor(Math.random() * (max - min) + min) : Math.random() * max;<\/code><\/pre>\n\n\n\n<p>And that\u2019s it. We use JavaScript to render the markup, but as soon as it\u2019s rendered, we don\u2019t really need it. The <code>sin()<\/code> and <code>cos()<\/code> functions help us position all the dots in the right spots.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNMJvjO\" src=\"\/\/codepen.io\/anon\/embed\/oNMJvjO?height=850&amp;theme-id=1&amp;slug-hash=oNMJvjO&amp;default-tab=result\" height=\"850\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNMJvjO\" title=\"CodePen Embed oNMJvjO\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"final-thoughts\">Final thoughts<\/h3>\n\n\n<p>Placing things around a circle is a pretty basic example to demonstrate the powers of trigonometry functions like <code>sin()<\/code> and <code>cos()<\/code>. But it\u2019s <em>really<\/em> cool that we are getting modern CSS features that provide new solutions for old workarounds I\u2019m sure we\u2019ll see way more interesting, complex, and creative use cases, especially as browser support comes to Chrome and Edge.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS trigonometry functions are here! Well, they are if you\u2019re using the latest versions of Firefox and Safari, that is. Having this sort of mathematical power in CSS opens up a whole bunch of possibilities. In this tutorial, I thought we\u2019d dip our toes in the water to get a feel for a couple of [&hellip;]<\/p>\n","protected":false},"author":280875,"featured_media":377082,"comment_status":"open","ping_status":"closed","sticky":true,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[19066,1115,19065],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/clock-sin-cos-trig.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":171789,"url":"https:\/\/css-tricks.com\/inverse-trigonometric-functions-sass\/","url_meta":{"origin":377074,"position":0},"title":"Inverse trigonometric functions with Sass","date":"June 4, 2014","format":false,"excerpt":"I link this up not because I think we all need to know trigonometry in our day to day CSS worker lives, but because: holy crap Ana Tudor does amazing stuff with Math and Sass which results in some capital-A Art and I'm sure there are more of you out\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":343671,"url":"https:\/\/css-tricks.com\/trigonometry-in-css-and-javascript-beyond-triangles\/","url_meta":{"origin":377074,"position":1},"title":"Trigonometry in CSS and JavaScript: Beyond Triangles","date":"July 5, 2021","format":false,"excerpt":"Web design is such a rectangle-based design medium that literally any deviation from it feels fresh. Michelle Barker gets into using math in various ways to programmatically draw lines, shapes, and animations that end up looking both beautiful and have that \"I could use this\" feel. CodePen Embed Fallback","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-07-01-at-9.41.15-AM.png?fit=946%2C982&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":188056,"url":"https:\/\/css-tricks.com\/sketchy-avatars-css-clip-path\/","url_meta":{"origin":377074,"position":2},"title":"Sketchy Avatars with CSS clip-path","date":"November 14, 2014","format":false,"excerpt":"The following is a guest post by Ryan Scherf. Ryan found a neat way to give avatars kind of rough, uneven, varied edges. Kinda like they were cut out with scissors by someone who wasn't very good at using scissors. What's nice is it's naturally a progressive enhancement technique and\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":367324,"url":"https:\/\/css-tricks.com\/css-grid-and-custom-shapes-part-1\/","url_meta":{"origin":377074,"position":3},"title":"CSS Grid and Custom Shapes, Part 1","date":"August 15, 2022","format":false,"excerpt":"In a previous article, I looked at CSS Grid's ability to create complex layouts using its auto-placement powers. I took that one step further in another article that added a zooming hover effect to images in a grid layout. This time, I want to dive into another type of grid,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/FD3186CB-2199-4F34-8B68-D013284C35FC.jpeg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":311036,"url":"https:\/\/css-tricks.com\/rotated-table-column-headers-now-with-fewer-magic-numbers\/","url_meta":{"origin":377074,"position":4},"title":"Rotated Table Column Headers\u2026 Now With Fewer Magic Numbers!","date":"June 1, 2020","format":false,"excerpt":"Rotated <table> column headers is something that\u2019s been covered before right here on CSS-Tricks, so shout-out to that for getting me started and helping me achieve this effect. As the article points out, if you aren\u2019t using trigonometry to calculate your table styles, you\u2019ll have to rely on magic numbers\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/slanted-table-headers.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":312771,"url":"https:\/\/css-tricks.com\/when-sass-and-new-css-features-collide\/","url_meta":{"origin":377074,"position":5},"title":"When Sass and New CSS Features Collide","date":"June 29, 2020","format":false,"excerpt":"Recently, CSS has added a lot of new cool features such as custom properties and new functions. While these things can make our lives a lot easier, they can also end up interacting with preprocessors, like Sass, in funny ways. So this is going to be a post about the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/dithering-pixel-background-layers.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/clock-sin-cos-trig.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/377074"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/280875"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=377074"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/377074\/revisions"}],"predecessor-version":[{"id":377431,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/377074\/revisions\/377431"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/377082"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=377074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=377074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=377074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}