DEV Community

Cover image for CSS | Trigonometry Circle
Shubham Tiwari
Shubham Tiwari

Posted on • Updated on

CSS | Trigonometry Circle

Hello Frondend developers, today i will show you how to create a circular element layout with css trigonometry functions sin and cos. We will be using SASS for this just for the easy implemention.

Credit - @kevinpowell

Full Code with Example

Real example with images

Let's get started...

HTML -

 <div class="parent">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>
Enter fullscreen mode Exit fullscreen mode
  • We have created a parent container and inside it we have 12 elements as its children

CSS

Basic stylings

html {
  color-scheme: dark light;
}
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}
Enter fullscreen mode Exit fullscreen mode
  • The html rule specifies a color scheme for the HTML document, which could be either "dark" or "light."

  • The body rule sets the minimum height of the body to 100% of the viewport height (100vh) and centers its content both vertically and horizontally using CSS Grid.

Parent container

.parent {
  width: 50px;
  aspect-ratio: 1;
  background: lightblue;
  border-radius: 50%;
  position: relative;
}
Enter fullscreen mode Exit fullscreen mode
  • It's a circular container with a light blue background.
  • The aspect-ratio property ensures that the container maintains a 1:1 aspect ratio (i.e., it remains a perfect circle).
  • border-radius makes the container circular.
  • position: relative positions the container relative to its normal position in the document flow.

Child elements styles

.circle {
  --size: 25px;
  --offset: 100px;
  --transformX: calc(cos(var(--degrees)) * var(--offset));
  --transformY: calc(sin(var(--degrees)) * var(--offset));
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: orangered;
  position: absolute;
  left: calc(var(--size) / 2);
  top: calc(var(--size) / 2);
  transform: translate(var(--transformX), var(--transformY));
}
Enter fullscreen mode Exit fullscreen mode
  • size variable is used to set the width of the childrens, --offset will be used to push the elements away from the center about 100px.
  • transformX and transformY, these two will adjust the positioning of the childrens at a particular angle away from the center by offset value. We have passed these to the transform translate property.

Smaller viewport -

@media screen and (max-width: 580px) {
  --size: 18px;
  --offset: 72px;
}
Enter fullscreen mode Exit fullscreen mode
  • We are justing reducing the size and offset for smaller viewports.

Childrens positioning

$colors: (
  #ff5733,
  #ffbd33,
  #33ff57,
  #33a1ff,
  #b933ff,
  #ff33a1,
  #33ffbd,
  #338aff,
  #ff3333,
  #33ffa1,
  #a1ff33,
  #ff33bd
);
$total: 12;
@for $i from 1 through length($colors) {
  .circle:nth-of-type(#{$i}) {
    --degrees: calc(#{$i} * (360deg / #{$total}));
    background-color: nth($colors, $i);
    border: 1px solid rgb(0, 0, 0, 0.2);
    animation: blink ease-in-out infinite alternate;
    animation-delay: #{$i * .1}s;
    animation-duration: 2s;
    transform-origin: center;
  }
}
Enter fullscreen mode Exit fullscreen mode
  • This block uses SCSS (Sass) syntax to create an array of colors ($colors) and then iterates through the colors to create individual circle styles.
  • degree variable calculates the angle for each circle individually.(Example - 1 * 360/12 = 30, 2 * 360/12 = 60, ....)It will always divide the 360 into total number of childrens and position them at the angle using transform translate property.
  • Each circle is assigned a background color from the $colors array.They have a border, and a CSS animation called "blink" is applied to each circle. The animation alternates between two states, creating a blinking effect.
  • animation-delay and animation-duration are adjusted based on the loop index ($i) to control the timing of the animations.
  • transform-origin: center ensures that each circle will remain around its center.

Animation

@keyframes blink {
  0%{
    scale: 1;
  }
  100%{
    scale:1.2;
  }
}
Enter fullscreen mode Exit fullscreen mode
  • Its a simple animation effect by scaling up and down the circles.

Feel free to give suggestions in comments to improve the component and make it more reusable and efficient.
THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me with some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/website-components-you-should-know-25nm

https://dev.to/shubhamtiwari909/smooth-scrolling-with-js-n56

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/custom-tabs-with-sass-and-javascript-4dej

Top comments (2)

Collapse
 
jon_snow789 profile image
Jon Snow

One tip for you.

You can make this type of card of your previous post

use this

{% link https://dev.to/jon_snow789/awesome-list-of-free-css-generator-293k %}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

Thanks man, will use it from now on