Creating CSS circles connected by lines to middle main circle

Question

I need to create a page something like this. The

Answer 1

Here's another example using svg elements. SVG elements are very good for these kinda cases.

You'll get more info over here.

If you're trying to do some visualizations out of it. I'd suggest you to get along with d3. A javascript library that used svg elements to create amazing visualization.

HTML:

CSS :

    #container {
      position: relative;
      margin: 150px 0 0 250px;
    }
    #container svg {
      position: absolute;
    }
    #blue {
      top: -150px;
    }
    #green {
      left: -200px;
    }
    #yellow {
      left: 200px;
    }
    #blue-line {
      margin-left: -200px;
    }
    #green-line {
      margin-top: -60px;
    }