cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

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.

            
              - var pieces = 367;
main
  .ground
    - for (var i = 1; i <= pieces; ++i) {
      div(class="_"+i)
    - }
            
          
!
            
              $c1: #aaa;
$c2: #fff;
$c3: #476;
$bg: #fcc;
$size: 0.8vh;

$blocks:
(26 29 5 1 1 $c1)
(30 12 1 17 1 $c1)
(27 31 5 1 3 $c1)
(30 34 5 1 4 $c2)
(0 0 39 11 1 $c1)
(32 13 1 18 3 $c1)
(35 17 1 17 4 $c2)
(43 12 38 2 3 $c1)
(34 37 5 1 1 $c3)
(45 16 38 2 3 $c1)
(38 19 1 18 1 $c3)
(43 20 42 2 3 $c1)
(35 39 11 1 1 $c3)
(40 19 5 20 1 $c3)
(2 2 37 9 3 $c1)
(5 5 37 9 4 $c2)
(8 8 39 11 1 $c3)
(10 10 37 9 1 $c3)
(36 41 12 1 4 $c2)
(47 40 1 1 2 $c1)
(47 54 1 1 2 $c1)
(46 24 41 15 3 $c1)
(50 28 39 15 3 $c1)
(50 46 39 15 3 $c1)
(53 31 39 39 4 $c2)
(40 44 12 3 1 $c3)
(41 48 12 2 1 $c3)
(40 52 12 3 1 $c3)
(41 51 12 2 1 $c3)
(42 51 12 1 1 $c3)
(56 75 41 1 1 $c3)
(97 34 1 41 1 $c3)
(56 34 41 41 1 $c3)
(56 33 41 1 1 $c3)
(55 34 1 41 1 $c3)
(56 34 1 1 1 $c3)
(56 76 1 1 1 $c3)
(98 34 1 1 1 $c3)
(84 36 13 39 1 $c3)
(85 38 12 37 4 $c2)
(63 80 39 1 1 $c3)
(102 41 1 39 1 $c3)
(89 41 13 39 1 $c3)
(90 40 12 1 1 $c3)
(71 36 13 1 7 $c2)
(58 36 13 39 1 $c3)
(60 38 12 37 4 $c2)
(63 41 12 39 1 $c3)
(62 41 1 39 1 $c3)
(63 40 12 1 1 $c3)
(102 45 2 1 1 $c3)
(102 47 3 1 1 $c3)
(102 49 4 1 1 $c3)
(103 51 4 1 1 $c3)
(104 53 4 1 1 $c3)
(109 54 1 1 1 $c3)
(65 43 37 37 1 $c3)
(67 45 35 35 1 $c3)
(69 47 33 33 4 $c2)
(89 41 2 2 1 $c3)
(90 44 2 1 1 $c3)
(88 42 2 2 1 $c3)
(89 45 2 2 1 $c3)
(82 43 7 2 1 $c3)
(83 46 7 2 1 $c3)
(79 42 2 2 1 $c3)
(80 45 2 2 1 $c3)
(76 41 2 2 1 $c3)
(77 44 2 1 1 $c3)
(63 53 2 1 1 $c3)
(64 46 1 7 1 $c2)
(64 53 3 1 1 $c3)
(65 48 1 5 1 $c2)
(65 53 4 1 1 $c3)
(66 50 1 3 1 $c2)
(66 53 4 1 1 $c3)
(67 52 1 1 1 $c2)
(67 53 4 1 1 $c3)
(66 51 4 1 1 $c3)
(65 49 4 1 1 $c3)
(64 47 3 1 1 $c3)
(63 45 2 1 1 $c3)
(67 54 1 1 1 $c3)
(63 77 2 1 1 $c3)
(64 70 1 7 1 $c2)
(64 77 3 1 1 $c3)
(65 72 1 5 1 $c2)
(65 77 4 1 1 $c3)
(66 74 1 3 1 $c2)
(66 77 4 1 1 $c3)
(67 76 1 1 1 $c2)
(67 77 4 1 1 $c3)
(66 75 4 1 1 $c3)
(65 73 4 1 1 $c3)
(64 71 3 1 1 $c3)
(63 69 2 1 1 $c3)
(67 78 1 1 1 $c3)
(63 41 1 1 1 $c3)
(63 81 1 1 1 $c3)
(103 41 1 1 1 $c3)
(72 85 35 1 1 $c3)
(107 50 1 35 1 $c3)
(72 50 35 35 1 $c3)
(71 50 1 35 1 $c3)
(72 49 35 1 1 $c3)
(77 85 1 2 1 $c3)
(74 52 33 33 1 $c3)
(79 85 1 3 1 $c3)
(76 54 31 31 1 $c3)
(81 85 1 4 1 $c3)
(83 86 1 4 1 $c3)
(85 87 1 4 1 $c3)
(86 92 1 1 1 $c3)
(78 56 29 29 4 $c2)
(103 50 1 2 1 $c3)
(96 51 7 1 1 $c2)
(103 51 1 3 1 $c3)
(98 52 5 1 1 $c2)
(103 52 1 4 1 $c3)
(100 53 3 1 1 $c2)
(103 53 1 4 1 $c3)
(102 54 1 1 1 $c2)
(103 54 1 4 1 $c3)
(101 53 1 4 1 $c3)
(99 52 1 4 1 $c3)
(97 51 1 3 1 $c3)
(95 50 1 2 1 $c3)
(104 54 1 1 1 $c3)
(85 50 1 2 1 $c3)
(78 51 7 1 1 $c2)
(85 51 1 3 1 $c3)
(80 52 5 1 1 $c2)
(85 52 1 4 1 $c3)
(82 53 3 1 1 $c2)
(85 53 1 4 1 $c3)
(84 54 1 1 1 $c2)
(85 54 1 4 1 $c3)
(83 53 1 4 1 $c3)
(81 52 1 4 1 $c3)
(79 51 1 3 1 $c3)
(77 50 1 2 1 $c3)
(86 54 1 1 1 $c3)
(72 50 1 1 1 $c3)
(72 86 1 1 1 $c3)
(108 50 1 1 1 $c3)
(81 90 31 1 1 $c3)
(112 59 1 31 1 $c3)
(81 59 31 31 1 $c3)
(80 59 1 31 1 $c3)
(81 58 31 1 1 $c3)
(83 61 29 29 1 $c3)
(85 63 27 27 1 $c3)
(87 65 25 25 1 $c3)
(89 67 23 23 7 $c2)
(102 59 1 2 1 $c3)
(93 60 9 1 1 $c2)
(102 60 1 3 1 $c3)
(95 61 7 1 1 $c2)
(102 61 1 4 1 $c3)
(97 62 5 1 1 $c2)
(102 62 1 5 1 $c3)
(99 63 3 1 1 $c2)
(102 63 1 5 1 $c3)
(101 64 1 1 1 $c2)
(102 64 1 5 1 $c3)
(100 63 1 5 1 $c3)
(98 62 1 5 1 $c3)
(96 61 1 4 1 $c3)
(94 60 1 3 1 $c3)
(92 59 1 2 1 $c3)
(103 64 1 1 1 $c3)
(81 59 1 1 1 $c3)
(81 91 1 1 1 $c3)
(113 59 1 1 1 $c3)
(95 98 9 1 1 $c3)
(111 98 9 1 1 $c3)
(120 73 1 25 1 $c3)
(111 73 9 25 1 $c3)
(95 73 9 25 1 $c3)
(94 73 1 25 1 $c3)
(95 72 9 1 1 $c3)
(111 72 9 1 1 $c3)
(105 98 7 2 1 $c3)
(97 75 23 23 1 $c3)
(105 73 7 2 1 $c3)
(99 77 21 21 1 $c3)
(101 79 19 19 1 $c3)
(102 82 19 15 1 $c3)
(103 85 19 11 1 $c3)
(104 88 19 7 1 $c3)
(105 91 19 3 1 $c3)
(106 93 19 1 1 $c3)
(106 94 1 1 1 $c3)
(108 95 1 1 1 $c3)
(126 94 1 1 1 $c3)
(126 95 1 1 1 $c3)
(95 73 1 1 1 $c3)
(95 99 1 1 1 $c3)
(121 99 1 1 1 $c3)
(121 73 1 1 1 $c3)
(11 27 17 17 3 $c1)
(15 31 15 15 3 $c1)
(19 35 13 13 3 $c1)
(22 38 13 13 6 $c2)
(27 58 15 1 1 $c3)
(42 43 1 15 1 $c3)
(27 43 15 15 1 $c3)
(26 43 1 15 1 $c3)
(27 42 15 1 1 $c3)
(29 45 13 13 1 $c3)
(27 43 1 1 1 $c3)
(27 59 1 1 1 $c3)
(43 43 1 1 1 $c3)
(31 47 11 11 4 $c2)
(34 63 4 1 1 $c3)
(43 63 4 1 1 $c3)
(47 59 1 4 1 $c3)
(47 50 1 4 1 $c3)
(43 59 4 4 1 $c3)
(34 59 4 4 1 $c3)
(35 54 1 5 1 $c2)
(43 50 4 4 1 $c3)
(34 50 4 4 1 $c3)
(33 59 1 4 1 $c3)
(33 50 1 4 1 $c3)
(34 49 4 1 1 $c3)
(43 49 4 1 1 $c3)
(39 63 5 2 1 $c3)
(36 52 11 11 1 $c3)
(38 54 9 9 5 $c2)
(34 59 3 1 1 $c3)
(36 59 3 1 1 $c3)
(36 60 1 1 1 $c3)
(35 57 3 1 1 $c3)
(34 55 2 1 1 $c3)
(39 50 5 2 1 $c3)
(34 50 1 1 1 $c3)
(34 64 1 1 1 $c3)
(48 50 1 1 1 $c3)
(42 50 1 1 1 $c3)
(42 69 11 1 1 $c3)
(53 58 1 11 1 $c3)
(42 58 11 11 1 $c3)
(42 57 11 1 1 $c3)
(41 58 1 11 1 $c3)
(44 61 9 7 1 $c3)
(45 63 9 5 1 $c3)
(46 65 9 3 1 $c3)
(47 67 9 1 1 $c3)
(47 68 1 1 1 $c3)
(49 69 1 1 1 $c3)
(57 68 1 1 1 $c3)
(57 69 1 1 1 $c3)
(42 58 1 1 1 $c3)
(42 70 1 1 1 $c3)
(54 70 1 1 1 $c3)
(54 58 1 1 1 $c3);

