Canyonlands

canyonlands.markdown

Canyonlands

A Pen by Adam Kuhn on CodePen.

License.

index.haml

#wrap
 -6.times do
  .row
   -6.times do
    .cell
     .inner
      %svg{"data-name" => "Layer 1", :viewbox => "0 0 800 800", :xmlns => "http://www.w3.org/2000/svg"}
       %path.squig{:d => "M 0 400 Q 120 400 120 500 L 120 660 Q 120 760 180 760 Q 240 760 240 660 L 240 140 Q 240 40 300 40 Q 360 40 360 140 L 360 660 Q 360 760 420 760 Q 480 760 480 660 L 480 140 Q 480 40 540 40 Q 600 40 600 140 L 600 660 Q 600 760 660 760 Q 720 760 720 660 L 720 480 Q 720 400 800 400 "}
%span hover me / click me

script.js

function draw() {
  document.querySelectorAll(".cell").forEach((cell) => {
    cell.style.setProperty(
      "--path",
      "var(--path" + (Math.floor(Math.random() * 9) + 1) + ")"
    );
    for (j = 1; j < 4; j++) {
      cell.classList.remove("cell" + j);
    }
    cell.classList.add("cell" + Math.floor(Math.random() * 3));
  });
}

draw();

setInterval(function (event) {
  draw();
}, 3000);

document.addEventListener(
  "click",
  function (event) {
    document.body.classList.toggle("dark");
  },
  false
);

style.scss

