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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              #formwrap
 %form.numberinput
  %input.number{:maxlength => "3", :name => "number", :oninput => "javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);", :type => "number", :placeholder => "number"}/
  %input{:type => "submit", :value => "→"}/

%button.reset RESET

#wrap
 .number.spacer
  -100.times do
   .cell
 .number.spacer
  -100.times do
   .cell
 .number.spacer.last
  -100.times do
   .cell
 .number.firstnumber
  -100.times do
   .cell
 .number.secondnumber
  -100.times do
   .cell
 .number.thirdnumber.last
  -100.times do
   .cell
 .number.spacer
  -100.times do
   .cell
 .number.spacer
  -100.times do
   .cell
 .number.spacer.last
  -100.times do
   .cell
            
          
!

CSS

            
              $t: transparent;

body{
  background:#222;
  --color1: #ccd8eb;
  --color2: #3079e2;
  --bg: transparent;
  height:100vh;
  width:100vw;
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:900px;
  font-family:'Roboto Mono', monospace;
  .reset{
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%) scaleX(0);
    color:#fff;
    font-weight:100;
    font-size:12px;
    letter-spacing:2px;
    cursor:pointer;
    background:transparent;
    border:none;
    font-family:'Roboto Mono', monospace;
    outline:none;
    transition:300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    &:hover{
      &:after{
        transform:scaleX(1);
      }
    }
    &:after{
      content:'';
      position:absolute;
      width:100%;
      height:1px;
      background:var(--color1);
      bottom:-5px;
      left:0;
      transition:0.3s cubic-bezier(1,0,0,1);
      transform:scaleX(0);
      transform-origin:left;
    }
  }
  &.two{
    .last{
      display:none;
    }
    #wrap{
      width:600px;
    }
  }
  &.active{
    .reset{
      transform:translateX(-50%) scaleX(1);
      transition-delay:3s;
    }
    #wrap{
      opacity:1;
    }
    #formwrap{
      opacity:0;
    }
  }
  #formwrap{
    position:absolute;
    width:100vw;
    z-index:999;
    text-align:center;
    transition:0.3s ease-in-out;
    left:0;
    form{
      display:inline-block;
      input[type=number]::-webkit-inner-spin-button, 
      input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none; 
        margin: 0; 
      }
      input[type="number"]{
        font-family:'Roboto Mono', monospace;
        background:transparent;
        border:none;
        border-bottom:1px solid var(--color2);
        height:auto;
        text-align:center;
        outline:none;
        width:25vmin;
        color:var(--color2);
        font-size:10vmin;
        line-height:1;
        padding:1rem 0;
        &:hover, &:focus{
          outline:none;
        }
        &:focus{
          &::placeholder{
            opacity:0;
          }
        }
        &::placeholder{
          color:#666;
          font-size:5vmin;
          opacity:1;
        }
      }
      input[type="submit"]{
        opacity:1;
        color:var(--color2);
        background:transparent;
        border:1px solid;
        font-size:5vmin;
        width:25vmin;
        text-align:center;
        margin-top:5vmin;
        transition:0.3s ease-in-out;
        cursor:pointer;
        &:hover{
          color:var(--color1);
        }
      }
    }
  }
  #wrap{
    width:900px;
    height:600px;
    display:flex;
    flex-wrap:wrap;
    background:#222;
    opacity:0;
    &.loading{
      animation:fadeIn 0.5s ease-in-out 1 forwards;
      opacity:0;
      animation-delay:0.5s;
      @keyframes fadeIn{
        from{
          opacity:0;
        }
        to{
          opacity:1;
        }
      }
    }
    &:not(.loading){
      .number{
        .cell{
          @for $i from 1 through 100{
            &:nth-of-type(#{$i}){
              animation-delay:#{$i/50}s !important;
            }
          }
        }
        &.number0, &.number1, &.number2, &.number3, &.number4, &.number5, &.number6, &.number8, &.number9{
          .cell{
            animation:clip-in 1s ease-in-out 1 forwards;
            @keyframes clip-in{
            0%{
                clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
            }
            75%{
                clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
            }
            100%{
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
              }
            }
          }
        }
        &.number0{
          .cell{
            &:nth-of-type(n+45){
              animation:clip-out 0.2s ease-in-out 1 forwards;
             }
          }
        }
        &.number1{
          .cell{
            &:nth-of-type(n+32){
              animation:clip-out 0.2s ease-in-out 1 forwards;
             }
          }
        }
        &.number2{
          .cell{
            &:nth-of-type(n+40){
              animation:clip-out 0.2s ease-in-out 1 forwards;
             }
          }
        }
        &.number3, &.number4{
          .cell{
            &:nth-of-type(n+42){
              animation:clip-out 0.2s ease-in-out 1 forwards;
             }
          }
        }
        &.number5{
          .cell{
            &:nth-of-type(n+41){
              animation:clip-out 0.2s ease-in-out 1 forwards;
             }
          }
        }
        &.number6, &.number9{
          .cell{
            &:nth-of-type(n+48){
              animation:clip-out 0.2s ease-in-out 1 forwards;
             }
          }
        }
        &.number7{
          .cell{
            &:nth-of-type(n+31){
              animation:clip-out 0.2s ease-in-out 1 forwards;
             }
          }
        }
        &.number8{
          .cell{
            &:nth-of-type(n+51){
              animation:clip-out 0.2s ease-in-out 1 forwards;
             }
          }
        }
        &.drawout{
          .cell{
            animation:clip-out 0.2s ease-in-out 1 forwards;
          }
        }
      }
      .number.spacer{
        &:nth-of-type(n + 4){
          .cell{
            @for $i from 1 through 100{
              &:nth-of-type(#{$i}){
                animation-delay:#{($i/50) + 1.75}s !important;
              }
            }
          }
        }
      .cell{
        animation:clip-out 0.2s ease-in-out 1 forwards;
          @keyframes clip-out{
            from{
              clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            }
            to{
              clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
            }
          }
        }
      }
    }
  }
  .number{
    display:grid;
    width:300px;
    height:300px;
    grid-template-columns: repeat(10, 30px);
    grid-template-rows: repeat(10, 30px);
    .cell{
      will-change:clip-path;
    }
    &.spacer{
      height:150px;
      grid-template-columns: repeat(10, 30px);
      grid-template-rows: repeat(5, 30px);
    }
    &.number0{
      .cell{
        &:nth-of-type(1){ grid-area: 2 / 8 / 3 / 9; }
        &:nth-of-type(2){ grid-area: 1 / 7 / 2 / 8; }
        &:nth-of-type(3){ grid-area: 1 / 6 / 2 / 7; }
        &:nth-of-type(4){ grid-area: 1 / 4 / 2 / 5; }
        &:nth-of-type(5){ grid-area: 1 / 5 / 2 / 6; }
        &:nth-of-type(6){ grid-area: 2 / 7 / 3 / 8; }
        &:nth-of-type(7){ grid-area: 2 / 6 / 3 / 7; }
        &:nth-of-type(8){ grid-area: 2 / 5 / 3 / 6; }
        &:nth-of-type(9){ grid-area: 2 / 4 / 3 / 5; }
        &:nth-of-type(10){ grid-area: 2 / 3 / 3 / 4; }
        &:nth-of-type(11){ grid-area: 3 / 2 / 4 / 3; }
        &:nth-of-type(12){ grid-area: 4 / 2 / 5 / 3; }
        &:nth-of-type(13){ grid-area: 5 / 2 / 6 / 3; }
        &:nth-of-type(14){ grid-area: 6 / 2 / 7 / 3; }
        &:nth-of-type(15){ grid-area: 7 / 2 / 8 / 3; }
        &:nth-of-type(16){ grid-area: 8 / 2 / 9 / 3; }
        &:nth-of-type(17){ grid-area: 3 / 3 / 4 / 4; }
        &:nth-of-type(18){ grid-area: 4 / 3 / 5 / 4; }
        &:nth-of-type(19){ grid-area: 5 / 3 / 6 / 4; }
        &:nth-of-type(20){ grid-area: 7 / 3 / 8 / 4; }
        &:nth-of-type(21){ grid-area: 6 / 3 / 7 / 4; }
        &:nth-of-type(22){ grid-area: 8 / 3 / 9 / 4; }
        &:nth-of-type(23){ grid-area: 9 / 3 / 10 / 4; }
        &:nth-of-type(24){ grid-area: 10 / 4 / 11 / 5; }
        &:nth-of-type(25){ grid-area: 10 / 5 / 11 / 6; }
        &:nth-of-type(26){ grid-area: 10 / 6 / 11 / 7; }
        &:nth-of-type(27){ grid-area: 10 / 7 / 11 / 8; }
        &:nth-of-type(28){ grid-area: 9 / 8 / 10 / 9; }
        &:nth-of-type(29){ grid-area: 3 / 9 / 4 / 10; }
        &:nth-of-type(30){ grid-area: 3 / 8 / 4 / 9; }
        &:nth-of-type(31){ grid-area: 5 / 8 / 6 / 9; }
        &:nth-of-type(32){ grid-area: 4 / 8 / 5 / 9; }
        &:nth-of-type(33){ grid-area: 6 / 8 / 7 / 9; }
        &:nth-of-type(34){ grid-area: 7 / 8 / 8 / 9; }
        &:nth-of-type(35){ grid-area: 8 / 8 / 9 / 9; }
        &:nth-of-type(36){ grid-area: 8 / 9 / 9 / 10; }
        &:nth-of-type(37){ grid-area: 7 / 9 / 8 / 10; }
        &:nth-of-type(38){ grid-area: 6 / 9 / 7 / 10; }
        &:nth-of-type(39){ grid-area: 5 / 9 / 6 / 10; }
        &:nth-of-type(40){ grid-area: 4 / 9 / 5 / 10; }
        &:nth-of-type(41){ grid-area: 9 / 4 / 10 / 5; }
        &:nth-of-type(42){ grid-area: 9 / 5 / 10 / 6; }
        &:nth-of-type(43){ grid-area: 9 / 6 / 10 / 7; }
        &:nth-of-type(44){ grid-area: 9 / 7 / 10 / 8; }
      }
    }
    &.number1{
      .cell{
        &:nth-of-type(1){ grid-area: 3 / 3 / 4 / 4;}
        &:nth-of-type(2){ grid-area: 3 / 4 / 4 / 5; }
        &:nth-of-type(3){ grid-area: 2 / 4 / 3 / 5; }
        &:nth-of-type(4){ grid-area: 2 / 5 / 3 / 6; }
        &:nth-of-type(5){ grid-area: 1 / 5 / 2 / 6; }
        &:nth-of-type(6){ grid-area: 1 / 6 / 2 / 7; }
        &:nth-of-type(7){ grid-area: 2 / 6 / 3 / 7; }
        &:nth-of-type(8){ grid-area: 3 / 6 / 4 / 7; }
        &:nth-of-type(9){ grid-area: 3 / 5 / 4 / 6; }
        &:nth-of-type(10){ grid-area: 4 / 5 / 5 / 6; }
        &:nth-of-type(11){ grid-area: 4 / 6 / 5 / 7; }
        &:nth-of-type(12){ grid-area: 5 / 6 / 6 / 7; }
        &:nth-of-type(13){ grid-area: 5 / 5 / 6 / 6; }
        &:nth-of-type(14){ grid-area: 6 / 5 / 7 / 6; }
        &:nth-of-type(15){ grid-area: 6 / 6 / 7 / 7; }
        &:nth-of-type(16){ grid-area: 7 / 6 / 8 / 7; }
        &:nth-of-type(17){ grid-area: 7 / 5 / 8 / 6; }
        &:nth-of-type(18){ grid-area: 8 / 5 / 9 / 6; }
        &:nth-of-type(19){ grid-area: 8 / 6 / 9 / 7; }
        &:nth-of-type(20){ grid-area: 9 / 6 / 10 / 7; }
        &:nth-of-type(21){ grid-area: 9 / 5 / 10 / 6; }
        &:nth-of-type(22){ grid-area: 10 / 5 / 11 / 6; }
        &:nth-of-type(23){ grid-area: 10 / 6 / 11 / 7; }
        &:nth-of-type(24){ grid-area: 10 / 7 / 11 / 8; }
        &:nth-of-type(25){ grid-area: 10 / 8 / 11 / 9; }
        &:nth-of-type(26){ grid-area: 10 / 4 / 11 / 5; }
        &:nth-of-type(27){ grid-area: 10 / 3 / 11 / 4; }
        &:nth-of-type(28){ grid-area: 9 / 3 / 10 / 4; }
        &:nth-of-type(29){ grid-area: 9 / 4 / 10 / 5; }
        &:nth-of-type(30){ grid-area: 9 / 7 / 10 / 8; }
        &:nth-of-type(31){ grid-area: 9 / 8 / 10 / 9; }
      }
    }
    &.number2{
      .cell{
        &:nth-of-type(1){ grid-area: 4 / 2 / 5 / 3; }
        &:nth-of-type(2){ grid-area: 4 / 3 / 5 / 4; }
        &:nth-of-type(3){ grid-area: 3 / 2 / 4 / 3; }
        &:nth-of-type(4){ grid-area: 3 / 3 / 4 / 4; }
        &:nth-of-type(5){ grid-area: 2 / 3 / 3 / 4; }
        &:nth-of-type(6){ grid-area: 2 / 4 / 3 / 5; }
        &:nth-of-type(7){ grid-area: 1 / 4 / 2 / 5; }
        &:nth-of-type(8){ grid-area: 1 / 5 / 2 / 6; }
        &:nth-of-type(9){ grid-area: 1 / 6 / 2 / 7; }
        &:nth-of-type(10){ grid-area: 1 / 7 / 2 / 8; }
        &:nth-of-type(11){ grid-area: 2 / 5 / 3 / 6; }
        &:nth-of-type(12){ grid-area: 2 / 6 / 3 / 7; }
        &:nth-of-type(13){ grid-area: 2 / 7 / 3 / 8; }
        &:nth-of-type(14){ grid-area: 3 / 8 / 4 / 9; }
        &:nth-of-type(15){ grid-area: 3 / 7 / 4 / 8; }
        &:nth-of-type(16){ grid-area: 4 / 8 / 5 / 9; }
        &:nth-of-type(17){ grid-area: 4 / 7 / 5 / 8; }
        &:nth-of-type(18){ grid-area: 5 / 8 / 6 / 9; }
        &:nth-of-type(19){ grid-area: 5 / 7 / 6 / 8; }
        &:nth-of-type(20){ grid-area: 6 / 7 / 7 / 8; }
        &:nth-of-type(21){ grid-area: 6 / 6 / 7 / 7; }
        &:nth-of-type(22){ grid-area: 9 / 7 / 10 / 8; }
        &:nth-of-type(23){ grid-area: 7 / 6 / 8 / 7; }
        &:nth-of-type(24){ grid-area: 7 / 5 / 8 / 6; }
        &:nth-of-type(25){ grid-area: 9 / 6 / 10 / 7; }
        &:nth-of-type(26){ grid-area: 8 / 5 / 9 / 6; }
        &:nth-of-type(27){ grid-area: 8 / 4 / 9 / 5; }
        &:nth-of-type(28){ grid-area: 9 / 5 / 10 / 6; }
        &:nth-of-type(29){ grid-area: 9 / 4 / 10 / 5; }
        &:nth-of-type(30){ grid-area: 9 / 3 / 10 / 4; }
        &:nth-of-type(31){ grid-area: 10 / 3 / 11 / 4; }
        &:nth-of-type(32){ grid-area: 10 / 4 / 11 / 5; }
        &:nth-of-type(33){ grid-area: 10 / 5 / 11 / 6; }
        &:nth-of-type(34){ grid-area: 10 / 6 / 11 / 7; }
        &:nth-of-type(35){ grid-area: 10 / 7 / 11 / 8; }
        &:nth-of-type(36){ grid-area: 10 / 8 / 11 / 9; }
        &:nth-of-type(37){ grid-area: 10 / 2 / 11 / 3; }
        &:nth-of-type(38){ grid-area: 2 / 8 / 3 / 9; }
        &:nth-of-type(39){ grid-area: 9 / 8 / 10 / 9; }
      }
    }
    &.number3{
      .cell{
        &:nth-of-type(1){ grid-area: 4 / 2 / 5 / 3; }
        &:nth-of-type(2){ grid-area: 4 / 3 / 5 / 4; }
        &:nth-of-type(3){ grid-area: 3 / 2 / 4 / 3; }
        &:nth-of-type(4){ grid-area: 3 / 3 / 4 / 4; }
        &:nth-of-type(5){ grid-area: 2 / 3 / 3 / 4; }
        &:nth-of-type(6){ grid-area: 2 / 4 / 3 / 5; }
        &:nth-of-type(7){ grid-area: 1 / 4 / 2 / 5; }
        &:nth-of-type(8){ grid-area: 1 / 5 / 2 / 6; }
        &:nth-of-type(9){ grid-area: 1 / 6 / 2 / 7; }
        &:nth-of-type(10){ grid-area: 1 / 7 / 2 / 8; }
        &:nth-of-type(11){ grid-area: 2 / 5 / 3 / 6; }
        &:nth-of-type(12){ grid-area: 2 / 6 / 3 / 7; }
        &:nth-of-type(13){ grid-area: 2 / 7 / 3 / 8; }
        &:nth-of-type(14){ grid-area: 3 / 8 / 4 / 9; }
        &:nth-of-type(15){ grid-area: 3 / 7 / 4 / 8; }
        &:nth-of-type(16){ grid-area: 4 / 8 / 5 / 9; }
        &:nth-of-type(17){ grid-area: 4 / 7 / 5 / 8; }
        &:nth-of-type(18){ grid-area: 5 / 8 / 6 / 9; }
        &:nth-of-type(19){ grid-area: 5 / 7 / 6 / 8; }
        &:nth-of-type(20){ grid-area: 6 / 7 / 7 / 8; }
        &:nth-of-type(21){ grid-area: 2 / 8 / 3 / 9; }
        &:nth-of-type(22){ grid-area: 7 / 7 / 8 / 8; }
        &:nth-of-type(23){ grid-area: 8 / 7 / 9 / 8; }
        &:nth-of-type(24){ grid-area: 8 / 8 / 9 / 9; }
        &:nth-of-type(25){ grid-area: 9 / 8 / 10 / 9; }
        &:nth-of-type(26){ grid-area: 9 / 7 / 10 / 8; }
        &:nth-of-type(27){ grid-area: 10 / 7 / 11 / 8; }
        &:nth-of-type(28){ grid-area: 10 / 6 / 11 / 7; }
        &:nth-of-type(29){ grid-area: 5 / 6 / 6 / 7; }
        &:nth-of-type(30){ grid-area: 5 / 5 / 6 / 6; }
        &:nth-of-type(31){ grid-area: 6 / 5 / 7 / 6; }
        &:nth-of-type(32){ grid-area: 6 / 6 / 7 / 7; }
        &:nth-of-type(33){ grid-area: 7 / 8 / 8 / 9; }
        &:nth-of-type(34){ grid-area: 9 / 6 / 10 / 7; }
        &:nth-of-type(35){ grid-area: 9 / 5 / 10 / 6; }
        &:nth-of-type(36){ grid-area: 10 / 5 / 11 / 6; }
        &:nth-of-type(37){ grid-area: 10 / 4 / 11 / 5; }
        &:nth-of-type(38){ grid-area: 9 / 4 / 10 / 5; }
        &:nth-of-type(39){ grid-area: 9 / 3 / 10 / 4; }
        &:nth-of-type(40){ grid-area: 8 / 3 / 9 / 4; }
        &:nth-of-type(41){ grid-area: 8 / 2 / 9 / 3; }
        &:nth-of-type(42){ grid-area: 9 / 2 / 10 / 3; }
      }
    }
    &.number4{
      .cell{
        &:nth-of-type(1){ grid-area: 2 / 4 / 3 / 5; opacity:0 }
        &:nth-of-type(2){ grid-area: 1 / 6 / 2 / 7; }
        &:nth-of-type(3){ grid-area: 1 / 7 / 2 / 8; }
        &:nth-of-type(4){ grid-area: 2 / 5 / 3 / 6; }
        &:nth-of-type(5){ grid-area: 2 / 6 / 3 / 7; }
        &:nth-of-type(6){ grid-area: 2 / 7 / 3 / 8; }
        &:nth-of-type(7){ grid-area: 3 / 7 / 4 / 8; }
        &:nth-of-type(8){ grid-area: 4 / 7 / 5 / 8; }
        &:nth-of-type(9){ grid-area: 5 / 7 / 6 / 8; }
        &:nth-of-type(10){ grid-area: 3 / 3 / 4 / 4; opacity:0 }
        &:nth-of-type(11){ grid-area: 3 / 4 / 4 / 5; }
        &:nth-of-type(12){ grid-area: 4 / 3 / 5 / 4; }
        &:nth-of-type(13){ grid-area: 5 / 2 / 6 / 3; }
        &:nth-of-type(14){ grid-area: 5 / 3 / 6 / 4; }
        &:nth-of-type(15){ grid-area: 6 / 2 / 7 / 3; }
        &:nth-of-type(16){ grid-area: 6 / 3 / 7 / 4; }
        &:nth-of-type(17){ grid-area: 6 / 4 / 7 / 5; }
        &:nth-of-type(18){ grid-area: 6 / 5 / 7 / 6; }
        &:nth-of-type(19){ grid-area: 6 / 6 / 7 / 7; }
        &:nth-of-type(20){ grid-area: 6 / 7 / 7 / 8; }
        &:nth-of-type(21){ grid-area: 6 / 8 / 7 / 9; }
        &:nth-of-type(22){ grid-area: 6 / 9 / 7 / 10; }
        &:nth-of-type(23){ grid-area: 7 / 9 / 8 / 10; }
        &:nth-of-type(24){ grid-area: 7 / 8 / 8 / 9; }
        &:nth-of-type(25){ grid-area: 7 / 7 / 8 / 8; }
        &:nth-of-type(26){ grid-area: 1 / 8 / 2 / 9; }
        &:nth-of-type(27){ grid-area: 2 / 8 / 3 / 9; }
        &:nth-of-type(28){ grid-area: 3 / 8 / 4 / 9; }
        &:nth-of-type(29){ grid-area: 4 / 8 / 5 / 9; }
        &:nth-of-type(30){ grid-area: 5 / 8 / 6 / 9; }
        &:nth-of-type(31){ grid-area: 8 / 7 / 9 / 8; }
        &:nth-of-type(32){ grid-area: 8 / 8 / 9 / 9; }
        &:nth-of-type(33){ grid-area: 9 / 8 / 10 / 9; }
        &:nth-of-type(34){ grid-area: 9 / 7 / 10 / 8; }
        &:nth-of-type(35){ grid-area: 10 / 7 / 11 / 8; }
        &:nth-of-type(36){ grid-area: 10 / 8 / 11 / 9; }
        &:nth-of-type(37){ grid-area: 7 / 6 / 8 / 7; }
        &:nth-of-type(38){ grid-area: 7 / 5 / 8 / 6; }
        &:nth-of-type(39){ grid-area: 7 / 4 / 8 / 5; }
        &:nth-of-type(40){ grid-area: 7 / 3 / 8 / 4; }
        &:nth-of-type(41){ grid-area: 7 / 2 / 8 / 3; }
      }
    }
    &.number5{
        .cell{
          &:nth-of-type(1){ grid-area: 1 / 6 / 2 / 7; }
          &:nth-of-type(2){ grid-area: 1 / 7 / 2 / 8; }
          &:nth-of-type(3){ grid-area: 2 / 5 / 3 / 6; }
          &:nth-of-type(4){ grid-area: 2 / 6 / 3 / 7; }
          &:nth-of-type(5){ grid-area: 2 / 7 / 3 / 8; }
          &:nth-of-type(6){ grid-area: 5 / 3 / 6 / 4; }
          &:nth-of-type(7){ grid-area: 1 / 8 / 2 / 9; }
          &:nth-of-type(8){ grid-area: 2 / 8 / 3 / 9; }
          &:nth-of-type(9){ grid-area: 4 / 3 / 5 / 4; }
          &:nth-of-type(10){ grid-area: 3 / 3 / 4 / 4; }
          &:nth-of-type(11){ grid-area: 2 / 3 / 3 / 4; }
          &:nth-of-type(12){ grid-area: 1 / 3 / 2 / 4; }
          &:nth-of-type(13){ grid-area: 1 / 4 / 2 / 5; }
          &:nth-of-type(14){ grid-area: 1 / 5 / 2 / 6; }
          &:nth-of-type(15){ grid-area: 2 / 4 / 3 / 5; }
          &:nth-of-type(16){ grid-area: 5 / 4 / 6 / 5; }
          &:nth-of-type(17){ grid-area: 5 / 5 / 6 / 6; }
          &:nth-of-type(18){ grid-area: 5 / 6 / 6 / 7; }
          &:nth-of-type(19){ grid-area: 5 / 7 / 6 / 8; }
          &:nth-of-type(20){ grid-area: 5 / 8 / 6 / 9; }
          &:nth-of-type(21){ grid-area: 7 / 9 / 8 / 10; }
          &:nth-of-type(22){ grid-area: 8 / 9 / 9 / 10; }
          &:nth-of-type(23){ grid-area: 6 / 9 / 7 / 10; }
          &:nth-of-type(24){ grid-area: 10 / 8 / 11 / 9; }
          &:nth-of-type(25){ grid-area: 10 / 7 / 11 / 8; }
          &:nth-of-type(26){ grid-area: 10 / 6 / 11 / 7; }
          &:nth-of-type(27){ grid-area: 9 / 5 / 10 / 6; }
          &:nth-of-type(28){ grid-area: 10 / 5 / 11 / 6; }
          &:nth-of-type(29){ grid-area: 10 / 4 / 11 / 5; }
          &:nth-of-type(30){ grid-area: 9 / 4 / 10 / 5; }
          &:nth-of-type(31){ grid-area: 9 / 3 / 10 / 4; }
          &:nth-of-type(32){ grid-area: 10 / 3 / 11 / 4; }
          &:nth-of-type(33){ grid-area: 3 / 4 / 4 / 5; }
          &:nth-of-type(34){ grid-area: 4 / 4 / 5 / 5; }
          &:nth-of-type(35){ grid-area: 9 / 9 / 10 / 10; }
          &:nth-of-type(36){ grid-area: 9 / 6 / 10 / 7; }
          &:nth-of-type(37){ grid-area: 9 / 7 / 10 / 8; }
          &:nth-of-type(38){ grid-area: 9 / 8 / 10 / 9; }
          &:nth-of-type(39){ grid-area: 2 / 9 / 3 / 10; }
          &:nth-of-type(40){ grid-area: 1 / 9 / 2 / 10; }
        }
      }
    &.number9{
      transform:rotate(180deg);
    }
    &.number6, &.number9{
      .cell{
        &:nth-of-type(1){ grid-area: 3 / 8 / 4 / 9; }
        &:nth-of-type(2){ grid-area: 2 / 8 / 3 / 9; }
        &:nth-of-type(3){ grid-area: 1 / 7 / 2 / 8; }
        &:nth-of-type(4){ grid-area: 1 / 6 / 2 / 7; }
        &:nth-of-type(5){ grid-area: 1 / 4 / 2 / 5; }
        &:nth-of-type(6){ grid-area: 1 / 5 / 2 / 6; }
        &:nth-of-type(7){ grid-area: 2 / 7 / 3 / 8; }
        &:nth-of-type(8){ grid-area: 2 / 6 / 3 / 7; }
        &:nth-of-type(9){ grid-area: 2 / 5 / 3 / 6; }
        &:nth-of-type(10){ grid-area: 2 / 4 / 3 / 5; }
        &:nth-of-type(11){ grid-area: 2 / 3 / 3 / 4; }
        &:nth-of-type(12){ grid-area: 1 / 3 / 2 / 4; }
        &:nth-of-type(13){ grid-area: 2 / 2 / 3 / 3; }
        &:nth-of-type(14){ grid-area: 3 / 2 / 4 / 3; }
        &:nth-of-type(15){ grid-area: 3 / 3 / 4 / 4; }
        &:nth-of-type(16){ grid-area: 4 / 3 / 5 / 4; }
        &:nth-of-type(17){ grid-area: 4 / 2 / 5 / 3; }
        &:nth-of-type(18){ grid-area: 5 / 2 / 6 / 3; }
        &:nth-of-type(19){ grid-area: 6 / 2 / 7 / 3; }
        &:nth-of-type(20){ grid-area: 5 / 3 / 6 / 4; }
        &:nth-of-type(21){ grid-area: 6 / 3 / 7 / 4; }
        &:nth-of-type(22){ grid-area: 7 / 2 / 8 / 3; }
        &:nth-of-type(23){ grid-area: 7 / 3 / 8 / 4; }
        &:nth-of-type(24){ grid-area: 8 / 2 / 9 / 3; }
        &:nth-of-type(25){ grid-area: 8 / 3 / 9 / 4; }
        &:nth-of-type(26){ grid-area: 9 / 3 / 10 / 4; }
        &:nth-of-type(27){ grid-area: 9 / 4 / 10 / 5; }
        &:nth-of-type(28){ grid-area: 10 / 4 / 11 / 5; }
        &:nth-of-type(29){ grid-area: 10 / 5 / 11 / 6; }
        &:nth-of-type(30){ grid-area: 10 / 6 / 11 / 7; }
        &:nth-of-type(31){ grid-area: 9 / 5 / 10 / 6; }
        &:nth-of-type(32){ grid-area: 9 / 6 / 10 / 7; }
        &:nth-of-type(33){ grid-area: 9 / 7 / 10 / 8; }
        &:nth-of-type(34){ grid-area: 8 / 8 / 9 / 9; }
        &:nth-of-type(35){ grid-area: 8 / 7 / 9 / 8; }
        &:nth-of-type(36){ grid-area: 7 / 8 / 8 / 9; }
        &:nth-of-type(37){ grid-area: 7 / 7 / 8 / 8; }
        &:nth-of-type(38){ grid-area: 6 / 8 / 7 / 9; }
        &:nth-of-type(39){ grid-area: 6 / 7 / 7 / 8; }
        &:nth-of-type(40){ grid-area: 5 / 7 / 6 / 8; }
        &:nth-of-type(41){ grid-area: 5 / 6 / 6 / 7; }
        &:nth-of-type(42){ grid-area: 6 / 6 / 7 / 7; }
        &:nth-of-type(43){ grid-area: 6 / 5 / 7 / 6; }
        &:nth-of-type(44){ grid-area: 5 / 5 / 6 / 6; }
        &:nth-of-type(45){ grid-area: 6 / 4 / 7 / 5; }
        &:nth-of-type(46){ grid-area: 5 / 4 / 6 / 5; }
        &:nth-of-type(47){ grid-area: 3 / 7 / 4 / 8; }
      }
    }
    &.number8{
      .cell{
        &:nth-of-type(1){ grid-area: 3 / 8 / 4 / 9; }
        &:nth-of-type(2){ grid-area: 2 / 8 / 3 / 9; }
        &:nth-of-type(3){ grid-area: 1 / 7 / 2 / 8; }
        &:nth-of-type(4){ grid-area: 1 / 6 / 2 / 7; }
        &:nth-of-type(5){ grid-area: 1 / 4 / 2 / 5; }
        &:nth-of-type(6){ grid-area: 1 / 5 / 2 / 6; }
        &:nth-of-type(7){ grid-area: 2 / 7 / 3 / 8; }
        &:nth-of-type(8){ grid-area: 2 / 6 / 3 / 7; }
        &:nth-of-type(9){ grid-area: 2 / 5 / 3 / 6; }
        &:nth-of-type(10){ grid-area: 2 / 4 / 3 / 5; }
        &:nth-of-type(11){ grid-area: 2 / 3 / 3 / 4; }
        &:nth-of-type(12){ grid-area: 1 / 3 / 2 / 4; }
        &:nth-of-type(13){ grid-area: 2 / 2 / 3 / 3; }
        &:nth-of-type(14){ grid-area: 3 / 2 / 4 / 3; }
        &:nth-of-type(15){ grid-area: 3 / 3 / 4 / 4; }
        &:nth-of-type(16){ grid-area: 4 / 3 / 5 / 4; }
        &:nth-of-type(17){ grid-area: 4 / 2 / 5 / 3; }
        &:nth-of-type(18){ grid-area: 6 / 2 / 7 / 3; }
        &:nth-of-type(19){ grid-area: 5 / 3 / 6 / 4; }
        &:nth-of-type(20){ grid-area: 6 / 3 / 7 / 4; }
        &:nth-of-type(21){ grid-area: 7 / 2 / 8 / 3; }
        &:nth-of-type(22){ grid-area: 7 / 3 / 8 / 4; }
        &:nth-of-type(23){ grid-area: 8 / 2 / 9 / 3; }
        &:nth-of-type(24){ grid-area: 8 / 3 / 9 / 4; }
        &:nth-of-type(25){ grid-area: 9 / 3 / 10 / 4; }
        &:nth-of-type(26){ grid-area: 9 / 4 / 10 / 5; }
        &:nth-of-type(27){ grid-area: 10 / 4 / 11 / 5; }
        &:nth-of-type(28){ grid-area: 10 / 5 / 11 / 6; }
        &:nth-of-type(29){ grid-area: 10 / 6 / 11 / 7; }
        &:nth-of-type(30){ grid-area: 9 / 5 / 10 / 6; }
        &:nth-of-type(31){ grid-area: 9 / 6 / 10 / 7; }
        &:nth-of-type(32){ grid-area: 9 / 7 / 10 / 8; }
        &:nth-of-type(33){ grid-area: 8 / 8 / 9 / 9; }
        &:nth-of-type(34){ grid-area: 8 / 7 / 9 / 8; }
        &:nth-of-type(35){ grid-area: 7 / 8 / 8 / 9; }
        &:nth-of-type(36){ grid-area: 7 / 7 / 8 / 8; }
        &:nth-of-type(37){ grid-area: 6 / 8 / 7 / 9; }
        &:nth-of-type(38){ grid-area: 6 / 7 / 7 / 8; }
        &:nth-of-type(39){ grid-area: 5 / 7 / 6 / 8; }
        &:nth-of-type(40){ grid-area: 5 / 6 / 6 / 7; }
        &:nth-of-type(41){ grid-area: 6 / 6 / 7 / 7; }
        &:nth-of-type(42){ grid-area: 6 / 5 / 7 / 6; }
        &:nth-of-type(43){ grid-area: 5 / 5 / 6 / 6; }
        &:nth-of-type(44){ grid-area: 6 / 4 / 7 / 5; }
        &:nth-of-type(45){ grid-area: 5 / 4 / 6 / 5; }
        &:nth-of-type(46){ grid-area: 3 / 7 / 4 / 8; }
        &:nth-of-type(47){ grid-area: 4 / 8 / 5 / 9; }
        &:nth-of-type(48){ grid-area: 4 / 7 / 5 / 8; }
        &:nth-of-type(49){ grid-area: 10 / 3 / 11 / 4; }
        &:nth-of-type(50){ grid-area: 10 / 7 / 11 / 8; }
      }
    }
    &.number7{
      .cell{
        &:nth-of-type(1){ grid-area: 2 / 8 / 3 / 9; }
        &:nth-of-type(2){ grid-area: 1 / 7 / 2 / 8; }
        &:nth-of-type(3){ grid-area: 1 / 6 / 2 / 7; }
        &:nth-of-type(4){ grid-area: 1 / 4 / 2 / 5; }
        &:nth-of-type(5){ grid-area: 1 / 5 / 2 / 6; }
        &:nth-of-type(6){ grid-area: 2 / 7 / 3 / 8; }
        &:nth-of-type(7){ grid-area: 2 / 6 / 3 / 7; }
        &:nth-of-type(8){ grid-area: 2 / 5 / 3 / 6; }
        &:nth-of-type(9){ grid-area: 2 / 4 / 3 / 5; }
        &:nth-of-type(10){ grid-area: 2 / 3 / 3 / 4; }
        &:nth-of-type(11){ grid-area: 1 / 3 / 2 / 4; }
        &:nth-of-type(12){ grid-area: 2 / 2 / 3 / 3; }
        &:nth-of-type(13){ grid-area: 1 / 8 / 2 / 9; }
        &:nth-of-type(14){ grid-area: 1 / 2 / 2 / 3; }
        &:nth-of-type(15){ grid-area: 3 / 8 / 4 / 9; }
        &:nth-of-type(16){ grid-area: 3 / 7 / 4 / 8; }
        &:nth-of-type(17){ grid-area: 4 / 8 / 5 / 9; }
        &:nth-of-type(18){ grid-area: 4 / 7 / 5 / 8; }
        &:nth-of-type(19){ grid-area: 5 / 7 / 6 / 8; }
        &:nth-of-type(20){ grid-area: 6 / 7 / 7 / 8; }
        &:nth-of-type(21){ grid-area: 6 / 6 / 7 / 7; }
        &:nth-of-type(22){ grid-area: 5 / 6 / 6 / 7; }
        &:nth-of-type(23){ grid-area: 7 / 6 / 8 / 7; }
        &:nth-of-type(24){ grid-area: 8 / 6 / 9 / 7; }
        &:nth-of-type(25){ grid-area: 9 / 5 / 10 / 6; }
        &:nth-of-type(26){ grid-area: 8 / 5 / 9 / 6; }
        &:nth-of-type(27){ grid-area: 10 / 5 / 11 / 6; }
        &:nth-of-type(28){ grid-area: 10 / 4 / 11 / 5; }
        &:nth-of-type(29){ grid-area: 9 / 4 / 10 / 5; }
        &:nth-of-type(30){ grid-area: 7 / 5 / 8 / 6; }
      }
    }
    &.number8{
      transform:rotate(180deg);
    }
    .cell{
      box-shadow:inset 0 0 0 1px var(--color1);
      position:relative;
      transform:rotate(var(--angle));
      &:before{
        content:'';
        position:absolute;
        display:block;
        width:100%;
        height:100%;
        left:0;
        top:0;
        opacity:1;
      }
    &.class1{
      &:before{
        box-shadow:inset 0 0 0 1px var(--color2);
        background:linear-gradient(45deg, var(--bg), var(--bg) calc(50% - 1px), var(--color1) calc(50% - 1px), var(--color1) calc(50% + 1px), var(--bg) calc(50% + 1px));
      }
    }

    &.class2{
      &:before{
        box-shadow:inset 0 0 0 1px var(--color2);
        background:linear-gradient(45deg, $t, $t calc(50% - 1px), var(--color1) calc(50% - 1px), var(--color1) calc(50% + 1px), $t calc(50% + 1px)), linear-gradient(-45deg, var(--bg), var(--bg) calc(50% - 1px), var(--color1) calc(50% - 1px), var(--color1) calc(50% + 1px), var(--bg) calc(50% + 1px));
      }
    }
    &.class3{
      &:before{
        box-shadow:inset 0 0 0 1px var(--color2);
        background:var(--bg);
      }
    }
    &.class4{
      &:before{
        box-shadow:inset 0 0 0 1px var(--color2);
        background:linear-gradient(90deg, $t, $t calc(75% - 1px), var(--color1) calc(75% - 1px), var(--color1) calc(75% + 0px), $t calc(75% + 0px)), repeating-linear-gradient(90deg, var(--bg), var(--bg) calc(12.5% - 1px), var(--color2) calc(12.5% - 1px), var(--color2) 12.5%, var(--bg) 12.5%), var(--bg);
      }
    }
    &.class5{
      &:before{
        box-shadow:inset 0 0 0 1px var(--color2);
        background:repeating-linear-gradient(-45deg, $t, $t calc(25% - 2px), var(--color2) calc(25% - 2px), var(--color2) calc(25% + 0px), $t calc(25% + 0px), $t calc(75% - 2px), var(--color2) calc(75% - 2px), var(--color2) 75%, $t 75%), repeating-linear-gradient(45deg, var(--bg), var(--bg) calc(25% - 2px), var(--color2) calc(25% - 2px), var(--color2) calc(25% + 0px), var(--bg) calc(25% + 0px), var(--bg) calc(75% - 2px), var(--color1) calc(75% - 2px), var(--color1) 75%, var(--bg) 75%), var(--bg);
      }
    }
    &.class6{
      &:before{
        box-shadow:none;
        background:linear-gradient(to bottom, var(--color1) 2px, $t 2px), linear-gradient(to left, var(--color1) 2px, $t 2px), linear-gradient(45deg, $t, $t calc(50% - 1px), var(--color1) calc(50% - 1px), var(--color1) calc(50% + 1px), var(--bg) calc(50% + 1px));
      }
    }
    &.class7{
      &:before{
        box-shadow:inset 1px 0 0 0 var(--color1), inset 0 0 0 1px var(--color2);
        background:repeating-linear-gradient(-45deg, $t, $t calc(25% - 2px), var(--color1) calc(25% - 2px), var(--color1) calc(25% + 0px), $t calc(25% + 0px), $t calc(75% - 2px), var(--color2) calc(75% - 2px), var(--color2) 75%, $t 75%), repeating-linear-gradient(45deg, var(--bg), var(--bg) calc(25% - 2px), var(--color2) calc(25% - 2px), var(--color2) calc(25% + 0px), var(--bg) calc(25% + 0px), var(--bg) calc(75% - 2px), var(--color1) calc(75% - 2px), var(--color1) 75%, var(--bg) 75%), var(--bg);
      }
    }
    &.class8{
      &:before{
        box-shadow:none;
        background:linear-gradient(to bottom, var(--color1) 2px, $t 2px), linear-gradient(to left, var(--color1) 2px, $t 2px), linear-gradient(45deg, $t, $t calc(50% - 1px), var(--color1) calc(50% - 1px), var(--color1) calc(50% + 1px), var(--bg) calc(50% + 1px));
      }
    }
    &.class9{
      &:before{
        box-shadow:none;
        background:linear-gradient(to bottom, var(--color1) 2px, $t 2px), linear-gradient(to left, var(--color1) 2px, $t 2px), linear-gradient(45deg, $t, $t calc(50% - 1px), var(--color1) calc(50% - 1px), var(--color1) calc(50% + 1px), var(--bg) calc(50% + 1px));
        transform:rotate(var(--angle));
      }
    }
   &.class10{
      &:before{
        box-shadow:inset 0 0 0 1px var(--color2);
        background:linear-gradient(45deg, $t, $t calc(75% - 1px), var(--color1) calc(75% - 1px), var(--color1) calc(75% + 0px), $t calc(75% + 0px)), repeating-linear-gradient(45deg, var(--bg), var(--bg) calc(12.5% - 1px), var(--color2) calc(12.5% - 1px), var(--color2) 12.5%, var(--bg) 12.5%), var(--bg);
      }
    } 
   }
  }
}
            
          
!

