Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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.

like image 349
Gábor Avatar asked May 17 '13 16:05

Gábor


People also ask

How do I shape a circle in CSS?

To create a circle we can set the border-radius on the element. This will create curved corners on the element. If we set it to 50% it will create a circle. If you set a different width and height we will get an oval instead.

How do you overlap a circle in CSS?

You don't have to create multiple circle tags. Simple use the use tag and transform its X-axis.


1 Answers

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>
like image 163
joelmdev Avatar answered Sep 25 '22 07:09

joelmdev