How to create circles around a circle with JavaScript?

Sometimes, we want to create circles around a circle with JavaScript.

In this article, we’ll look at how to create circles around a circle with JavaScript.

How to create circles around a circle with JavaScript?

To create circles around a circle with JavaScript, we can use some DOM methods.

For instance, we write:

<div id="parentDiv"></div>

to add a div.

Then we write:

const div = 360 / 6;
const radius = 150;
const parent = document.querySelector('#parentDiv')
const offsetToParentCenter = parseInt(parent.offsetWidth / 2);
const totalOffset = offsetToParentCenter;
for (let i = 1; i <= 6; ++i) {
  const childDiv = document.createElement('div');
  childDiv.className = 'div2';
  childDiv.style.position = 'absolute';
  const y = Math.sin((div * i) * (Math.PI / 180)) * radius;
  const x = Math.cos((div * i) * (Math.PI / 180)) * radius;
  childDiv.style.top = (y + totalOffset).toString() + "px";
  childDiv.style.left = (x + totalOffset).toString() + "px";
  parent.appendChild(childDiv);
}

We get the parent div with querySelector.

Then we add a for loop.

In the loop, we create a div with createElement and assign it to childDiv.

Next, we add a the class name for the childDiv.

Then we set the position of childDiv to 'absolute'.

And then we set the x and y position of the div so that they’re positioned in a circle.

Next, we call appendChild with childDiv to add them.

Finally, we add:

.div2 {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #ac5;
  border-radius: 100px;
}

to add styles to the div.

Now we should see 6 divs arranged in a circle.

Conclusion

To create circles around a circle with JavaScript, we can use some DOM methods.