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

              
                #wrap
 .inner
  -6.times do
   .row
    -3.times do
     .building
      -2.times do
       .foundation
        .side
         -2.times do
          .window
         %span.door
        -2.times do
         .side
        .side
         .panel
         .rail
         
         
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:none">
<defs>

<filter id="jaggy">
<feTurbulence id="turbulence" baseFrequency="0.02 0.04" numOctaves="3" result="noise" seed="0"/>
<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="2" />
</filter>
</defs>
</svg>
              
            
!

CSS

              
                body {
  display: grid;
  place-items: center;
  height: 100vh;
  --red: 16, 77%;
  --black: var(--black-1);
  --black-1: #000;
  --black-2: hsl(var(--tan), 90%);
  --blue: 172, 37%;
  --tan: 20, 35%;
  --gray: 192, 10%;
  --lightgray: 209, 3%;
  --yellow: 39, 86%;
  --darken: 0%;
  --roof: var(--tan);
  --color1: var(--red);
  --color2: var(--blue);
  --color3: var(--tan);
  --color4: var(--gray);
  --color5: var(--lightgray);
  --color6: var(--red);
  --color7: var(--blue);
  --color8: var(--tan);
  --color9: var(--gray);
  --color10: var(--yellow);
  --roof1: var(--tan);
  --roof2: var(--gray);
  --roof3: var(--lightgray);
  --color1-darken: 58%;
  --color2-darken: 51%;
  --color3-darken: 69%;
  --color4-darken: 61%;
  --color5-darken: 80%;
  --height-modifier: 0;
  --t: rgba(0, 0, 0, 0.001);
  --secondary-roof: repeating-linear-gradient(
    to right,
    rgba(0, 0, 0, 0.25) 1px,
    var(--t) 1px,
    var(--t) 5px,
    rgba(0, 0, 0, 0.25) 5px,
    rgba(0, 0, 0, 0.25) 6px
  );
  --flip: 1;
  --shadow: drop-shadow(0 1px #000) drop-shadow(1px 0 #000)
    drop-shadow(0 -1px #000) drop-shadow(-1px 0 #000);
  overflow: hidden;
  filter: url(#jaggy);
  background: linear-gradient(
      to top,
      hsl(var(--gray), 85%) 50%,
      hsl(var(--blue), 80%) 60%,
      var(--t) 70%
    ),
    radial-gradient(
      circle at center,
      hsl(var(--blue), 80%),
      hsl(var(--yellow), 80%) 500px
    );
  &:before {
    content: "click anywhere to regenerate";
    font-family: "Futura", sans-serif;
    font-size: 12px;
    bottom: 5px;
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    z-index:10;
  }
  #wrap {
    width: 400px;
    height: 400px;
    position: relative;
    perspective: 1000px;
    z-index:2;
    opacity:0;
    transition:opacity 1s ease-in-out 1s;
    &.loaded{
      opacity:1;
    }
    .inner,
    .side,
    .roof {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
    .inner {
      display: grid;
      grid-template-rows: repeat(6, 1fr);
      grid-template-columns: repeat(1, 1fr);
      transform: translateZ(200px) translateY(75px) rotateX(75deg) rotate(0deg)
        scale(0.75);
      transition: transform 1s ease-in-out;
      z-index:4;
      &:hover {
        transform: translateZ(200px) translateY(75px) rotateX(75deg)
          rotate(18deg) scale(0.8);
        .row {
          .building {
            .foundation {
              &:after {
                transform: scaleX(calc(1.5 + (var(--height-modifier) / 60)))
                  skew(calc(10deg * var(--flip)));
              }
            }
          }
        }
      }
      .row {
        display: grid;
        grid-template-rows: reepeat(1, 1fr);
        grid-template-columns: repeat(3, 1fr);
        @for $i from 1 through 6 {
          &:nth-of-type(#{7 - $i}) {
            --height-modifier: #{($i - 1) * 40};
            transform: scaleX(#{1.5 - ($i/20)});
            .foundation {
              .side {
                &:first-of-type {
                  &:before,
                  &:after {
                    --darken: #{($i * 5%) - 2.5%};
                  }
                }
              }
            }
          }
        }
        .building {
          &:first-of-type,
          &:last-of-type {
            .foundation {
              &:first-of-type,
              &:last-of-type {
                &:before {
                  content: "";
                  position: absolute;
                  mask: linear-gradient(to right, var(--t) 50px, #000 200px);
                  width: calc(400% + (var(--angle) * 10%));
                  height: 150%;
                  background: radial-gradient(
                      ellipse at top,
                      var(--t) calc(50% - 1px),
                      #222 calc(50% - 1px),
                      #222 calc(50% + 1px),
                      var(--t) calc(50% + 1px)
                    )
                    50% 50% / 100% 25% no-repeat;
                  border-radius: 0;
                  box-shadow: inset 0 -1px #222;
                  right: 0%;
                  transform: rotateX(-90deg)
                    translateY(
                      clamp(
                        -300px,
                        calc(
                          (
                            (var(--height) * -4) +
                              (var(--height-modifier) * -1px)
                          )
                        ),
                        -50px
                      )
                    );
                }
              }
              &:last-of-type {
                &:before {
                  right: auto;
                  left: 0%;
                  mask: linear-gradient(to left, var(--t) 50px, #000 200px);
                }
              }
            }
          }
          &:first-of-type {
            .foundation {
              &:last-of-type {
                &:before {
                  display: none;
                }
              }
            }
          }
          &:last-of-type {
            .foundation {
              &:first-of-type {
                &:before {
                  display: none;
                }
              }
            }
          }
          .foundation {
            &:after {
              content: "";
              position: absolute;
              width: 100%;
              height: 200%;
              top: 0;
              left: 0;
              background: hsl(var(--gray), 80%);
              transition: transform 1s ease-in-out;
              transform-origin: clamp(0%, calc(-100% * var(--flip)), 100%) 50%;
            }
          }
        }
      }
      .building {
        display: flex;
        align-items: stretch;
        transform: scaleX(var(--flip));
        &:nth-of-type(3n) {
          .foundation {
            .side {
              &:first-of-type {
                &:after {
                  background: linear-gradient(
                      to bottom,
                      hsl(
                        var(--color),
                        calc(var(--color-darken) - var(--darken))
                      ),
                      var(--t) 50%
                    ),
                    repeating-linear-gradient(
                        -1deg,
                        hsl(
                            var(--color),
                            calc(var(--color-darken) - var(--darken))
                          )
                          1px,
                        var(--t) 1px,
                        var(--t) 10px,
                        hsl(
                            var(--color),
                            calc(var(--color-darken) - var(--darken))
                          )
                          10px,
                        hsl(
                            var(--color),
                            calc(var(--color-darken) - var(--darken))
                          )
                          11px
                      )
                      50% -5px,
                    repeating-linear-gradient(
                      1deg,
                      hsl(
                          var(--color),
                          calc(var(--color-darken) - var(--darken))
                        )
                        1px,
                      hsl(var(--color), calc(var(--color-darken) - 0%)) 1px,
                      hsl(var(--color), calc(var(--color-darken) - 0%)) 10px,
                      hsl(
                          var(--color),
                          calc(var(--color-darken) - var(--darken))
                        )
                        10px,
                      hsl(
                          var(--color),
                          calc(var(--color-darken) - var(--darken))
                        )
                        11px
                    );
                }
              }
            }
          }
        }
        &:nth-of-type(2n) {
          .foundation {
            .side {
              &:first-of-type {
                &:after {
                  background: linear-gradient(
                      to bottom,
                      hsl(
                        var(--color),
                        calc(var(--color-darken) - var(--darken))
                      ),
                      var(--t) 50%
                    ),
                    repeating-linear-gradient(
                      90deg,
                      hsl(
                          var(--color),
                          calc(var(--color-darken) - var(--darken))
                        )
                        1px,
                      hsl(var(--color), calc(var(--color-darken) - 0%)) 1px,
                      hsl(var(--color), calc(var(--color-darken) - 0%)) 4px,
                      hsl(
                          var(--color),
                          calc(var(--color-darken) - var(--darken))
                        )
                        4px,
                      hsl(
                          var(--color),
                          calc(var(--color-darken) - var(--darken))
                        )
                        5px
                    );
                }
              }
            }
          }
        }
        .foundation {
          box-shadow: inset 0 0 0 1px;
          flex-grow: 1;

          --sideWidth: calc(50% - var(--width));
          width: var(--sideWidth);
          transform: translate(var(--x-modifier), var(--y-modifier)) scaleY(2) rotate(calc(var(--rotation) * 1deg));
          @for $i from 1 through 6 {
            &.class-#{$i} {
              .side:first-of-type {
                .window {
                  &:before,
                  &:after {
                    width: 25%;
                  }
                  &:before {
                    transform: rotateY(-180deg);
                  }
                  &:after {
                    transform: rotateY(180deg);
                  }
                }
              }
            }
          }
          @for $i from 3 through 5 {
            &.class-#{$i} {
              .side:first-of-type {
                .door {
                  background: linear-gradient(
                    to bottom,
                    hsl(var(--tan), 90%) calc(50% - var(--position)),
                    #000 calc(50% - var(--position)),
                    #000 calc(50% - var(--position) + 1px),
                    hsl(var(--tan), 90%) calc(50% - var(--position) + 1px)
                  );
                }
              }
            }
          }
          @for $i from 6 through 7 {
            &.class-#{$i} {
              .side:first-of-type {
                .door {
                  background: linear-gradient(
                    to bottom,
                    #000 4px,
                    hsl(var(--tan), 90%) 4px,
                    hsl(var(--tan), 90%) 40%,
                    #000 30%
                  );
                }
              }
            }
          }
          @for $i from 1 through 2 {
            &.class-#{$i} {
              .side:first-of-type {
                .window {
                  background: linear-gradient(
                    to bottom,
                    hsl(var(--blue), 80%) calc(50% - var(--position)),
                    var(--black) calc(50% - var(--position)),
                    var(--black) calc(50% - var(--position) + 1px),
                    hsl(var(--blue), 80%) calc(50% - var(--position) + 1px)
                  );
                }
              }
            }
          }
          @for $i from 3 through 4 {
            &.class-#{$i} {
              .side:first-of-type {
                .window {
                  background: linear-gradient(
                      to right,
                      var(--t) calc(50% - var(--position)),
                      var(--black) calc(50% - var(--position)),
                      var(--black) calc(50% - var(--position) + 1px),
                      var(--t) calc(50% - var(--position) + 1px)
                    ),
                    linear-gradient(
                      to bottom,
                      hsl(var(--blue), 80%) calc(50% - 1px),
                      var(--black) calc(50% - 1px),
                      var(--black) calc(50% + 1px),
                      hsl(var(--blue), 80%) calc(50% + 1px)
                    );
                }
              }
            }
          }
          @for $i from 5 through 6 {
            &.class-#{$i} {
              .side:first-of-type {
                .window {
                  background: linear-gradient(
                      to right,
                      var(--t) calc(50% - var(--position)),
                      var(--black) calc(50% - var(--position)),
                      var(--black) calc(50% - var(--position) + 1px),
                      hsl(var(--blue), 80%) calc(50% - var(--position) + 1px)
                    ),
                    linear-gradient(
                      to bottom,
                      hsl(var(--blue), 80%) calc(50% - 1px),
                      var(--black) calc(50% - 1px),
                      var(--black) calc(50% + 1px),
                      hsl(var(--blue), 80%) calc(50% + 1px)
                    );
                }
              }
            }
          }
          &.class-4 {
            --black-2: hsl(var(--tan), 30%);
            &:nth-of-type(even) {
              .side {
                &:nth-of-type(4) {
                  .rail {
                    height: 6px;
                    background: repeating-linear-gradient(
                        to right,
                        var(--black) 1px,
                        var(--t) 1px,
                        var(--t) 6px,
                        var(--black) 6px,
                        var(--black) 7px
                      ),
                      linear-gradient(
                          to right,
                          var(--black) 6px,
                          var(--t) 6px,
                          var(--t) 12px
                        )
                        0px calc(50% - 1px) / 12px 1px repeat-x,
                      linear-gradient(
                          to right,
                          var(--black) 6px,
                          var(--t) 6px,
                          var(--t) 12px
                        )
                        7px calc(50% + 1px) / 12px 1px repeat-x;
                    box-shadow: 0 -2px 0 var(--black);
                  }
                }
              }
            }
            .side {
              &:nth-of-type(4) {
                .rail {
                  position: absolute;
                  width: 100%;
                  height: 7.5px;
                  left: 0;
                  bottom: 0;
                  background: repeating-linear-gradient(
                    to right,
                    var(--black) 2px,
                    var(--t) 2px,
                    var(--t) 6px,
                    var(--black) 6px,
                    var(--black) 8px
                  );
                  box-shadow: 0 -2px 0 var(--black);
                  transform-origin: bottom;
                  transform: rotateX(-90deg);
                  &:before,
                  &:after {
                    --black-2: hsl(var(--tan), 20%);
                    content: "";
                    position: absolute;
                    width: 50%;
                    height: 100%;
                    right: 100%;
                    background: inherit;
                    box-shadow: inherit;
                    transform-origin: right;
                    transform: rotateY(-90deg);
                  }
                  &:after {
                    right: auto;
                    left: 100%;
                    transform-origin: left;
                    transform: rotateY(90deg);
                  }
                }
              }
            }
          }
          &:nth-of-type(even) {
            --sideWidth: calc(50% + var(--width));
          }
          .side {
            background: hsl(
              var(--color),
              calc(var(--color-darken) - var(--darken))
            );
            //front side
            &:first-of-type {
              transform-origin: bottom;
              top: auto;
              bottom: 0;
              transform: rotateX(-90deg);
              height: calc(
                100% + var(--height) + (var(--height-modifier) * 1px)
              );
              background: transparent;
              .door {
                bottom: calc(0px + (var(--height-modifier) * 1.05px));
                top: auto;
                left: clamp(
                  30%,
                  calc(50% - ((var(--width) * 1.25) + 10px)),
                  60%
                );
                width: 10px;
                height: 25px;
                background: rgba(0, 0, 0, 0.75);
                box-shadow: inset 0 0 0 1px #000;
                position: absolute;
                z-index: 9;
              }
              .window {
                position: absolute;
                width: 25%;
                height: clamp(
                  15px,
                  calc((var(--width) * 1.25) + 20px),
                  calc(100% + 45px)
                );
                left: 12.5%;
                background: hsl(var(--blue), 80%);
                box-shadow: inset 0 0 0 1px var(--black);
                z-index: 10;
                position: absolute;
                top: 0px;
                &:before,
                &:after {
                  content: "";
                  position: absolute;
                  width: 50%;
                  height: 100%;
                  top: 0;
                  background: repeating-linear-gradient(
                    to bottom,
                    #000 1px,
                    #444 1px,
                    #555 3px,
                    #000 3px,
                    #000 4px
                  );
                  box-shadow: inset 0 0 0 1.5px #000;
                }
                &:before {
                  left: 0;
                  transform-origin: left;
                }
                &:after {
                  right: 0;
                  transform-origin: right;
                }
                &:nth-of-type(2) {
                  left: auto;
                  right: 12.5%;
                  top: calc((var(--angle) * 0.25px) + 0px);
                  transform: rotate(180deg);
                }
              }
              &:before,
              &:after {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                box-shadow: inset 0 -1px 0 #000;
              }
              &:after {
                z-index: 2;
                --darken: 10%;
                background-color: hsl(
                  var(--color),
                  calc(var(--color-darken) - var(--darken))
                );
                background-image: linear-gradient(
                    to bottom,
                    hsl(
                      var(--color),
                      calc(var(--color-darken) - var(--darken))
                    ),
                    var(--t),
                    hsl(var(--color), calc(var(--color-darken) - var(--darken)))
                  ),
                  linear-gradient(
                    335deg,
                    hsl(var(--color), var(--color-darken)) calc(1.5 * 2.3px),
                    transparent calc(1.5 * 2.3px)
                  ),
                  linear-gradient(
                    155deg,
                    hsl(var(--color), var(--color-darken)) calc(1.5 * 2.3px),
                    transparent calc(1.5 * 2.3px)
                  ),
                  linear-gradient(
                    335deg,
                    hsl(var(--color), var(--color-darken)) calc(1.5 * 2.3px),
                    transparent calc(1.5 * 2.3px)
                  ),
                  linear-gradient(
                    155deg,
                    hsl(var(--color), var(--color-darken)) calc(1.5 * 2.3px),
                    transparent calc(1.5 * 2.3px)
                  );
                background-size: 100% 100%, calc(1.5 * 5.8px) calc(1.5 * 5.8px),
                  calc(1.5 * 5.8px) calc(1.5 * 5.8px),
                  calc(1.5 * 5.8px) calc(1.5 * 5.8px),
                  calc(1.5 * 5.8px) calc(1.5 * 5.8px);
                background-position: 50% 50%, 0px calc(1.5 * 0.2px),
                  calc(1.5 * 0.4px) calc(1.5 * 3.5px),
                  calc(1.5 * 2.9px) calc(1.5 * 3.1px),
                  calc(1.5 * 3.4px) calc(1.5 * 0.6px);
              }
              &:before {
                z-index: 1;
                --darken: 10%;
                background: hsl(
                  var(--color),
                  calc(var(--color-darken) - var(--darken))
                );
                transform-origin: bottom;
                transform: skewY(calc(var(--angle) * 1deg));
                top: -10px;
              }
              &:after {
                z-index: 2;
              }
            }
            // right side
            &:nth-of-type(2) {
              transform-origin: right;
              transform: rotateY(90deg)
                translateX(clamp(-15px, calc(1.5px * var(--angle)), -10px));
              left: auto;
              right: 0;
              --darken: 40%;
              box-shadow: 0 0 0 1px #000;
            }
            // left side
            &:nth-of-type(3) {
              transform-origin: left;
              transform: rotateY(-90deg)
                translateX(clamp(-10px, calc(1.5px * var(--angle)), 10px));
              background: transparent;
              filter: var(--shadow);
              &:before {
                content: "";
                position: absolute;
                height: 100%;
                width: 100%;
                bottom: 0;
                left: 0;
                background: linear-gradient(
                  to left,
                  hsl(var(--color), calc(var(--color-darken) - var(--darken))),
                  hsl(var(--color), 0%)
                );
              }
            }

            &:nth-of-type(2),
            &:nth-of-type(3) {
              --darken: 40%;
              width: calc(
                ((400px / 6) + var(--height) + (var(--height-modifier) * 1px))
              );
            }
            &:nth-of-type(4) {
              background: var(--secondary-roof), hsl(var(--roof), var(--darken));
              --darken: 15%;
              height: 100%;
              width: 100%;
              left: 0%;
              top: 0%;
              transform: translateZ(
                  calc((var(--height) + (var(--height-modifier) * 1px)) + 80px)
                )
                rotateY(calc(var(--angle) * 1deg));
              box-shadow: 0 0 0 1px #000;
              &:before,
              &:after,
              .panel {
                --darken: 20%;
                content: "";
                position: absolute;
                background: var(--secondary-roof),
                  hsl(var(--roof), var(--darken));
                box-shadow: inherit;
              }
              &:before {
                width: 100%;
                height: 5px;
                top: 100%;
                transform-origin: top;
                transform: rotateX(-90deg);
              }
              &:after,
              .panel {
                height: 100%;
                width: 10px;
                top: 0;
                left: 0;
                transform-origin: left;
                transform: rotateY(90deg);
              }
              .panel {
                left: auto;
                right: 0;
                transform-origin: right;
                transform: rotateY(-90deg);
              }
            }
          }
        }
      }
    }
    * {
      transform-style: preserve-3d;
      &:before,
      &:after {
        transform-style: preserve-3d;
      }
    }
  }
}

              
            