JS

            
              var colors = [
  "#3079e2",
  "#afa899",
  "#ccd8eb",
  "#aff4c6",
  "#3079e2",
  "#afa899",
  "#ccd8eb",
  "#3079e2",
  "#afa899",
  "#ccd8eb"
];

function draw() {
  $("#wrap").addClass("loading");
  setTimeout(function() {
    for (var i = 0; i < 10; i++) {
      $(".cell").removeClass("class" + i);
    }
    $("#wrap .cell").each(function() {
      $(this).addClass(
        "class" + (Math.floor(Math.random() * (11 - 1 + 1)) + 1)
      );
    });
    $(".cell").each(function() {
      $(this)
        .get(0)
        .style.setProperty(
          "--color1",
          colors[Math.floor(Math.random() * colors.length)]
        );

      $(this)
        .get(0)
        .style.setProperty(
          "--color2",
          colors[Math.floor(Math.random() * colors.length)]
        );

      $(this)
        .get(0)
        .style.setProperty(
          "--angle",
          Math.floor(Math.random() * 6) * 90 + "deg"
        );
    });
  }, 0);
  setTimeout(function() {
    $("#wrap").removeClass("loading");
  }, 500);
}

$(".numberinput").submit(function(event) {
  event.preventDefault();
  var text = $(".number").val();
  var totalChars = text.length;
  var text_as_array = text.split("");
  var Number1 = text_as_array[0];
  var Number2 = text_as_array[1];
  var Number3 = text_as_array[2];
  if (totalChars == 3) {
    $(".firstnumber").addClass("number" + Number1);
    $(".secondnumber").addClass("number" + Number2);
    $(".thirdnumber").addClass("number" + Number3);
  }
  if (totalChars == 2) {
    $(".firstnumber").addClass("number" + Number1);
    $(".secondnumber").addClass("number" + Number2);
    $(".thirdnumber").addClass("drawout");
    $("body").addClass("two");
  }
  if (totalChars == 1) {
    $(".secondnumber").addClass("number" + Number1);
    $(".firstnumber", ".thirdnumber").addClass("drawout");
  }
  $("body").addClass("active");
  draw();
});

$(".reset").click(function() {
  for (var i = 0; i < 10; i++) {
    $(".number").removeClass("number" + i);
  }
  $("body").removeClass("active");
  $("body").removeClass("two");
  $(".number").removeClass("drawout");
  $(".number")
    .val("")
    .focus();
});

$(document).ready(function() {
  $(".number").focus();
});



            
          
!
999px

Console