A Pen by Matt Sisto.

Bsqri.markdown

Bsqri

A Pen by Matt Sisto on CodePen.

License.

index.haml

%figure
  %aside
  %aside
  %aside
  %aside
  %section
  
%p Metaball. Hover over me!

style.scss

@import "bourbon";
$size:         300px;
$background:   #DCDEE1;
$color:        #2D72D9;

* {
  @include box-sizing(border-box);
}

body {
  background: $background;
}

p {
  color: $color;
  font-family: Avenir, $helvetica;
  font-size: 26px;
  font-weight: 100;
  text-align: center;
  width: $size*1.5;
}

// Metaball container
figure {
  @include size($size);
  @include transform(rotate(45deg));
  margin: $size/4;
  position: relative;
  
  // Circles
  aside {
    @include size($size/2);
    @include transition;
    border: 3px solid transparent;
    border-radius: 50%;
    float: left;
    position: relative;
    
    &:nth-child(1),
    &:nth-child(4) {
      background: $color;
      border-color: $color;
    }
    
    // Negative space
    &:nth-child(2),
    &:nth-child(3) {
      background: $background;
      border-color: $background;
      z-index: 1000;
    }
  }
  
  // Square "fill"
  section {
    $section-size: $size/2.73;
    
    @include position(absolute, 50% 0 0 50%);
    @include size($section-size);
    @include transform(rotate(135deg));
    @include transition;
    background: $color;
    border: 3px solid transparent;
    margin-left: -($section-size/2);
    margin-top: -($section-size/2);
    z-index: 10;
  }
 

  &:hover {
    aside, section {
      background: none;
      border-color: $color;
    }
  }
}