cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="element">
  <div class="popplio"></div>
</div>

<p class="view-collection">&bull; #codevember &bull; <a href="https://codepen.io/collection/nxZbMW/" target="_blank">View Collection</a> &bull;<br />
  <span>Handcrafted with <span class="love">♥</span> from Austin, TX by <a href="https://twitter.com/fleetingftw">James Fleeting</a></span></p>
            
          
!
            
              @use postcss-simple-vars;
@use postcss-media-minmax;
@use postcss-nested;

$block: 25px;
$blue: #4f77b7;
$pink: #f470a8;
$pink_dark: #be5380;
$teal: #97d3e1;
$teal_dark: #67aebf;
$white: #f2f5ed;
$gray: #a0a29e;
$black: #120000;
$bp: 500px;

.element {
  flex: 0 0 auto;
  width: 450px;
  height: 375px;
  overflow: hidden;
  
  @media screen and (height <= $bp) {
    margin: 25px auto;
  }
}

.popplio {
  position: relative;
  height: $block;
  width: $block;
  box-shadow:
    calc($block * 6) 0 $blue,
    calc($block * 7) 0 $blue,
    calc($block * 8) 0 $blue,
    calc($block * 9) 0 $blue,
    calc($block * 10) 0 $blue,
    calc($block * 11) 0 $blue,
    
    calc($block * 5) $block $blue,
    calc($block * 6) $block $blue,
    calc($block * 7) $block $blue,
    calc($block * 8) $block $blue,
    calc($block * 9) $block $blue,
    calc($block * 10) $block $blue,
    calc($block * 11) $block $blue,
    calc($block * 12) $block $blue,
    
    calc($block * 4) calc($block * 2) $blue,
    calc($block * 5) calc($block * 2) $blue,
    calc($block * 6) calc($block * 2) $blue,
    calc($block * 7) calc($block * 2) $blue,
    calc($block * 8) calc($block * 2) $blue,
    calc($block * 9) calc($block * 2) $blue,
    calc($block * 10) calc($block * 2) $blue,
    calc($block * 11) calc($block * 2) $blue,
    calc($block * 12) calc($block * 2) $blue,
    calc($block * 13) calc($block * 2) $blue,
    
    calc($block * 4) calc($block * 3) $blue,
    calc($block * 5) calc($block * 3) $blue,
    calc($block * 6) calc($block * 3) $blue,
    calc($block * 7) calc($block * 3) $blue,
    calc($block * 8) calc($block * 3) $blue,
    calc($block * 9) calc($block * 3) $blue,
    calc($block * 10) calc($block * 3) $blue,
    calc($block * 11) calc($block * 3) $blue,
    calc($block * 12) calc($block * 3) $blue,
    calc($block * 13) calc($block * 3) $blue,
    
    calc($block * 4) calc($block * 4) $blue,
    calc($block * 5) calc($block * 4) $white,
    calc($block * 6) calc($block * 4) $gray,
    calc($block * 7) calc($block * 4) $blue,
    calc($block * 8) calc($block * 4) $blue,
    calc($block * 9) calc($block * 4) $blue,
    calc($block * 10) calc($block * 4) $blue,
    calc($block * 11) calc($block * 4) $gray,
    calc($block * 12) calc($block * 4) $white,
    calc($block * 13) calc($block * 4) $blue,
    
    calc($block * 4) calc($block * 5) $blue,
    calc($block * 5) calc($block * 5) $white,
    calc($block * 6) calc($block * 5) $black,
    calc($block * 7) calc($block * 5) $blue,
    calc($block * 8) calc($block * 5) $blue,
    calc($block * 9) calc($block * 5) $blue,
    calc($block * 10) calc($block * 5) $blue,
    calc($block * 11) calc($block * 5) $black,
    calc($block * 12) calc($block * 5) $white,
    calc($block * 13) calc($block * 5) $blue,
    
    calc($block * 4) calc($block * 6) $blue,
    calc($block * 5) calc($block * 6) $white,
    calc($block * 6) calc($block * 6) $black,
    calc($block * 7) calc($block * 6) $blue,
    calc($block * 8) calc($block * 6) $pink,
    calc($block * 9) calc($block * 6) $pink,
    calc($block * 10) calc($block * 6) $blue,
    calc($block * 11) calc($block * 6) $black,
    calc($block * 12) calc($block * 6) $white,
    calc($block * 13) calc($block * 6) $blue,
    
    calc($block * 3) calc($block * 7) $blue,
    calc($block * 4) calc($block * 7) $blue,
    calc($block * 5) calc($block * 7) $blue,
    calc($block * 6) calc($block * 7) $blue,
    calc($block * 7) calc($block * 7) $white,
    calc($block * 8) calc($block * 7) $pink_dark,
    calc($block * 9) calc($block * 7) $pink_dark,
    calc($block * 10) calc($block * 7) $white,
    calc($block * 11) calc($block * 7) $blue,
    calc($block * 12) calc($block * 7) $blue,
    calc($block * 13) calc($block * 7) $blue,
    calc($block * 14) calc($block * 7) $blue,
    
    calc($block * 2) calc($block * 8) $blue,
    calc($block * 3) calc($block * 8) $blue,
    calc($block * 4) calc($block * 8) $blue,
    calc($block * 5) calc($block * 8) $blue,
    calc($block * 6) calc($block * 8) $white,
    calc($block * 7) calc($block * 8) $white,
    calc($block * 8) calc($block * 8) $white,
    calc($block * 9) calc($block * 8) $white,
    calc($block * 10) calc($block * 8) $white,
    calc($block * 11) calc($block * 8) $white,
    calc($block * 12) calc($block * 8) $blue,
    calc($block * 13) calc($block * 8) $blue,
    calc($block * 14) calc($block * 8) $blue,
    calc($block * 15) calc($block * 8) $blue,
    
    calc($block * 2) calc($block * 9) $blue,
    calc($block * 3) calc($block * 9) $blue,
    calc($block * 4) calc($block * 9) $blue,
    calc($block * 5) calc($block * 9) $blue,
    calc($block * 6) calc($block * 9) $white,
    calc($block * 7) calc($block * 9) $white,
    calc($block * 8) calc($block * 9) $black,
    calc($block * 9) calc($block * 9) $black,
    calc($block * 10) calc($block * 9) $white,
    calc($block * 11) calc($block * 9) $white,
    calc($block * 12) calc($block * 9) $blue,
    calc($block * 13) calc($block * 9) $blue,
    calc($block * 14) calc($block * 9) $blue,
    calc($block * 15) calc($block * 9) $blue,
    
    calc($block * 4) calc($block * 10) $teal,
    calc($block * 5) calc($block * 10) $teal,
    calc($block * 6) calc($block * 10) $teal,
    calc($block * 7) calc($block * 10) $white,
    calc($block * 8) calc($block * 10) $pink,
    calc($block * 9) calc($block * 10) $pink,
    calc($block * 10) calc($block * 10) $white,
    calc($block * 11) calc($block * 10) $teal,
    calc($block * 12) calc($block * 10) $teal,
    calc($block * 13) calc($block * 10) $teal,
    
    calc($block * 4) calc($block * 11) $teal,
    calc($block * 5) calc($block * 11) $teal,
    calc($block * 6) calc($block * 11) $teal,
    calc($block * 7) calc($block * 11) $teal,
    calc($block * 8) calc($block * 11) $teal,
    calc($block * 9) calc($block * 11) $teal,
    calc($block * 10) calc($block * 11) $teal,
    calc($block * 11) calc($block * 11) $teal,
    calc($block * 12) calc($block * 11) $teal,
    calc($block * 13) calc($block * 11) $teal,
    
    calc($block * 3) calc($block * 12) $blue,
    calc($block * 4) calc($block * 12) $blue,
    calc($block * 5) calc($block * 12) $teal,
    calc($block * 6) calc($block * 12) $teal,
    calc($block * 7) calc($block * 12) $teal,
    calc($block * 8) calc($block * 12) $blue,
    calc($block * 9) calc($block * 12) $blue,
    calc($block * 10) calc($block * 12) $teal,
    calc($block * 11) calc($block * 12) $teal,
    calc($block * 12) calc($block * 12) $teal,
    calc($block * 13) calc($block * 12) $blue,
    calc($block * 14) calc($block * 12) $blue,
    
    $block calc($block * 13) $blue,
    calc($block * 2) calc($block * 13) $blue,
    calc($block * 3) calc($block * 13) $blue,
    calc($block * 4) calc($block * 13) $blue,
    calc($block * 5) calc($block * 13) $blue,
    calc($block * 6) calc($block * 13) $blue,
    calc($block * 7) calc($block * 13) $blue,
    calc($block * 8) calc($block * 13) $blue,
    calc($block * 9) calc($block * 13) $blue,
    calc($block * 10) calc($block * 13) $blue,
    calc($block * 11) calc($block * 13) $blue,
    calc($block * 12) calc($block * 13) $blue,
    calc($block * 13) calc($block * 13) $blue,
    calc($block * 14) calc($block * 13) $blue,
    calc($block * 15) calc($block * 13) $blue,
    calc($block * 16) calc($block * 13) $blue,
    
    0 calc($block * 14) $blue,
    $block calc($block * 14) $white,
    calc($block * 2) calc($block * 14) $blue,
    calc($block * 3) calc($block * 14) $white,
    calc($block * 4) calc($block * 14) $blue,
    calc($block * 6) calc($block * 14) $blue,
    calc($block * 7) calc($block * 14) $blue,
    calc($block * 8) calc($block * 14) $blue,
    calc($block * 9) calc($block * 14) $blue,
    calc($block * 10) calc($block * 14) $blue,
    calc($block * 11) calc($block * 14) $blue,
    calc($block * 13) calc($block * 14) $blue,
    calc($block * 14) calc($block * 14) $white,
    calc($block * 15) calc($block * 14) $blue,
    calc($block * 16) calc($block * 14) $white,
    calc($block * 17) calc($block * 14) $blue;
}

html, body {
  height: 100%;
  
  @media screen and (height <= $bp) {
    height: auto;
  }
}

body {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  align-items: center; 
  background: #222;
  background: radial-gradient(ellipse at center, #344275 0%,#252e54 100%);
  
  @media screen and (height <= $bp) {
    display: block;
  }
}

.view-collection {
  flex: 0 0 auto;
  margin: 40px 0 0;
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  
  @media screen and (height <= $bp) {
    margin: 25px auto;
  }
  
  span {
    font-size: 13px;
  }
  
  .love {
    color: #cc0000;
  }
  
  a {
    color: $pink;
    text-decoration: none;
    transition: all 0.7s;
    
    &:hover, &:focus {
      color: $pink_dark;
    }
  }
}

            
          
!
999px
Loading ..................

Console