CODEWITHSUNDEEP
javascripthtmlcss
steph
steph

Reputation: 333

How to change radius of circles but keep pattern?

I found some code online to draw circles around a center circle. How do I change the radius of the smaller circles without affecting the layout (currently all the circles shift and are not centered around the large circle anymore).

This happens when I change the radius(width & height) in the css file. Changing the large circle radius also causes the whole group of circles to shift right or left (although they maintain their symmetry).

Here is my code:

var div = 360 / 6;
var radius = 150;
var parentdiv = document.getElementById('parentdiv');
var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2); //assumes parent is square
var offsetToChildCenter = 20;
var totalOffset = offsetToParentCenter - offsetToChildCenter;
for (var i = 1; i <= 6; ++i) {
  var childdiv = document.createElement('div');
  childdiv.className = 'div2';
  childdiv.style.position = 'absolute';
  var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
  var x = Math.cos((div * i) * (Math.PI / 180)) * radius;
  childdiv.style.top = (y + totalOffset).toString() + "px";
  childdiv.style.left = (x + totalOffset).toString() + "px";
  parentdiv.appendChild(childdiv);
}
#parentdiv {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: red;
  border-radius: 150px;
  margin: 150px;
}

.div2 {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: red;
  border-radius: 100px;
}
<div id="parentdiv"></div>

I would also like to move the circles to the center of the screen but I am not sure how.

I am very new to html/css/js and any help would be greatly appreciated!

Upvotes: 1

Views: 856

Answers (2)

khan
khan

Reputation: 1464

You can center the circles by applying Flexbox to the parent circle's parent element. In my case, the parent element is <body>.

/* Apply Flexbox and use justify-content to 
   center parent circle horizontally. */
body {
    width: 100vw;
    display: flex;
    justify-content: center;
}

To adjust the diameter of the smaller circles, you would have to remove the width and height properties in your .div2 selector and let Javascript calculate and set the width and height.

var parentdiv = document.getElementById('parentdiv');
var div = 360 / 6;
var radius = 150;

var offsetToChildCenter = 50; // Change me!

var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2); //assumes parent is square
var totalOffset = offsetToParentCenter - offsetToChildCenter;

for (var i = 1; i <= 6; ++i) {
  var childdiv = document.createElement('div');
  childdiv.className = 'div2';
  childdiv.style.position = 'absolute';
  
  var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
  var x = Math.cos((div * i) * (Math.PI / 180)) * radius;
  
  childdiv.style.top = (y + totalOffset).toString() + "px";
  childdiv.style.left = (x + totalOffset).toString() + "px";
  
  // Let your JS code calculate the width and height
  childdiv.style.width = `${offsetToChildCenter * 2}px`
  childdiv.style.height = `${offsetToChildCenter * 2}px`
  
  parentdiv.appendChild(childdiv);
}
body {
    width: 100vw;
    display: flex;
    justify-content: center;
}

#parentdiv {
    position: relative;
    width: 150px;
    height: 150px;
    background-color: red;
    margin: 150px;
    
    /* Use 50% to ensure the element will always be a circle. */
    border-radius: 50%;
}

.div2 {
    position: absolute;
    /* Remove width and height from CSS */
    /* width: 40px; */
    /* height: 40px; */
    background-color: red;
    
    /* Use 50% to ensure the element will always be a circle. */
    border-radius: 50%;
}
<div id="parentdiv"></div>

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105893

To illustrate my comment. border-radius is a CSS rule to round boxe's corners.

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

to modify the size , you can do it from the css file too, about the position , there is two vars to update : radius and offsetToChildCenter

Demo

var div = 360 / 6;
var radius = 180;
var parentdiv = document.getElementById('parentdiv');
var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2); //assumes parent is square
var offsetToChildCenter = 40;
var totalOffset = offsetToParentCenter - offsetToChildCenter;
for (var i = 1; i <= 6; ++i) {
  var childdiv = document.createElement('div');
  childdiv.className = 'div2';
  childdiv.style.position = 'absolute';
  var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
  var x = Math.cos((div * i) * (Math.PI / 180)) * radius;
  childdiv.style.top = (y + totalOffset).toString() + "px";
  childdiv.style.left = (x + totalOffset).toString() + "px";
  parentdiv.appendChild(childdiv);
}
html {
  display: flex;
  height: 100%;
}

body {
  margin: auto;
}

#parentdiv {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: red;
  border-radius: 150px;
  margin: 150px;
}

.div2 {
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: red;
  border-radius: 10px;
}
<div id="parentdiv"></div>

Upvotes: 2

Related Questions