How to create circles around a circle with css, javascript?

Question

I would like to create a circle (without any animation) which is surrounded by other circles, like this:

my idea

but i would like to build in a phonegap app, so i don't want to increase the file size to big.

somebody know a plugin/method or any other solution?

I searched on the internet, but the methods i found are increase the size of my files too big.

To make a circle, use `border-radius: 50%`. Then just position 6 circular divs with absolute positioning around the larger circle. — mash, May 17 '13 at 16:27
@Mash - That deserves to be an answer. Make it one and you'll have my vote. — Justin Morgan - On strike, May 17 '13 at 16:31
I would like to find a "dynamic" way, not to position the 6 circle. I will look for the tag. — Gábor, May 17 '13 at 16:33
What is a "dynamic" way? just creating round HTML elements and placing them where you'd like them seems the easies. Here's a [**FIDDLE**](http://jsfiddle.net/975Hg/) — adeneo, May 17 '13 at 16:35
@Gábor please see my answer for dynamic method of drawing circles. — joelmdev, Jun 22 '13 at 14:22

score 40 · Accepted Answer · edited Apr 27 '18 at 06:19

No one addressed the javascript aspect of this question. Below is a complete (albeit quick and dirty) web page that will draw 6 perfectly spaced circles around a parent circle's center using html, css3, and javascript; it uses pure javascript so no need to reference a jquery library. You should be able to see how you could easily extract methods from the code to control the number of satellite circles, their distance from the center of the parent, parent and satellite radii, satellite offset, etc:

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: #ac5;
  border-radius: 150px;
  margin: 150px;
}

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
</head>

<body>
  <div id="parentdiv"></div>
</body>

</html>

I really liked your solution. I incorporated some of this logic into a light-weight js library called [Moon Map](https://github.com/mitch-seymour/moonmap). Feel free to contribute if you have any additional ideas! — foxygen, Dec 30 '14 at 21:06
Both of these, the answer, and also the plugin you created, foxygen, are really awesome! Just a pitty that it might be very hard to make those kind of diagrams responsive, scaling etc. — Garavani, Mar 27 '18 at 07:53

score 15 · Answer 2 · edited May 17 '13 at 16:37

To make a circle, use border-radius: 50%. Then just position 6 circular divs with position: absolute around the larger circle.

Kind of like this: http://jsfiddle.net/yxVkk/

<div id="big-circle" class="circle big">
    <div class="circle one"></div>
    <div class="circle two"></div>
    <div class="circle three"></div>
    <div class="circle four"></div>
    <div class="circle five"></div>
    <div class="circle six"></div>
</div>

<style>
.circle {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background-color: red;
    display: inline-block;
    position: absolute;
}

.circle.big {
    width: 150px;
    height: 150px;
    background-color: blue;
    margin: 100px;
}

.one {
    left: -25px;
    top: -25px;
}

.two {
    top: -60px;
    left: 50px;
}

.three {
    right: -25px;
    top: -25px;
}


.four {
    left: -25px;
    bottom: -25px;
}

.five {
    bottom: -60px;
    left: 50px;
}

.six {
    right: -25px;
    bottom: -25px;
}
</style>

OXiGEN · Answer 3 · 2022-03-02T06:20:34.390

To display a radial array of items, center them and use trigonometry to rotate them around the center. This assumes all the items share the same width and height.

Notes about this approach:

Multiple radials can reuse the JS function in a wide variety of configurations
There should only be one .radial_center (though the code could be updated to allow multiple layered centers, taking the diameter of the largest for calculations)
There can be multiple .radial_edge items, and the function automatically adjusts the angle of rotation
Trig functions and coefficients are adjusted so the first edge is always on top
data fields in the .radial wrapper can manually set diameters for the center and edge items, as well as the percentage gap between them, which calculates to the radius for the edge items from the center item
The center item can be hidden to create a "ring only" effect, though the center still needs to exist

Yes, any code written in jQuery or any other lib can be re-written in vanilla (or asm or binary). I just used jQuery for my own convenience :)

const ns = {
  radial: (r) => {
    //capture radial edges
    let el = $(r),
      e = el.children('.radial_edge');

    //avoid div zero
    if (e.length) {
      //calc orbital angle and radius
      let c = el.children('.radial_center'),
        sa = -360 / e.length, //-360 rotates clockwise, 360 rotates counter
        i = 0, //0 sets first child at top
        cw = el.data('center') || c.width() || 100,
        ew = el.data('edge'),
        gap = el.data('gap') || .2;

      //calc x,y and reposition each edge
      e.each(function() {
        let re = $(this),
          ewa = ew || re.width() || 50,
          rad = (cw + ewa) * (1 + gap),
          x = Math.cos((sa * i) * (Math.PI / 180)) * rad * -1, //-1 flips vertically
          y = Math.sin((sa * i) * (Math.PI / 180)) * rad * -1;
        re.css({
          inset: x + 'px 0 0 ' + y + 'px'
        });
        i++;
      });
    }
  }
}

$(document).ready(() => {
  //parse each radial group
  $('.radial').each(function() {
    ns.radial(this);
  });
});

:root {
  /* decorative */
  --bs: 1px 1px 3px 0px grey;
  --b-soft: thin solid silver;
  font-family: monospace;
  color: gray;
}

