This is a pure CSS solution.
I have created a series of circles using pure CSS3, and am now trying to dynamically populate those areas with smaller circles, to create a pie chart-like appearance.
Here is an example of what I am trying to accomplish:
Here is the relevant code for me making the large circles: https://jsfiddle.net/z6vt7r10/
#circle {
position: relative;
height: 150px;
width: 150px;
border-radius: 50%;
display: block;
background-color: rgba(112, 48, 160);
}
<div id="circle"></div>
Here is my attempt to populate with smaller circles: https://jsfiddle.net/z6vt7r10/1/
.bubble {
position: relative;
height: 25px;
width: 25px;
border-radius: 50%;
display: block;
/*display: inline;
margin: 0; */ /*This doesn't work*/
background-color: black;
z-index: 99;
}
<div class="circle" id="circle2">
<span class="bubble"></span>
<span class="bubble"></span>
<span class="bubble"></span>
<span class="bubble"></span>
<span class="bubble"></span>
<span class="bubble"></span>
<span class="bubble"></span>
<span class="bubble"></span>
</div>
As you can see, it just spits out smaller circles but doesn't actually fill the div in the circle shape.
Any ideas on how I can accomplish this? I have tried using the Highcharts library to create a pie chart and then using the pattern fill addon to fill it with a polka-dot pattern, but that's not what I am trying to create. I am open to using some other library like chartjs or doing it via html5 canvas, but a pure css solution would be great, too.