$windows:
(8 6 1 2 false)
(12 6 1 2 false)
(16 6 1 2 false)
(20 6 1 2 false)
(24 6 1 2 false)
(28 6 1 2 false)
(32 6 1 2 false)
(36 6 1 2 false)
(40 6 1 2 false)
(36 32 1 2 true)
(36 28 1 2 true)
(36 24 1 2 true)
(36 20 1 2 true)
(33 35 1 2 false)
(42 42 1 1 false)
(44 42 1 2 false)
(33 41 2 1 false)
(28 41 2 1 false)
(40 48 1 2 false)
(37 48 1 2 false)
(34 48 1 1 false)
(41 55 2 2 false)
(44 55 2 2 false)
(25 44 2 1 true)
(25 49 2 1 true)
(32 50 1 1 true)
(32 53 1 2 true)
(32 56 1 2 true)
(57 32 1 1 false)
(59 32 1 1 false)
(63 32 1 1 false)
(65 32 1 1 false)
(69 32 1 1 false)
(71 32 1 1 false)
(75 32 1 1 false)
(77 32 1 1 false)
(81 32 1 1 false)
(83 32 1 1 false)
(87 32 1 1 false)
(89 32 1 1 false)
(63 39 1 1 false)
(65 39 1 1 false)
(69 39 1 1 false)
(71 39 1 1 false)
(73 37 11 2 false)
(76 40 11 2 false)
(87 39 1 2 false)
(89 39 1 1 false)
(93 39 1 1 false)
(95 39 1 1 false)
(73 48 1 1 false)
(75 48 1 1 false)
(79 48 1 1 false)
(81 48 1 1 false)
(91 48 1 1 false)
(93 48 1 1 false)
(97 48 1 1 false)
(99 48 1 1 false)
(83 52 1 2 false)
(101 52 1 2 false)
(89 57 1 1 false)
(91 57 1 1 false)
(95 57 1 1 false)
(97 57 1 1 false)
(97 61 1 1 false)
(99 61 1 2 false)
(95 69 3 3 false)
(99 69 3 3 false)
(103 69 3 3 false)
(107 69 3 3 false)
(54 35 1 1 true)
(54 37 1 1 true)
(54 41 1 1 true)
(54 43 1 1 true)
(54 47 1 1 true)
(54 49 1 1 true)
(54 53 1 1 true)
(54 55 1 1 true)
(61 41 1 1 true)
(61 43 1 1 true)
(61 47 1 1 true)
(61 49 1 1 true)
(61 53 1 1 true)
(61 55 1 1 true)
(61 59 1 1 true)
(61 61 1 1 true)
(61 65 1 1 true)
(61 67 1 1 true)
(61 71 1 1 true)
(61 73 1 1 true)
(65 51 1 2 true)
(65 75 1 2 true)
(70 57 1 1 true)
(70 59 1 1 true)
(70 63 1 1 true)
(70 65 1 1 true)
(70 69 1 1 true)
(70 71 1 1 true)
(79 61 1 1 true)
(79 63 1 1 true)
(79 67 1 1 true)
(79 69 1 1 true)
(79 73 1 1 true)
(79 75 1 1 true)
(79 79 1 1 true)
(79 81 1 1 true)
(91 73 3 3 true)
(91 77 3 3 true)
(91 81 3 3 true)
(91 85 3 3 true);

