CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Engo
Engo

Reputation: 969

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

Upvotes: 0

Views: 315

Answers (1)

David Saginashvili
David Saginashvili

Reputation: 495

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

Upvotes: 2

Related Questions