!

JS

              
                function draw() {
  document.querySelectorAll(".building").forEach((cell) => {
    cell.style.setProperty(
      "--width",
      Math.floor(Math.random() * 50) - 25 + "%"
    );
    
    cell.style.setProperty(
      "--rotation",
      Math.floor(Math.random() * 16) - 8
    );

    cell.style.setProperty("--angle", Math.floor(Math.random() * 30) - 15);
    cell.style.setProperty(
      "--position",
      Math.floor(Math.random() * 10) - 5 + "px"
    );
  });
  document.querySelectorAll(".foundation").forEach((cell) => {
    for (var i = 0; i < 8; i++) {
      cell.classList.remove("class-" + i);
    }
    cell.classList.add("class-" + Math.floor(Math.random() * 7));
    cell.style.setProperty(
      "--height",
      Math.floor(Math.random() * 50) - 25 + "px"
    );
    cell.style.setProperty(
      "--y-modifier",
      Math.floor(Math.random() * 50) - 25 + "px"
    );
    cell.style.setProperty(
      "--x-modifier",
      Math.floor(Math.random() * 5) - 2.5 + "px"
    );
    cell.style.setProperty(
      "--skew",
      Math.floor(Math.random() * 25) - 12.5 + "deg"
    );
    cell.style.setProperty(
      "--color",
      "var(--color" + (Math.floor(Math.random() * 10) + 1) + ")"
    );
    cell.style.setProperty(
      "--roof",
      "var(--roof" + (Math.floor(Math.random() * 3) + 1) + ")"
    );
    cell.style.setProperty(
      "--black",
      "var(--black-" + (Math.floor(Math.random() * 2) + 1) + ")"
    );
    cell.style.setProperty(
      "--color-darken",
      "var(--color" + (Math.floor(Math.random() * 4) + 1) + "-darken)"
    );
  });
}

draw();

document.addEventListener(
  "click",
  function (event) {
    draw();
  },
  false
);


window.addEventListener('load', function () {
  document.getElementById('wrap').classList.add('loaded');
}, false);
              
            
!
999px

Console