$pieces: length($blocks) + length($windows);
// (<piece> <z-index to move to>)
$windows2correct: (303 45) (316 134) (317 120) (326 154) (348 75) (349 89);
/*
// For working with grid.
$size: 10px;
$gridColor: rgba(0,0,0,0.3);
$grid: repeating-linear-gradient(transparent, transparent $size - 1, $gridColor $size - 1, $gridColor $size),
    repeating-linear-gradient(90deg, transparent, transparent $size - 1, $gridColor $size - 1, $gridColor $size), repeating-linear-gradient(-45deg, transparent, transparent (($size*(sqrt(2)/2)) - 1), $gridColor (($size*(sqrt(2)/2)) - 1), $gridColor ($size*(sqrt(2)/2)));

.ground, .ground > div {
	background-image: $grid;
}
*/
body, main {
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
  align-items: center;
  justify-content: center;
}
body {
  background: $bg;
  font: $size sans-serif;
  height: 100vh;
  overflow-x: hidden;
  margin: 0;
}
main {
  flex-direction: column;
  justify-content: flex-end;
  width: 58vh;
  height: 90vh;
}
.ground {
  width: $size * 70;
  height: $size * 34;
  position: relative;
  transform: translateY(-$size*9) rotateX(45deg) rotateZ(-45deg);
  > div {
    position: absolute;
    bottom: 0;
    left: 0;
    @for $i from 1 through $pieces {
        $isBadWindow: false;
      &:nth-of-type(#{$i}) {
        @if $i > length($blocks) {
              // z-index corrections for windows with minor portion not covered by roof
              @for $j from 1 through length($windows2correct) {
                  @if $i == nth(nth($windows2correct, $j), 1) {
                  $isBadWindow: true;
                      z-index: nth(nth($windows2correct, $j), 2);
                  }
              }
        }
        @if $isBadWindow == false {
          z-index: $i;
        }
      }
    }
    &::before, &::after {
      content: "";
      display: block;
      position: absolute;
    } 
  }
}