img {
  display: block;
}

.hidden {
  display: none;
}

.examples {
  display: flex;
  flex-wrap: wrap;
}

.radial {
  /* required */
  position: relative;
  /* dev only */
  margin: 1em auto;
  border: 1px solid lightgray;
  width: 350px;
  aspect-ratio: 1/1;
  border-radius: 50%;
}

.radial_center {
  /* required */
  width: fit-content;
  aspect-ratio: 1/1;
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  /* decorative */
  border-radius: 50%;
  box-shadow: var(--bs);
  border: var(--b-soft);
}

.radial_edge {
  /* required */
  position: absolute;
  width: 50px;
  aspect-ratio: 1/1;
  margin: auto;
  /* decorative */
  border-radius: 50%;
  box-shadow: var(--bs);
  border: var(--b-soft);
  opacity: .7;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  font-size: 2em;
}

.bigger .radial_center {
  width: 150px;
}

.bigger .radial_edge {
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="examples">
  <div class="radial" data-gap=".3">
    <img class="radial_center" src="https://picsum.photos/100" alt="center image" />
    <div class="radial_edge">1</div>
    <div class="radial_edge">2</div>
    <div class="radial_edge">3</div>
    <div class="radial_edge">4</div>
    <div class="radial_edge">5</div>
  </div>

  <div class="radial bigger" data-gap=".05">
    <img class="radial_center" src="https://picsum.photos/150" alt="center image" />
    <img class="radial_edge" src="https://picsum.photos/100" alt="satellite image" />
    <img class="radial_edge" src="https://picsum.photos/100" alt="satellite image" />
    <img class="radial_edge" src="https://picsum.photos/100" alt="satellite image" />
  </div>

  <div class="radial" data-center="75" data-edge="75">
    <div class="radial_center hidden"></div>
    <div class="radial_edge">1</div>
    <img class="radial_edge" src="https://picsum.photos/50" alt="satellite image" data-pos="1" />
    <div class="radial_edge">3</div>
    <img class="radial_edge" src="https://picsum.photos/50" alt="satellite image" data-pos="2" />
    <div class="radial_edge">5</div>
    <img class="radial_edge" src="https://picsum.photos/50" alt="satellite image" data-pos="3" />
  </div>
</div>

score 1 · Answer 4 · answered May 17 '13 at 16:34

Using css you can try something like that. but use circle tag of HTML5 will give you a better result.

http://jsbin.com/etuzis/1/

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class=div2 style='top:12px; left:45px;'></div>
  <div class=div2 style='top:4px; left:160px;'></div>
   <div class=div2 style='top:94px; left:210px;'></div>
  <div class=div1></div>

  </body>
</html>

CSS

.div1{
  margin:40px 10px 10px 50px;
  position:relative;
  width:150px;
  height:150px;
  background-color:#ac5;
  border-radius:100px;
}
.div2{
  position:absolute;
  width:40px;
  height:40px;
  background-color:#ac5;
  border-radius:100px;
}

score 1 · Answer 5 · edited May 17 '13 at 17:27

Adding border-radius:50% to a <div> that has an equal with and height then putting a background-color on it will make a circle out of CSS (light load).

.big_circle {
  width:10em;
  height:10em;
  border-radius:50%;
  background-color:blue;
}

You can then absolutely position the circle directly in the middle of the screen by using the position:absolute and negative margin trick.

.big_circle {
  width:10em;
  height:10em;
  border-radius:50%;
  background-color:blue;

  position:absolute;
  top:50%;
  left:50%;
  margin-left:-5em;
  margin-top:-5em;
}

Create a class to take care of the styling for the smaller circles.

.little_circle {
  width:3em;
  height:3em;
  border-radius:50%;
  background-color:green;
  position:relative;
}

Then add IDs (or any other way of identifying them) to position the relatively compared to the big circle.

#little_one {
  bottom:1em;
  right:2em;
}

#little_two {
  bottom:6.5em;
  left:3.5em;
}

#little_three {
  bottom:7em;
  left:9em;
}

// etc...

Here's a CodePen with a sample.

score 0 · Answer 6 · answered May 17 '13 at 16:36

As somebody said in the comments, you have to set border-radius:50% and then, positioning absolutely. I've made a dummy jsfiddle for illustrate link:

        circle{
    width : 50px;
    height : 50px;
    border-radius : 50%;
    background: red;
    position : absolute;
    top : 50px;
    left : 150px;
}
.small_circle_1{
    width : 20px;
    height : 20px;
    border-radius : 50%;
    background: blue;
    position : absolute;
    top : -25px;
    left : 15px;
}
.small_circle_2{
    width : 20px;
    height : 20px;
    border-radius : 50%;
    background: blue;
    position : absolute;
    top : 15px;
    left : -25px;
}
.small_circle_3{
    width : 20px;
    height : 20px;
    border-radius : 50%;
    background: blue;
    position : absolute;
    top : 55px;
    left : 15px;
}
.small_circle_4{
    width : 20px;
    height : 20px;
    border-radius : 50%;
    background: blue;
    position : absolute;
    top : 15px;
    left : 55px;
}

How to create circles around a circle with css, javascript?

6 Answers6

Linked