body{
  display:grid;
  place-items:center;
  height:100vh;
  width:100vw;
  background:darken(#c9fff2, 20%);
  transition:0.3s ease-in-out;
  overflow:hidden;
  &.dark{
    background:darken(#c9fff2, 70%);
    &:before, &:after{
      filter:brightness(0.25) hue-rotate(15deg) saturate(5);
    }
    #wrap, #wrap:hover{
      .row{
        &:before{
          background:darken(#c9fff2, 70%);
          box-shadow:inset -50px -50px 0 0 rgba(245,240,192, 0.25);
          transition:0.3s ease-in-out, transform 1s ease-in-out;
          transition-delay:0.5s;
          transform:scale(0.4) translateY(-250px) translateX(500px);
        }
      }
    }
    .cell{
      filter:brightness(0.5);
    }
  }
  span{
    position:absolute;
    bottom:50px;
    width:100%;
    text-align:center;
    left:0;
    z-index:10;
    font-size:12px;
    color:rgba(0,0,0,0.5);
  }
  &:before, &:after{
    pointer-events:none;
    transition:1s ease-in-out;
  }
  &:after{
    content:'';
    position:absolute;
    width:440px;
    height:440px;
    box-shadow:0 20px 40px -10px rgba(0,0,0,0.5), 0 0 0 40px lighten(#c9fff2, 10%);
    z-index:9;
    border-radius:10px;
  }
  &:before{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    z-index:8;
    background:radial-gradient(circle at center, lighten(#c9fff2, 10%) 300px, #c9fff2);
    mask:linear-gradient(to bottom, #000 calc(50% - 225px), transparent calc(50% - 225px), transparent calc(50% + 225px), #000 calc(50% + 225px)), linear-gradient(to right, #000 calc(50% - 225px), transparent calc(50% - 225px), transparent calc(50% + 225px), #000 calc(50% + 225px));
  }
  --path:path("M 0 400 Q 110 400 110 330 L 110 130 Q 110 60 170 60 Q 230 60 230 130 L 230 590 Q 230 660 290 660 Q 350 660 350 590 L 350 290 Q 350 220 410 220 Q 470 220 470 290 L 470 500 Q 470 570 530 570 Q 590 570 590 500 L 590 160 Q 590 90 650 90 Q 710 90 710 160 L 710 320 Q 710 400 800 400 L 800 800 L 0 800 L 0 400 ");
  --path1:path("M 0 400 Q 110 400 110 330 L 110 130 Q 110 60 170 60 Q 230 60 230 130 L 230 590 Q 230 660 290 660 Q 350 660 350 590 L 350 290 Q 350 220 410 220 Q 470 220 470 290 L 470 500 Q 470 570 530 570 Q 590 570 590 500 L 590 160 Q 590 90 650 90 Q 710 90 710 160 L 710 320 Q 710 400 800 400 L 800 800 L 0 800 L 0 400 ");
  --path2: path("M 0 400 Q 110 400 110 330 L 110 260 Q 110 190 170 190 Q 230 190 230 260 L 230 360 Q 230 440 290 440 Q 350 440 350 360 L 350 290 Q 350 220 410 220 Q 470 220 470 290 L 470 560 Q 470 640 530 640 Q 590 640 590 560 L 590 140 Q 590 70 650 70 Q 710 70 710 140 L 710 320 Q 710 400 800 400 L 800 800 L 0 800 L 0 400 ");
  --path3: path("M 0 400 Q 110 400 110 400 L 140 400 Q 170 400 170 400 Q 200 400 230 400 L 260 400 Q 280 400 300 400 Q 350 400 350 330 L 350 290 Q 350 220 410 220 Q 470 220 470 290 L 470 560 Q 470 640 530 640 Q 590 640 590 560 L 590 140 Q 590 70 650 70 Q 710 70 710 140 L 710 320 Q 710 400 800 400 L 800 800 L 0 800 L 0 400 ");
  --path4: path("M 0 400 Q 80 400 80 470 L 80 620 Q 80 700 140 700 Q 200 700 200 620 L 200 480 Q 200 390 300 400 Q 350 400 350 330 L 350 290 Q 350 220 410 220 Q 470 220 450 220 L 490 220 Q 510 220 530 220 Q 590 220 590 160 L 590 140 Q 590 70 650 70 Q 710 70 710 140 L 710 320 Q 710 400 800 400 L 800 800 L 0 800 L 0 400 ");
  --path5: path("M 0 400 Q 80 400 80 470 L 80 620 Q 80 700 170 700 Q 260 700 260 620 L 260 520 Q 260 470 260 290 Q 260 220 330 220 L 370 220 Q 390 220 410 220 Q 470 220 450 220 L 490 220 Q 510 220 530 220 Q 580 220 590 280 L 590 500 Q 590 580 650 580 Q 710 580 710 500 L 710 470 Q 710 400 800 400 L 800 800 L 0 800 L 0 40");
  --path6: path("M 0 400 Q 80 400 80 470 L 80 620 Q 80 700 170 700 Q 260 700 260 620 L 260 520 Q 260 470 260 290 Q 260 220 330 220 L 330 220 Q 390 220 390 110 Q 390 50 450 50 L 520 50 Q 580 50 580 110 Q 580 220 580 280 L 580 500 Q 580 580 650 580 Q 710 580 710 500 L 710 470 Q 710 400 800 400 L 800 800 L 0 800 L 0 400 ");
  --path7:path("M 0 400 Q 80 400 80 400 L 120 400 Q 140 400 160 400 Q 190 400 210 400 L 240 400 Q 260 400 270 400 Q 290 400 310 400 L 340 400 Q 390 400 430 400 Q 450 400 470 400 L 520 400 Q 540 400 550 400 Q 570 400 580 400 L 610 400 Q 650 400 680 400 Q 700 400 710 400 L 730 400 Q 710 400 800 400 L 800 800 L 0 800 L 0 400 ");
  --path8:path("M 0 400 Q 80 400 80 400 L 120 400 Q 140 400 160 400 Q 190 400 210 400 L 240 400 Q 260 400 270 400 Q 290 400 310 400 L 340 400 Q 390 400 430 400 Q 450 400 470 400 L 520 400 Q 540 400 550 400 Q 570 400 580 400 L 610 400 Q 650 400 680 400 Q 700 400 710 400 L 730 400 Q 710 400 800 400 L 800 800 L 0 800 L 0 400 ");
  --path9:path("M 0 400 Q 80 400 80 400 L 120 400 Q 140 400 160 400 Q 190 400 210 400 L 240 400 Q 260 400 270 400 Q 290 400 310 400 L 340 400 Q 390 400 430 400 Q 450 400 470 400 L 520 400 Q 540 400 550 400 Q 570 400 580 400 L 610 400 Q 650 400 680 400 Q 700 400 710 400 L 730 400 Q 710 400 800 400 L 800 800 L 0 800 L 0 400 ");
  perspective:800px;
  --color1: #422B38;
  --color2: #7F415C;
  --color3: #B83F6C;
  --color4: #EB2E5C;
  --color5: #FD6765;
  --color6: #F89275;
  --color7: #FDDA92;
    #wrap:hover{
      transform:scale(0.5) scaleX(1.25) rotateX(50deg);
      .row{
        @for $i from 1 through 6{
          &:nth-of-type(#{$i}){
            transform:translateY(#{($i - 1) * 5}px) rotateX(-50deg) skewY(-2.5deg);
            &:nth-of-type(odd){
              transform:translateY(#{($i - 1) * 5}px) rotateX(-50deg) skewY(2.5deg);
            }
          }
        }
        &:before{
          top:-200px;
          box-shadow:0 0 0 40px rgba(245,240,192, 0.25), 0 0 1000px 100px rgba(0,0,0,0.15);
          transition:top 2s ease-in-out, box-shadow 2s ease-in-out, transform 0.3s ease-in-out;
        }
      }
    }
  #wrap{
    cursor:pointer;
    width:800px;
    height:800px;
    position:relative;
    display:grid;
    grid-template-columns: 1;
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    transform-style:preserve-3d;
    transform:scale(0.6) rotateX(0deg) translateY(40px);
    transition:1s ease-in-out;
    box-shadow:0 20px 40px -10px rgba(0,0,0,0.25);
    .row{
      display:grid;
      grid-column-gap: 0px;
      grid-row-gap: 0px;
      grid-template-columns: repeat(6, 1fr);
      position:relative;
      transform-style:preserve-3d;
      transform-origin:bottom;
      transform:rotateX(0deg) translateY(-10px) skewY(-2.5deg);
      transition:1s ease-in-out;
      &:nth-of-type(even){
        transform:rotateX(0deg) translateY(-10px) skewY(2.5deg);
      }
      &:before{
        position:absolute;
        width:calc(100% + 50px);
        background:rgba(245,240,192, 0.75);
        width:200px;
        height:250px;
        border-radius:100%;
        left:calc(50% - 100px);
        top:100%;
        transition:0.3s ease-in-out;
        transform:translateZ(-10px);
      }
      &:first-of-type{
        &:before{
         content:'';
         }
      }
      @for $i from 1 through 6{
        &:nth-of-type(#{$i}){
          .cell{
            background:linear-gradient(to bottom, var(--color#{(7 - $i) + 1}), var(--color#{7 - $i}));
            box-shadow:0 50px 0 var(--color#{7 - $i});
            transition:filter 0.2s ease-in-out;
            &:before, &:after{
              background:linear-gradient(to bottom, var(--color#{(7 - $i) + 1}) 33.333%, var(--color#{7 - $i}));
            }
            .inner{
              transition-delay:#{$i/12}s;
            }
            svg{
              
              path{
                fill:var(--color#{(7 - $i) + 1});
                transition-delay:#{$i/12}s;
              }
            }
          }
        }
      }
    }
    .cell{
      position:relative;
      z-index:2;
      transform-style:preserve-3d;
      transform-origin:50% 200%;
      margin:0 -1px;
      &:before, &:after{
        content:'';
        position:absolute;
        width:25px;
        height:calc(150% - 1px);
        top:calc(-50% + 1px);
        left:-24px;
        border-radius:10px 0 0 10px;
      }
      &:after{
        left:auto;
        right:-24px;
        border-radius:0 10px 10px 0;
      }
      &.cell1{
        .inner{
          transform:scaleX(2);
          height:calc(100% + 1px);
        }
      }
      .inner{
        position:absolute;
        transform-style:preserve-3d;
        width:100%;
        height:100%;
        overflow:hidden;
        top:-100%;
        left:0;
        transform-origin:left;
        transition:0.3s ease-in-out;
      }
    }
    svg{
      position:absolute;
      width:107.5%;
      height:107.5%;
      left:-3.25%;
      top:-3.25%;
      z-index:-1;
      transform-style:preserve-3d;
      path{
        fill:#ccc;
        stroke-linecap:rounded;
        d:var(--path);
        transition:d 0.3s ease-in-out;
      }
    }
  }
}