Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="picture"></div>
              
            
!

CSS

              
                $dark: #333;
$light: #f6efe4;

$lightBlue: #b3d0de;
$darkBlue: #32567c;
$lightYellow: #edda8a;
$darkYellow: #d5a13b;
$black: #111;

$size: 8px;

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  background: $light;
}

.picture {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(23 * #{$size} + 0.5px);
  height: calc(15 * #{$size} + 0.5px);
  background: $dark;
  border: $size solid $light;
  box-shadow: 0 0 1px $size $dark;

  &:after {
    content: "";
    position: absolute;
    top: 0.5px;
    left: 0.5px;
    width: $size - 0.5;
    height: $size - 0.5;
    background: $darkBlue;
    @extend %starryNight; 
  }
}

%starryNight {
  box-shadow:
    $size * 0 0px 0 0 $darkBlue,
    $size * 1 0px 0 0 $darkBlue,
    $size * 2 0px 0 0 $lightYellow,
    $size * 3 0px 0 0 $darkBlue,
    $size * 4 0px 0 0 $darkBlue,
    $size * 5 0px 0 0 $darkBlue,
    $size * 6 0px 0 0 $darkBlue,
    $size * 7 0px 0 0 $darkBlue,
    $size * 8 0px 0 0 $darkBlue,
    $size * 9 0px 0 0 $darkBlue,
    $size * 10 0px 0 0 $darkBlue,
    $size * 11 0px 0 0 $darkBlue,
    $size * 12 0px 0 0 $darkBlue,
    $size * 13 0px 0 0 $darkBlue,
    $size * 14 0px 0 0 $darkBlue,
    $size * 15 0px 0 0 $darkBlue,
    $size * 16 0px 0 0 $darkBlue,
    $size * 17 0px 0 0 $darkBlue,
    $size * 18 0px 0 0 $darkBlue,
    $size * 19 0px 0 0 $darkBlue,
    $size * 20 0px 0 0 $lightBlue,
    $size * 21 0px 0 0 $lightBlue,
    $size * 22 0px 0 0 $darkBlue,
    
    $size * 0 $size * 1 0 0 $darkBlue,
    $size * 1 $size * 1 0 0 $lightYellow,
    $size * 2 $size * 1 0 0 $darkYellow,
    $size * 3 $size * 1 0 0 $lightYellow,
    $size * 4 $size * 1 0 0 $darkBlue,
    $size * 5 $size * 1 0 0 $darkBlue,
    $size * 6 $size * 1 0 0 $darkBlue,
    $size * 7 $size * 1 0 0 $darkBlue,
    $size * 8 $size * 1 0 0 $darkBlue,
    $size * 9 $size * 1 0 0 $darkBlue,
    $size * 10 $size * 1 0 0 $darkYellow,
    $size * 11 $size * 1 0 0 $darkBlue,
    $size * 12 $size * 1 0 0 $darkBlue,
    $size * 13 $size * 1 0 0 $darkBlue,
    $size * 14 $size * 1 0 0 $darkYellow,
    $size * 15 $size * 1 0 0 $darkBlue,
    $size * 16 $size * 1 0 0 $darkBlue,
    $size * 17 $size * 1 0 0 $darkBlue,
    $size * 18 $size * 1 0 0 $darkBlue,
    $size * 19 $size * 1 0 0 $lightBlue,
    $size * 20 $size * 1 0 0 $lightYellow,
    $size * 21 $size * 1 0 0 $lightYellow,
    $size * 22 $size * 1 0 0 $lightBlue,
    
    $size * 0 $size * 2 0 0 $darkBlue,
    $size * 1 $size * 2 0 0 $darkBlue,
    $size * 2 $size * 2 0 0 $lightYellow,
    $size * 3 $size * 2 0 0 $darkBlue,
    $size * 4 $size * 2 0 0 $darkBlue,
    $size * 5 $size * 2 0 0 $darkBlue,
    $size * 6 $size * 2 0 0 $black,
    $size * 7 $size * 2 0 0 $darkBlue,
    $size * 8 $size * 2 0 0 $darkBlue,
    $size * 9 $size * 2 0 0 $darkBlue,
    $size * 10 $size * 2 0 0 $darkBlue,
    $size * 11 $size * 2 0 0 $darkBlue,
    $size * 12 $size * 2 0 0 $darkBlue,
    $size * 13 $size * 2 0 0 $darkBlue,
    $size * 14 $size * 2 0 0 $darkBlue,
    $size * 15 $size * 2 0 0 $darkBlue,
    $size * 16 $size * 2 0 0 $darkBlue,
    $size * 17 $size * 2 0 0 $darkBlue,
    $size * 18 $size * 2 0 0 $lightBlue,
    $size * 19 $size * 2 0 0 $lightYellow,
    $size * 20 $size * 2 0 0 $darkYellow,
    $size * 21 $size * 2 0 0 $darkYellow,
    $size * 22 $size * 2 0 0 $lightYellow,
    
    $size * 0 $size * 3 0 0 $lightBlue,
    $size * 1 $size * 3 0 0 $darkBlue,
    $size * 2 $size * 3 0 0 $darkBlue,
    $size * 3 $size * 3 0 0 $darkBlue,
    $size * 4 $size * 3 0 0 $darkBlue,
    $size * 5 $size * 3 0 0 $black,
    $size * 6 $size * 3 0 0 $darkBlue,
    $size * 7 $size * 3 0 0 $darkYellow,
    $size * 8 $size * 3 0 0 $darkBlue,
    $size * 9 $size * 3 0 0 $lightBlue,
    $size * 10 $size * 3 0 0 $lightBlue,
    $size * 11 $size * 3 0 0 $lightBlue,
    $size * 12 $size * 3 0 0 $lightBlue,
    $size * 13 $size * 3 0 0 $darkBlue,
    $size * 14 $size * 3 0 0 $darkBlue,
    $size * 15 $size * 3 0 0 $darkBlue,
    $size * 16 $size * 3 0 0 $darkYellow,
    $size * 17 $size * 3 0 0 $darkBlue,
    $size * 18 $size * 3 0 0 $lightBlue,
    $size * 19 $size * 3 0 0 $lightYellow,
    $size * 20 $size * 3 0 0 $darkYellow,
    $size * 21 $size * 3 0 0 $darkYellow,
    $size * 22 $size * 3 0 0 $lightYellow,
    
    $size * 0 $size * 4 0 0 $darkBlue,
    $size * 1 $size * 4 0 0 $lightBlue,
    $size * 2 $size * 4 0 0 $lightBlue,
    $size * 3 $size * 4 0 0 $lightBlue,
    $size * 4 $size * 4 0 0 $lightBlue,
    $size * 5 $size * 4 0 0 $black,
    $size * 6 $size * 4 0 0 $darkBlue,
    $size * 7 $size * 4 0 0 $darkBlue,
    $size * 8 $size * 4 0 0 $lightBlue,
    $size * 9 $size * 4 0 0 $lightBlue,
    $size * 10 $size * 4 0 0 $darkBlue,
    $size * 11 $size * 4 0 0 $darkBlue,
    $size * 12 $size * 4 0 0 $darkBlue,
    $size * 13 $size * 4 0 0 $lightBlue,
    $size * 14 $size * 4 0 0 $darkBlue,
    $size * 15 $size * 4 0 0 $darkBlue,
    $size * 16 $size * 4 0 0 $darkBlue,
    $size * 17 $size * 4 0 0 $darkBlue,
    $size * 18 $size * 4 0 0 $darkBlue,
    $size * 19 $size * 4 0 0 $lightBlue,
    $size * 20 $size * 4 0 0 $lightYellow,
    $size * 21 $size * 4 0 0 $lightYellow,
    $size * 22 $size * 4 0 0 $lightBlue,
    
    $size * 0 $size * 5 0 0 $darkBlue,
    $size * 1 $size * 5 0 0 $darkBlue,
    $size * 2 $size * 5 0 0 $lightBlue,
    $size * 3 $size * 5 0 0 $lightBlue,
    $size * 4 $size * 5 0 0 $black,
    $size * 5 $size * 5 0 0 $black,
    $size * 6 $size * 5 0 0 $lightBlue,
    $size * 7 $size * 5 0 0 $lightBlue,
    $size * 8 $size * 5 0 0 $lightBlue,
    $size * 9 $size * 5 0 0 $darkBlue,
    $size * 10 $size * 5 0 0 $darkBlue,
    $size * 11 $size * 5 0 0 $lightBlue,
    $size * 12 $size * 5 0 0 $lightBlue,
    $size * 13 $size * 5 0 0 $lightBlue,
    $size * 14 $size * 5 0 0 $darkBlue,
    $size * 15 $size * 5 0 0 $darkBlue,
    $size * 16 $size * 5 0 0 $lightBlue,
    $size * 17 $size * 5 0 0 $lightBlue,
    $size * 18 $size * 5 0 0 $lightBlue,
    $size * 19 $size * 5 0 0 $darkBlue,
    $size * 20 $size * 5 0 0 $lightBlue,
    $size * 21 $size * 5 0 0 $lightBlue,
    $size * 22 $size * 5 0 0 $darkBlue,
    
    $size * 0 $size * 6 0 0 $darkBlue,
    $size * 1 $size * 6 0 0 $darkYellow,
    $size * 2 $size * 6 0 0 $darkBlue,
    $size * 3 $size * 6 0 0 $black,
    $size * 4 $size * 6 0 0 $black,
    $size * 5 $size * 6 0 0 $black,
    $size * 6 $size * 6 0 0 $lightBlue,
    $size * 7 $size * 6 0 0 $lightBlue,
    $size * 8 $size * 6 0 0 $darkBlue,
    $size * 9 $size * 6 0 0 $darkBlue,
    $size * 10 $size * 6 0 0 $lightBlue,
    $size * 11 $size * 6 0 0 $lightBlue,
    $size * 12 $size * 6 0 0 $lightBlue,
    $size * 13 $size * 6 0 0 $darkBlue,
    $size * 14 $size * 6 0 0 $darkBlue,
    $size * 15 $size * 6 0 0 $lightBlue,
    $size * 16 $size * 6 0 0 $darkBlue,
    $size * 17 $size * 6 0 0 $darkBlue,
    $size * 18 $size * 6 0 0 $lightBlue,
    $size * 19 $size * 6 0 0 $lightBlue,
    $size * 20 $size * 6 0 0 $darkBlue,
    $size * 21 $size * 6 0 0 $lightYellow,
    $size * 22 $size * 6 0 0 $lightYellow,
    
    $size * 0 $size * 7 0 0 $darkBlue,
    $size * 1 $size * 7 0 0 $darkBlue,
    $size * 2 $size * 7 0 0 $darkBlue,
    $size * 3 $size * 7 0 0 $darkBlue,
    $size * 4 $size * 7 0 0 $black,
    $size * 5 $size * 7 0 0 $black,
    $size * 6 $size * 7 0 0 $black,
    $size * 7 $size * 7 0 0 $darkBlue,
    $size * 8 $size * 7 0 0 $darkYellow,
    $size * 9 $size * 7 0 0 $darkBlue,
    $size * 10 $size * 7 0 0 $lightBlue,
    $size * 11 $size * 7 0 0 $lightBlue,
    $size * 12 $size * 7 0 0 $lightBlue,
    $size * 13 $size * 7 0 0 $darkBlue,
    $size * 14 $size * 7 0 0 $lightBlue,
    $size * 15 $size * 7 0 0 $darkBlue,
    $size * 16 $size * 7 0 0 $darkBlue,
    $size * 17 $size * 7 0 0 $darkBlue,
    $size * 18 $size * 7 0 0 $lightYellow,
    $size * 19 $size * 7 0 0 $lightYellow,
    $size * 20 $size * 7 0 0 $lightYellow,
    $size * 21 $size * 7 0 0 $lightYellow,
    $size * 22 $size * 7 0 0 $lightYellow,
    
    $size * 0 $size * 8 0 0 $lightYellow,
    $size * 1 $size * 8 0 0 $lightYellow,
    $size * 2 $size * 8 0 0 $darkBlue,
    $size * 3 $size * 8 0 0 $darkBlue,
    $size * 4 $size * 8 0 0 $black,
    $size * 5 $size * 8 0 0 $black,
    $size * 6 $size * 8 0 0 $black,
    $size * 7 $size * 8 0 0 $darkBlue,
    $size * 8 $size * 8 0 0 $darkBlue,
    $size * 9 $size * 8 0 0 $black,
    $size * 10 $size * 8 0 0 $darkBlue,
    $size * 11 $size * 8 0 0 $darkBlue,
    $size * 12 $size * 8 0 0 $lightBlue,
    $size * 13 $size * 8 0 0 $lightBlue,
    $size * 14 $size * 8 0 0 $darkBlue,
    $size * 15 $size * 8 0 0 $darkBlue,
    $size * 16 $size * 8 0 0 $lightYellow,
    $size * 17 $size * 8 0 0 $lightYellow,
    $size * 18 $size * 8 0 0 $lightYellow,
    $size * 19 $size * 8 0 0 $lightYellow,
    $size * 20 $size * 8 0 0 $lightYellow,
    $size * 21 $size * 8 0 0 $black,
    $size * 22 $size * 8 0 0 $black,
    
    $size * 0 $size * 9 0 0 $lightYellow,
    $size * 1 $size * 9 0 0 $lightYellow,
    $size * 2 $size * 9 0 0 $lightYellow,
    $size * 3 $size * 9 0 0 $black,
    $size * 4 $size * 9 0 0 $black,
    $size * 5 $size * 9 0 0 $black,
    $size * 6 $size * 9 0 0 $black,
    $size * 7 $size * 9 0 0 $darkBlue,
    $size * 8 $size * 9 0 0 $black,
    $size * 9 $size * 9 0 0 $darkBlue,
    $size * 10 $size * 9 0 0 $lightYellow,
    $size * 11 $size * 9 0 0 $lightYellow,
    $size * 12 $size * 9 0 0 $darkBlue,
    $size * 13 $size * 9 0 0 $darkBlue,
    $size * 14 $size * 9 0 0 $lightYellow,
    $size * 15 $size * 9 0 0 $lightYellow,
    $size * 16 $size * 9 0 0 $lightYellow,
    $size * 17 $size * 9 0 0 $black,
    $size * 18 $size * 9 0 0 $black,
    $size * 19 $size * 9 0 0 $black,
    $size * 20 $size * 9 0 0 $black,
    $size * 21 $size * 9 0 0 $black,
    $size * 22 $size * 9 0 0 $black,
    
    $size * 0 $size * 10 0 0 $darkBlue,
    $size * 1 $size * 10 0 0 $darkBlue,
    $size * 2 $size * 10 0 0 $lightYellow,
    $size * 3 $size * 10 0 0 $lightYellow,
    $size * 4 $size * 10 0 0 $black,
    $size * 5 $size * 10 0 0 $black,
    $size * 6 $size * 10 0 0 $black,
    $size * 7 $size * 10 0 0 $black,
    $size * 8 $size * 10 0 0 $black,
    $size * 9 $size * 10 0 0 $lightYellow,
    $size * 10 $size * 10 0 0 $lightYellow,
    $size * 11 $size * 10 0 0 $lightYellow,
    $size * 12 $size * 10 0 0 $lightYellow,
    $size * 13 $size * 10 0 0 $lightYellow,
    $size * 14 $size * 10 0 0 $darkBlue,
    $size * 15 $size * 10 0 0 $darkBlue,
    $size * 16 $size * 10 0 0 $black,
    $size * 17 $size * 10 0 0 $black,
    $size * 18 $size * 10 0 0 $black,
    $size * 19 $size * 10 0 0 $lightBlue,
    $size * 20 $size * 10 0 0 $lightBlue,
    $size * 21 $size * 10 0 0 $lightBlue,
    $size * 22 $size * 10 0 0 $lightBlue,
    
    $size * 0 $size * 11 0 0 $darkBlue,
    $size * 1 $size * 11 0 0 $darkBlue,
    $size * 2 $size * 11 0 0 $darkBlue,
    $size * 3 $size * 11 0 0 $lightYellow,
    $size * 4 $size * 11 0 0 $black,
    $size * 5 $size * 11 0 0 $black,
    $size * 6 $size * 11 0 0 $black,
    $size * 7 $size * 11 0 0 $black,
    $size * 8 $size * 11 0 0 $black,
    $size * 9 $size * 11 0 0 $lightYellow,
    $size * 10 $size * 11 0 0 $darkBlue,
    $size * 11 $size * 11 0 0 $darkBlue,
    $size * 12 $size * 11 0 0 $darkBlue,
    $size * 13 $size * 11 0 0 $darkBlue,
    $size * 14 $size * 11 0 0 $darkBlue,
    $size * 15 $size * 11 0 0 $darkBlue,
    $size * 16 $size * 11 0 0 $darkBlue,
    $size * 17 $size * 11 0 0 $black,
    $size * 18 $size * 11 0 0 $lightBlue,
    $size * 19 $size * 11 0 0 $lightBlue,
    $size * 20 $size * 11 0 0 $lightBlue,
    $size * 21 $size * 11 0 0 $lightBlue,
    $size * 22 $size * 11 0 0 $lightBlue,
    
    $size * 0 $size * 12 0 0 $darkBlue,
    $size * 1 $size * 12 0 0 $darkBlue,
    $size * 2 $size * 12 0 0 $darkBlue,
    $size * 3 $size * 12 0 0 $darkBlue,
    $size * 4 $size * 12 0 0 $black,
    $size * 5 $size * 12 0 0 $black,
    $size * 6 $size * 12 0 0 $black,
    $size * 7 $size * 12 0 0 $black,
    $size * 8 $size * 12 0 0 $black,
    $size * 9 $size * 12 0 0 $darkBlue,
    $size * 10 $size * 12 0 0 $darkBlue,
    $size * 11 $size * 12 0 0 $lightYellow,
    $size * 12 $size * 12 0 0 $lightYellow,
    $size * 13 $size * 12 0 0 $darkBlue,
    $size * 14 $size * 12 0 0 $darkBlue,
    $size * 15 $size * 12 0 0 $darkBlue,
    $size * 16 $size * 12 0 0 $darkBlue,
    $size * 17 $size * 12 0 0 $lightBlue,
    $size * 18 $size * 12 0 0 $lightBlue,
    $size * 19 $size * 12 0 0 $darkBlue,
    $size * 20 $size * 12 0 0 $darkBlue,
    $size * 21 $size * 12 0 0 $darkBlue,
    $size * 22 $size * 12 0 0 $darkBlue,
    
    $size * 0 $size * 13 0 0 $darkBlue,
    $size * 1 $size * 13 0 0 $darkBlue,
    $size * 2 $size * 13 0 0 $darkBlue,
    $size * 3 $size * 13 0 0 $darkBlue,
    $size * 4 $size * 13 0 0 $black,
    $size * 5 $size * 13 0 0 $black,
    $size * 6 $size * 13 0 0 $black,
    $size * 7 $size * 13 0 0 $black,
    $size * 8 $size * 13 0 0 $black,
    $size * 9 $size * 13 0 0 $black,
    $size * 10 $size * 13 0 0 $darkBlue,
    $size * 11 $size * 13 0 0 $darkBlue,
    $size * 12 $size * 13 0 0 $darkBlue,
    $size * 13 $size * 13 0 0 $darkBlue,
    $size * 14 $size * 13 0 0 $darkBlue,
    $size * 15 $size * 13 0 0 $darkBlue,
    $size * 16 $size * 13 0 0 $darkBlue,
    $size * 17 $size * 13 0 0 $darkBlue,
    $size * 18 $size * 13 0 0 $darkBlue,
    $size * 19 $size * 13 0 0 $darkBlue,
    $size * 20 $size * 13 0 0 $darkBlue,
    $size * 21 $size * 13 0 0 $darkBlue,
    $size * 22 $size * 13 0 0 $darkBlue,
    
    $size * 0 $size * 14 0 0 $darkBlue,
    $size * 1 $size * 14 0 0 $darkBlue,
    $size * 2 $size * 14 0 0 $black,
    $size * 3 $size * 14 0 0 $black,
    $size * 4 $size * 14 0 0 $black,
    $size * 5 $size * 14 0 0 $black,
    $size * 6 $size * 14 0 0 $black,
    $size * 7 $size * 14 0 0 $black,
    $size * 8 $size * 14 0 0 $black,
    $size * 9 $size * 14 0 0 $black,
    $size * 10 $size * 14 0 0 $black,
    $size * 11 $size * 14 0 0 $darkBlue,
    $size * 12 $size * 14 0 0 $darkBlue,
    $size * 13 $size * 14 0 0 $darkBlue,
    $size * 14 $size * 14 0 0 $darkBlue,
    $size * 15 $size * 14 0 0 $darkBlue,
    $size * 16 $size * 14 0 0 $darkBlue,
    $size * 17 $size * 14 0 0 $darkBlue,
    $size * 18 $size * 14 0 0 $darkBlue,
    $size * 19 $size * 14 0 0 $darkBlue,
    $size * 20 $size * 14 0 0 $darkBlue,
    $size * 21 $size * 14 0 0 $darkBlue,
    $size * 22 $size * 14 0 0 $darkBlue;
}
              
            
!

JS

              
                // no js code needed here
              
            
!
999px

Console