Engo Engo - 9 months ago 71
HTML Question

Responsive random circle grid

I want to create the following random circle grid in HTML/CSS/JavaScript (excl. effects). I am not sure how to do this. Should I use absolution positioning in order to get this working/responsive? Looks likes a center point is pulling the circles...

enter image description here
GIF captured from iTunes


<div class="circle large">
<div class="circle medium">


.circle {
border-radius: 50%;
text-align: center;
color: #111;
margin: 10px;

.medium {
width: 80px;
height: 80px;
border: 3px #FC3358 solid;
font-size: 14px;
line-height: 80px;

.large {
width: 120px;
height: 120px;
font-size: 18px;
line-height: 120px;
background: #FC3358;
color: #fff;


enter image description here

Answer Source

You need to use <canvas> for that kind of gravity effect.