@mixin block($x, $y, $w, $d, $h, $c) {
  // top
  background: $c;
  width: $size*$w;
  height: $size*$d;
  transform: translate($size * ($x + $h),$size * -($y + $h));
  // left
  &::before {
    background: ($c - #333333);
    top: 0;
    left: -$size*$h;
    width: $size*$h;
    height: $size*$d;
    transform: skewY(-45deg) {
      origin: 100% 0%;
    };
  }
  // right
  &::after {
    background: ($c - #181818);
    bottom: -$size*$h;
    left: 0;
    width: $size*$w;
    height: $size*$h;
    transform: skewX(-45deg) {
      origin: 0% 0%;
    };
  }
}

@mixin window($x, $y, $w, $h, $onLeft) {
  background-color: #111;
  transform-origin: 0 100%;
  // deal with window placement on either side of block
  @if $onLeft == false {
    width: $size*$w;
    height: $size*$h;
    transform: translate($size*$x,-$size*$y) skewX(-45deg);
  }
  @else {
    width: $size*$h;
    height: $size*$w;
    transform: translate($size*$x,-$size*$y) skewY(-45deg);
  }
}

// render castle
@for $p from 1 through $pieces {
  $b: $p;
  $w: $p - length($blocks);
  ._#{$p} {
    @if $p <= length($blocks) {
      @include block(
          nth(nth($blocks, $b), 1), 
          nth(nth($blocks, $b), 2), 
          nth(nth($blocks, $b), 3), 
          nth(nth($blocks, $b), 4), 
          nth(nth($blocks, $b), 5), 
          nth(nth($blocks, $b), 6)
        );
    }
    @else {
      @include window(
          nth(nth($windows, $w), 1), 
          nth(nth($windows, $w), 2), 
          nth(nth($windows, $w), 3), 
          nth(nth($windows, $w), 4), 
          nth(nth($windows, $w), 5)
        );
    }
  }
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console