Engo Engo - 1 month ago 15
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

HTML

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


CSS

.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;
}


OUTPUT

enter image description here

Answer

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