Bjango Community Challenges 002

bjango-community-challenges-002.markdown

Bjango Community Challenges 002

A Pen by Pedro Ivo Hudson on CodePen.

License.

index.pug

.box-blur
  .circle.-intersect
  .circle.-external

script.js

// https://github.com/bjango/Make-This

style.scss

//vars
$color-bg: white;
$color-circle-intersect: #FFEB33; //yellow
$color-circle-external:  #FF3351; //red
$color-circle-center:    #34E2FF; //blue
$box-size:     30vw;
$box-size-max: 520px;
$box-size-min: 160px;


//canvas checkerboard
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(45deg, #404040 25%, transparent 25%, transparent 75%, #404040 75%),
    linear-gradient(45deg, #404040 25%, #292929 25%, #292929 75%, #404040 75%);
  background-size: 58px 58px;
  background-position: 0 0, 29px 29px;
}


// component
.box-blur {
  position: relative;
  background: $color-bg;
  width: $box-size;
  height: $box-size;
  min-width: $box-size-min;
  min-height: $box-size-min;
  max-width: $box-size-max;
  max-height: $box-size-max;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
  mask-image: url("data:image/svg+xml,%3Csvg width='580' height='580' viewBox='0 0 580 580' xmlns='http://www.w3.org/2000/svg'%3E %3Cdefs%3E %3Cfilter x='-12.2%25' y='-12.2%25' width='124.5%25' height='124.5%25' filterUnits='objectBoundingBox' id='filter-1'%3E %3CfeGaussianBlur stdDeviation='20' in='SourceGraphic'/%3E %3C/filter%3E %3C/defs%3E %3Crect id='Rectangle' filter='url(%23filter-1)' x='45' y='45' width='490' height='490' rx='1' /%3E %3C/svg%3E");
  mask-repeat: repeat;
  mask-size: 100%;
  mask-position: center;
  
  > .circle {
    width: 56%;
    height: 56%;
    background: $color-circle-center;
    border-radius: 100%;
    
    &::before, &::after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      border-radius: 100%;
    }
    
    &::before {
      top: -42%;
      right: -42%;
    }
    
    &::after {
      bottom: -42%;
      left: -42%;
    }
    
    &.-intersect {
      position: relative;
      overflow: hidden;
    
      &::before, &::after {
        background: $color-circle-intersect;
      }
    }
    
    &.-external {
      position: absolute;
      z-index: -1;

      &::before, &::after {
        background: $color-circle-external;
      }
    }
  }
}