Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ 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

Auto Save

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

              
                mixin block
  .block(class!=attributes.class)
    .right
    .left
    .top
    .bottom
    .front
    .back

.scene
  .portal
    .hexes
      - for (let i = 0; i < 50; i++)
        .hex
          - for (let j = 0; j < 6; j++)
            .hex-fringe
    .traps
      - for (let i = 0; i < 10; i++)
        .trap
          - for (let j = 0; j < 6; j++)
            .trap-fringe
    .exit
  .enter
    +block(class="ground")
    +block(class="floor")
    +block(class="step-1")
    +block(class="step-2")
    +block(class="step-3")
    +block(class="step-4")
    +block(class="step-5")
    +block(class="p-11")
    +block(class="p-12")
    +block(class="p-13")
    +block(class="p-14")
    +block(class="p-15")
    +block(class="p-16")
    +block(class="p-21")
    +block(class="p-22")
    +block(class="p-23")
    +block(class="p-24")
    +block(class="p-25")
    +block(class="p-26")
    +block(class="l-11")
    +block(class="l-12")
    +block(class="l-21")
    +block(class="l-22")
              
            
!

CSS

              
                $bgColor: #242635;
$fringeColor: #444444;
$triggerColor: #FFAE5C;
$string: 'ABaCDbEFcGHdIJeKLfMNgOPhQRiSTjUVkWXlYZmABaCDbEFcGHdIJeKLfMNgOPhQRiSTjUVkWXlYZm';

$portalBlockW: 5vmin;
$portalBlockH: 4vmin;

$count: 50;
$trCount: $count / 5;
$c: 1;

$floorColor: #4E6070;
$lightColor: #FBFFF5;
$groundColor: #4E505F;
$staticBlocks: 
  ('floor', 30, 40, 1, -15, 26, -20, $floorColor),
  ('ground', 60, 60, 1, -30, 32, -15, $groundColor),
  ('step-1', 30, 2, 1, -15, 27, 20, $floorColor),
  ('step-2', 30, 2, 1, -15, 28, 22, $floorColor),
  ('step-3', 30, 2, 1, -15, 29, 24, $floorColor),
  ('step-4', 30, 2, 1, -15, 30, 26, $floorColor),
  ('step-5', 30, 2, 1, -15, 31, 28, $floorColor),
  ('p-11', 1, 40, 1, -16, 20, -20, $floorColor),
  ('p-12', 1, 40, 1, -16, 23, -20, $floorColor),
  ('p-13', 1, 1, 7, -16, 20, -20, $floorColor),
  ('p-14', 1, 1, 12, -16, 20, 0, $floorColor),
  ('p-15', 1, 1, 12, -16, 20, 19, $floorColor),
  ('p-16', 1, 1, 12, -16, 20, -13, $floorColor),
  ('p-21', 1, 40, 1, 15, 20, -20, $floorColor),
  ('p-22', 1, 40, 1, 15, 23, -20, $floorColor),
  ('p-23', 1, 1, 7, 15, 20, -20, $floorColor),
  ('p-24', 1, 1, 12, 15, 20, 0, $floorColor),
  ('p-25', 1, 1, 12, 15, 20, 19, $floorColor),
  ('p-26', 1, 1, 12, 15, 20, -13, $floorColor),
  ('l-11', 1, 19, 1.5, -15.5, 20.5, -19, $lightColor),
  ('l-12', 1, 18, 1.5, -15.5, 20.5, 1, $lightColor),
  ('l-21', 1, 19, 1.5, 14.5, 20.5, -19, $lightColor),
  ('l-22', 1, 18, 1.5, 14.5, 20.5, 1, $lightColor);

@function sqrt($r) {
  $x0: 1;
  $x1: $x0; 
  @for $i from 1 through 10 {
    $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
    $x0: $x1;
  } 
  @return $x1;
}

@mixin ba {
  position: absolute;
  top: 0; 
  left: 0;
  width: 0;
  height: 0;
}

@mixin fringe($w, $h, $color) {
	transform-style: preserve-3d;
  display: block;
  width: $w;
  height: $h;
  background-color: $color;
  border: 1px solid rgba(0,0,0,0.02);
  position: absolute;
  box-sizing: border-box;
  will-change: transform;
}

@mixin front($w, $h, $d, $color) {
  @include fringe($w, $h, $color);
  transform-origin: top center;
  transform: translate3d(0, $d, $h) rotatex(-90deg);
}

@mixin back($w, $h, $d, $color) {
  @include fringe($w, $h, $color);
  transform-origin: top center;
  transform: translate3d(0, 0, 0) rotatex(90deg);
}

@mixin right($w, $h, $d, $color) {
  @include fringe($d, $h, $color);
  transform-origin: top left;
  transform: translate3d($w, 0, 0) rotatex(90deg) rotatey(90deg);
}

@mixin left($w, $h, $d, $color) {
  @include fringe($d, $h, $color);
  transform-origin: top left;
  transform: translate3d(0, 0, 0) rotatex(90deg) rotatey(90deg);
}

@mixin top($w, $h, $d, $color) {
  @include fringe($w, $d, $color);
  transform: translate3d(0, 0, $h);
}

@mixin bottom($w, $h, $d, $color) {
  @include fringe($w, $d, $color);
  transform: translate3d(0, 0, 0);
}

@mixin block($w, $h, $d, $x, $y, $z, $color, $angle: '0, 0, 0, 0') {
  transform: translate3d($x, $y, $z) rotate3d(#{$angle});
  will-change: transform;
  .front { @include front($w, $h, $d, $color); }
  .back { @include back($w, $h, $d, $color); }
  .right { @include right($w, $h, $d, darken($color, 10%)); }
  .left { @include left($w, $h, $d, darken($color, 10%)); }
  .top { @include top($w, $h, $d, darken($color, 5%)); }
  .bottom { @include bottom($w, $h, $d, darken($color, 5%)); }
}

@for $m from 1 through length($staticBlocks) {
	.#{nth(nth($staticBlocks, $m), 1)} {
    $w: nth(nth($staticBlocks, $m), 2) * $c;
    $h: nth(nth($staticBlocks, $m), 3) * $c;
    $d: nth(nth($staticBlocks, $m), 4) * $c;
    $x: nth(nth($staticBlocks, $m), 5) * $c;
    $y: nth(nth($staticBlocks, $m), 6) * $c;
    $z: nth(nth($staticBlocks, $m), 7) * $c;
    $color: nth(nth($staticBlocks, $m), 8);
    @include block(#{$w}vmin, #{$h}vmin, #{$d}vmin, #{$x}vmin, #{$y}vmin, #{$z}vmin, $color);
  }
}

:root {
	--x: 0deg;
	--y: 0deg;
}

*,
*::before,
*::after {
  will-change: transform;
  transform-style: preserve-3d;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  padding: 0;
  overflow: hidden;
  background-color: $bgColor;
  perspective: 100vmin;
  
  &::before {
    content: 'Move your cursor to change the point of view.';
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 12px;
    position: absolute;
    left: 10px;
    top: 10px;
    opacity: 0.3;
    color: white;
  }
}

.scene {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translatey(-7vmin) rotatex(calc(var(--x) * 1deg)) rotatey(calc(var(--y) * 1deg));
  transform-style: preserve-3d;
  will-change: transform;
}

.traps {
  @include ba;  
}
.trap {
  @include ba;
  
  @for $k from 1 through $trCount {
    &:nth-child(#{$k}) {
      transform: rotatey(90deg) rotatex(#{360 / $trCount * $k + 180 / $trCount}deg) translatez(#{sqrt(3) * $portalBlockH * 5}) rotatez(90deg);
    }
  }
}

.trap-fringe {
  @include ba;
  width: $portalBlockW;
  height: $portalBlockH;
  box-sizing: padding-box;
  
  @for $j from 1 through 6 {
    &:nth-child(#{$j}) {
      transform: rotatex(#{60 * $j}deg) translate3d(-$portalBlockW/2, 0, #{sqrt(3) / 2 * $portalBlockH + 0.25});
      display: none;
    }
  }
  &:nth-child(6) {
    display: block;
    background: $triggerColor;
    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: $fringeColor;
      transform: scalex(1.2) translatez(-0.1vmin);
    }
  }
  &:nth-child(5) {
    display: block;
    border-top: $portalBlockH solid $triggerColor;
    border-left: $portalBlockW/3 solid transparent;
    border-right: $portalBlockW/3 solid transparent;
  }
  &:nth-child(1) {
    display: block;
    border-bottom: $portalBlockH solid $triggerColor;
    border-left: $portalBlockW/3 solid transparent;
    border-right: $portalBlockW/3 solid transparent;
  }
}

.hexes {
  @include ba;
  animation: rotation 20s infinite linear;
}

@keyframes rotation {
  from { transform: rotatez(0); }
  to { transform: rotatez(1turn); }
}
.hex {
  @include ba;
  @for $j from 1 through $count {
    &:nth-child(#{$j}) {
      transform: rotatey(90deg) rotatex(#{360 / $count * $j}deg) translatez(#{sqrt(3) / 2 * $portalBlockH * 10}) rotatez(90deg);
      
      .hex-fringe::before {
        content: str-slice($string, $j, $j);
      }
    }
  }
}

.hex-fringe {
  @include ba;
  background: $fringeColor;
  width: $portalBlockW;
  height: $portalBlockH;
  font-family: 'Stargate SG-1 Address Glyphs';
  
  @for $j from 1 through 6 {
    &:nth-child(#{$j}) {
      transform: rotatex(#{60 * $j}deg) translate3d(-$portalBlockW/2, 0, #{sqrt(3) / 2 * $portalBlockH});
      background: lighten($fringeColor, $j * 5%);
      border: 1px solid lighten($fringeColor, $j * 5%);
    }
  }
  &::before {
    display: none;
  }
  &:nth-child(2),
  &:nth-child(4) {
    &::before {
      display: block;
      height: 100%;
      line-height: $portalBlockH;
      color: darken($fringeColor, 10%);
      font-size: $portalBlockH / 1.5;
      text-align: center;
    }
  }
  &:nth-child(2),
  &:nth-child(5) {    
    border-bottom: 3px solid darken($fringeColor, 10%);
  }
  &:nth-child(1),
  &:nth-child(4) {    
    border-top: 3px solid darken($fringeColor, 10%);
  }
}

.enter {
  @include ba;
  
}

.portal {
  @include ba;
  transform: translatez(-25vmin);
}

.ground .back {
  $yellow: #dcdd20;
  border: 1vmin solid transparent;
  background:
    linear-gradient($groundColor, $groundColor) padding-box,
    repeating-linear-gradient(45deg, 
      $yellow 0, $yellow 12.5%, 
      $groundColor 0, $groundColor 25%, 
      $yellow 0, $yellow 37.5%, 
      $groundColor 0, $groundColor 50%) 
    0 / 5vmin 5vmin;
}

.exit {
  @include ba;
  background: #252A68;
  width: #{sqrt(3) / 2 * $portalBlockH * 20};
  height: #{sqrt(3) / 2 * $portalBlockH * 20};
  transform: translate3d(-50%, -50%, $portalBlockW/2);
  border-radius: 50%;
  overflow: hidden;
  
  &::before {
    @include ba;
    content: '';
    box-shadow: inset 0 0 50vmin 5vmin #5E78A4;
    transform-style: preserve-3d;
    background: 
      linear-gradient(rgba(#000, 0.3), rgba(#fff,0.3)),
      linear-gradient(calc((180 + 0.08 * var(--y)) * 1deg), #4B264F 0, #4B264F calc((35 + var(--x)) * 2%), #3C130D calc((35 + var(--x)) * 2% + 0.1%));
    width: 100%;
    height: 100%;
  }
}

@font-face {
  font-family: 'Stargate SG-1 Address Glyphs';
  src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAACLoABAAAAAAM0gAACKKAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GVgCCeghoCWQRCArRRMNdC4ESAAE2AiQDgiAEIAWFfQeBMgyBLRuwKrMRFWwcAPQI74Hsv0qghxh8KccmGDuRtQQbi6yk2FzI38j6zfmWiEOL861aHTjN/Eia4Cvx8HA/3nPjR+SKN44osNFmWSCRAgNrkhGO3/Cwzf4hkRIitIKiM7FwguKUKgUBxUZFJ0Zio3Oty75V3NLN29yd++eiXbSLaG9zO2/fH2rubabHye4tMpJkIj4TgUwSIgYRPqJPvlSA1mlXrMLaub1iUsMr7gs/q3I4ajIgNPQ/QBzOwzVdbWsDd8k3P0i4QORp2gEbz/83V9pkUzGZEmULPAdule2rkDVmlv8sXVJOUpiWs8VsacrwPDo2MoeQFBAUgbAV0lfV2FpRIWQf5gyIsDkzqSft3J47f10YUfTve1CNob/vPV5sPzikS2TTJK9WTgABEKDOwgIScEHfxUJwveaRnA34OuBxSkw8TNuTQ0abeN24lWoEElxtVYazFK5QfVMCUL4ovx2Rn2Uhti8MZJqLiOjHA/gJEC5CvGTZ2oax5PzeuhzVR6rgVxp75om77rjtumsuBgEyJxBi1fA4aKZqABQsP6IWjQIkuE3i+YWtLCIvU6i0F6ha/fx5AYHjgoJDQsPC8Z/8wUORUdExgtjxcUJRfII4cUJSskQqkyuUKjWQb79IeSXlGZS9+SVzckGFAjkpH5PBA4+xYkF2DC+aMmgNMA7rPfWLgqFEmDhl9kZeVAXZHil4HJaYgSIWGvzpDJkmG2Sin4bDu1L4CyW3Bxp4gVfopPOcBQp+eDCha+RyD48dndd+CSTusNZ7JBp6dCyGNl2QnotNXHWhoqrQyc3UxQOiHo/A1HruirL4AIixsSOoXJa/SR/RzBe8eCd5XrMTdo/FaeABYKYPAnikA3G7vc172ITKA2VjAFSBRBSmCx8eYiFXAUubgEIYDJXlZAKDMI6jmEDGEBGS+IhYhLwBOhEvgI2je6GQ5pSkEHEIEebDZuC5vmxq+DhZQroODfVhRAVHhuLQaKgXnsOmEpFIDp1FRkD9fdhUJhLjw1QDPqZ5PwqNhILjMAgYHEbzIuHxI45DoWBOHE/1ZeQBBN0IDIskIMxwPMx56f9whrIJj1Uem0DsCNbBJl6b0XkiDEPTnuTcQVIcK8t4s2na5SOwoYeqPsFOHgYTgynomrrKnhDRHl2FczwHRXE4jgMq6+2qhDM4kXLUUyf1VjZfEna7GXvMn8WUxzH+TrGhGUNPHl18lXt85t/Zfqj34Nw8Gj2zXQSfIJyB3NigigqARwRsW2pTeB9WLpf2bLKBoyRXcMOY52NCwHyiJtLTWBWJVEI9EZrGOnfyHbr/QthGRDecPQWP4+P08epKENZhg0rSltT2lAoklXqCSXfbbjdl8HjO3fcXX03qVeeucrnSmrGVWNQfKSwODIzFHkdlAx2yvJ6tAwjrDfjI7Qjvc5PPmzXh1TR9K8/ud6MFR8QohkksHodf8Qs2ckB6xFnuyii4J/UeT3KhkEqdzLYhNkatvDTIfxC5yuea6zTNSoAUG/+wAPakpiqxI5CFXLttHLpJo9wafZp0x4plxQZWxvWSl7dBrkNYhH1z4cJKd5moK0xEEqWI00kfkd3utkNmA/OlNafr2V5P07ZMTc7+fpcRNcqn7uJmBM/iL/ejmqbvFQ56L/Sq4X0jy75HR6vMccn/IX5cVfrrUwcI8h7qnDiZvRFrtZnaebKK00X/K7FGT0TSztwZaJhHcFQxK6FHO1a8Wh3/PKdpV9XeEPOT8lQatZPZeTyWiQGYT52UnfLESTyw0cJp3Ug/Wc+mn7zX7lY2UN6+PnPn8/RMyy671zMwooe0cTicC+9vV3DnhNjowaxXKLwRyUjBGfqWpDuin/K0K59/YYdHXl4HnwzbsHNWPA/hMVrWlnz4Vt0EQa32Olfzj/oglT4bGF6Saz9v1vLCp4nS3dhVvw7ZQ7FY6FH9ejhNh65cfqK2g2PgXGXlL8tzG+HYvA97SlRVSXquc17YgVrt3wAAlmlmMk9VNhD7ng5lozx5+h91HZrcefsJ8WQutSxohZb91NFAFMWeyl1+sW8YpzKff8F+nlv3MQhZ8Jy+xuEyjFfTr1wZwocvlszlar5Tjh9kqktTqX56QvFOmtdlLhyVDTOAq+Taykm0AYhBtYjM5cn4eTw81AZupOu/Uu8Kn3ydlBJYDIWOJpXXPFGncwSrX5FIKXIQ7QCVzBO1LpfLk5M2G2IbtyHXfr/NvCV/6EAXOT1oJyffNDFCaJ+KDe/ezh48ZcxYbOCjVkA0jHok3+kQ+n958sEyt9ls+4q6hUK5XH+zrmd1XeOosFMGfDxpQda9astvQJI6nQ/y47l2zubx+wcGfCn1y2igGuwD6fYcPrfT2MXinki122PCQ1frBoYgTYcgX8pefrdpyrGGvzf+OZ6BJAg2vLZoj3vkVUmNoKL4z0F+a9gekt7Liz0WVQgnDljEW3LWjbTxd3tMlk0Zeq+X0AMCUuZOJrYx2bfRk6Tn0lB6aQxgYM6yr5swzu9zjYNGucw2QikG4AZOJDI2MTnJ2TkAZO5SpgV3S+3y/6vxJgrCsMV7umGajYa5TAvMIisNaCQ9HlS4W0jQdQ5ZYLlRhnr6+w0jzepVEldniWswcRJRLREaxzFFR3xaihDWMdnXB2b/PuRV9ELB7ctwqQVAtMUx0JP1XQWCBYam9dKCwHzIRXh3BmlwMQMypNT+fpW1VQKwTDGuKIhJt2+duqKFbnSNqf3pNGez7XaujStc57Wi1cpTh+4n2G4ju90TB97bnQHTbWaw1eJBQm2CIVmhr7nC0xzsT4oD3eBzA7h9vg3XjRYK3UL/7kQZ94WXNjVYFrTgrBXS9SDrms5GfY1FOvk8NgAt7nbZMxqd9PspBBBqtZwpMmhA0DKtEzww7wb3uoty9NAmEqWJgzMEg0swPJy3KeRqFcenpzGOPMOidIlok7gVxGsAmkAzEzO1WonnEqiMXqPRURgAGLZPx911x7jB+5IaHlglPhITCYokEjMzLLDkAm4GX1lExAsYNiYnSfCq/c8oopRUeCL6kgpGKIqnr08QBrTESIn8cVBndpUnQfaBz+0Gxa8oNjC8quH9FKCyEfHkMgRB6x5JMqo7BFE0FtFvVhqxBmcR++TC3shAlokQ/TSK00Ppslgq5UsRjA2YTgjM+ufDRO222RBQ8RNCvQp1vhqvd3F4AJZpvDguVKYqEE8q8Tgb9dlZkQKURkexAALCimEvebN6FSpjul43qOZrZgakPGHRNorT1WI1nnvNexMov0erABk/DjMFgtktDSMjsTFAoTE1ZSYSBZ41xFIpwaOjS4oH7ABWyLKHQpaVz0cipmk6bE2UY7EGQLzaDHM9rQ25uFtgznY5raWzFPIBQKsFtURChRmFaLStjxb01RV01odEwooMPrsFYA89d2iBHK/Gm9yFKy5wEdxyq5UBsFpSzFwH02y4ZwpDacMYEhM1LUiGkTtndqGfLrPmvWe5xGuMVgm2+G7A7m6pUjzZbCa5nxrglggrkAHAYYDB1KANcJYrB5bMqaaAWjIpUY3alrYsgCrO2hAiXCrNpPq9VFOgIIqBUg0Fy+8JHjar2GF3hyrE0RhZbew/ZOD18a4Z9RuWaVOR3VX0aTc6cHra5o2/Pi8ZhkaEHo/TSWpaVYmCKS+tasR45gQUTD/abKI3EGPnwrHTJxjNkJdSeoBSnEpFo4tw0XGjthBINaj0BWDAaE0s0qAzdAmu3A04WsAoceVRjUJoQdhPZW5RXwS7AOCDapu1CS/DBn5EcKB22VuMACBSJ0g4A6DBXp6ilU+IwSAbjBF3950DkYx++sI9dBH1KOuU0H0OiGeJEs3tkfem3gImUqKeS7E7ASgE6JhlhYrYfO5CMEg04boRNYpgZ86HmiyPkF4DPN+KV2/zdyfvBqARO9ibqMxPR9l5YIDdpeidhJE5kNGBNqgt0CAjcx2FMIuEY+INZ77z6tAFC0cx6mKk8PtdjaqzZywqlQhe6WGCwdlEvdnSvxMnQYiGVbXspHX/RidwZdovVITxyVG2abokwbAoioi7goj676oA+JJWgEaMCxeiLDpB5dH6nYiodGjEjoKD2SZLMFAp1UWqReftdqfT5fJFNVGNhOxC+NaKBSHFzyxAiRoYRo+nXE6ozGwYNOcZMhbIQhxDiptZef+Eblim8xfX3Y1rbOHKpr64sMpvXKM3r5C5I3llCdYNTl+SFg4AV+hdALBMbQ8U+om37LcuE62em+1L3wb0SFneKn6H5m2XqTO0iAACsnbzSqqPcll0Ai0EnRL65nFUGICBsVsyJo1yAJSbo6zeErm5Yd7CNwwDpm3YZCIJc7EESWZH50t2dIkRECYmMR4fmqjGEsa4XUFHvW4k435EF9ucFnhTiUhcSSa7XSGSp0AtMTwVUPkG/NslRiQg4fZ5vDSNyv4m4LcL/XjlL5f8fptBNcspBGx4vCmRncf3Ovi8fhiwJZcgzPPNKEdggXB+FGoLwDcLGJ50UQRjZJwZzQAv/fkiyBilf92IRjwngIEWNe9MpTI19VYMibXf3ciLU5CnCChV5EuwwnmNDV6uz173ULnHdH3Efd3z5miwK653gnyp2aLLQIzIQ7yIAszXN7MNMcwqkchOCUFAnAqQBD6tsEg3g5OiCEMdXHD84GGwCzwnYrhHuKQjmUcmMHqhzAy/+fPih/vExoYD2zwFKhTl5LEnRFFArJXLnoZdj/0QmnTs+845vdnZdZ3zdMx4XUzlAdRpIhGniSUqcFHDw4vKwpwzRJKtm88ODzzavDh4+vioZbG1k3BOVohOtHwn/9Vw8wDbS10YLRfqBjHeBbwShTli7vWXgrDXsuY7rp+7tj+5BB1vW39633/h7ERTpFyoTnlBs1g4A0L9yviAKb6KDLzKNvA6FjGETLfBJMHic2jMQpD2BGJntWBiUk+PRCvyZjvkZL3XoEryDCcwqga/75/vHl3GwK2ej/+6J936eep7LbLC7Gfm5g/tx8f8FWX9KFqZ3MvaNt3FyxmJnmNe5GWEjqtDKmDWAIENqoc6oGf9spiy+Ie2kRnz/UiJoQoC/1tnaMym4wQ2dNvGf38IBC1tRJw3jogzsd1u4WiQemwz3Y6OkPrM0nhJIu+c3D2w6jjmpw9EXcCmBALnD3Hlx5eiaX/8+Rad257wN7ll18z+qX4MRej007SsbzvzWj3h0diS0akb3CGfzqBHRuf6x3cwPj0M1ob4Knp7grQJex+52nNJK7rynQq+bDw8T+ZouPFZTbu375X+YltH1lmMAJGpScoMuzPYfRHpHUUMj0kYI+KCIQ61pN7zgak0YXe0+e7utih+ROYfjEWMQyOTu1u7jzQVfqvMmU+blnnar0oZr24RJrgHEtr3URdC2ve657axrvIqbx10yddbIjTa4WRf03wcplryv7W9r2VRTqxCn5ehQ1dtWNo34jt13rnk7KCsAHdK7eTnd8+ZHAXzAvtakFtbG5YqA8Qvf9Wallfk5wkB6zpkwOPI9VXD4wM/ElrubIkH+p3dsX4XSa0gbZzhy5jWYMV6RcaR9MarzTL1ZtKMzc08RTAXdRM7vYVveRGCjtrf8zvgJ2Hh0nWsdF64Kkj+13PMt0RKRTpHnxU2zApThUiOHOWYFizhcv940Yl79dJ3R6RLPuOqYCfX0AoSxgQRE3KXHiboPzWddZDrCg2XT1zavPme8h4Dse77zKytr9Apnc2iODFCt3iLlfDvrda9aL2483RiV7JYFimKi20OGjw/JwF1z7MqkT83tyZvlhgrL/Rbg5UL5xbliL40qfLiMqYLc3INr691XVSQfwz0zJi96rf+ZYIZxXfQyK9ahWyRcMDV3N/isX8n6wzm6tf58zCeg9evLggvi4876nNgaWrMzti/+7aU6lYdPx9XJL3ZiubgyMzIo9PzmUS4pywK8E58zIYZPbTQYxDj/z5MI134mDxruyt5oFc8tmxTfC/pVpmV5Jc8RptC8d+khC6Wvvh4uqs8StQN2uA2RKwFuVTB/bTvRXBZy/JQ9ZMWUh5quFcCe/b16OhwnyuxafyWxi/1Zo5t8pHYBaLyo3/n5cLEBzTQKWF28CU0I0EtE7omwnJhvYcObACSjV+diTpVigohgyfJNqXDlZAiaK7HWnVkrzpSEVqCjTcmpfIK1pStnnF9SsbUfNuyE/7DA8NiZkCbkj4jwTRQINRXn3sL09Pnf5BAZTAeLOT4v2Up2F2sqoJDOsFC+2fl1k1NuaIHboGAiFN5yD2OyaDf52+GeS/VpqutKTkAdsTwaFy77cxTe3RHzCwKxVpy7EL5A8pa031Z5IkpWIy5CRc6E8S/8qjOpTXS9/RvOkv9CIkvdvz8XOQQqKDiLGK+l/YZPZO5gZg7HjRQXXFlhmmfdkI7noIds42oXEqs7ILVMWFCDQhf+3x9oljo7hzgShb+A5+2jAz1K2seXO/OOq84/Pbyo0dh/KNRnh8aMOQlRcekgQsi4SouXDtQLBNrKP45Kso/7zbHhAzd7Gury4qekA9i9/T2Dgtdw2rS5RyoynvJAMw/KgKHwxFxbBwuYPPSaJ+txHWLjHIROpXYB7WQk0wDBekn7v9afG0jxWTivsKQt+DgExt7rwH8XYYwcBMzFJm1SWflrPU9/bbrj8X//Z8ePqf/NCSaY637uGAszFnT733uFTc8wgvNiAVRfmuL02KkwT/qxqPvvPuwvZSRoIPPmU9K3VGb+V++qK6jX7RKOuyUGKO7Ceq/j4YPRiJesBczZONu1+kiXsRGl9GtZLrB6m1n+JDVgvl7E2UdNSxAGKa96HSll6p1dR+BytMoX/FLXfou8uucFFqeT1y5f6AuXOKV+PKKr/7hIPX5IxrdStHc/0SQSqypaBoDRYRnVaMakPlIOZ0RdjAz4DJPzzHYQ2KtCgWXm/BZUB8LipJzMUsJTXgV+rUd+xclBZU81vDDp1kbWGqFYbEzflczTx9eqQ6yZ6Ea0PmINDTMAkvFf7/5+w/EvSffdxHveYXkc2xv5rkH3G07foua0hMnupxK14+MBEu2kvlKmpq2NCkaR8SZDsRIJOALuinI1s9RKw4duHWYpA/wPZ7KKvbb2mYe7/PufoAyRBd94SvxyuP9SzK2LPFZU1UVEpzlFH1IGJqpDzvgbCJk4kmHhGdVeLGDQdDnj7sUaiSkelY7vp1ced9Evhngowz9bCjyNTSW0NOTw8xcKVdyuszfW2pode8XrZqli6nml3NUYNH58RE4JQ8pL9BgixFye/EkxHLfu+u2wjYNjwwLXJ3YEr/x8FneLTBbmuhGrxT+TQ43Im8eiNNWwSSCUAFKY1nWcXopgxpcEHcFJsW1YB3EZTrqd7IRwfuuQHw9+WHb3xnsydkoNdKVrjxR5N2hoGiSzZUJSLnYLUVI3aJCO0oXRy4ucYeMVlYt/DpzS+7slvYgiwWEDnsXhPy7TUpP8ynj1QREmNNogtkSUZjkYKFtB9fZrUpGrKstiCJb/OZLn+fkkIzUTCTCBpO5JH4UwyhGems02bVNo9NSbtt9jSyzTxv/3/ujVu0ze2BF2B0f12jfcH9nnyk5zAW1KRJNUSTbKd3izV6V3GlFaXLOmzc3pleEN0bqmYByHfU/bfwSrJxgaSZY0BJiAbHMHJsqDUEtfPOfLfbWSoFtFK7BNsm91YGYYuGdcQaEHlW769LIJCAWlb1XH4iEaflEGzGLXOHuJOix2nj+O21h4iSMdIZlIkaS86jTHqGI1U9s//m/ERfETIcae/7f23vWSwU1ck2jgjX94zIiOmk5WIvLvcjRPgNU0JGK+m2p9do3M/V76N34STgLUo9cTxi+Ep/dabsepMnxKWWjahBG8XbcXdJsdJS8d+bU11sanj2dtOGvDuvnoWnSNIFqqhJ5hGDx7cHMRZZ3JnfAcUj5BHMKXI6wIN1YK2oipgZrwmJPFYUs+1UaDRpln5alhMxunLprWbqf+V8btXPRV+16nu2RjCTgJwg46bjI/HEHfG2xSDsnB89t46WSnHGuH8dfbyEN0sxfVjhWZiJGx1yj8mIlJWxfDsHMvxpjMqgtZyL73t6QbG1R9o9MLbhjokkGxATXVaYGpWE9X6CMliLTx382GUI1kUuvTHyX0KG/p06adqSlbfWV6viKtSD52hMGg1ly3UDJYHxckfCsazk1WlZy8/TMtPt6xw1d1snOzuZIuQkrpj1z0ZQTRp+rmvlyyRMbtBA2jE3xitzNUefwkjuRaqVnLgnzn4sGrai8Ukrp337GvUIyZ8Oaedvx8gUvcW62ORLE4TX7n3/MZaopvX3a/bszMIVradmnyr1H5YTyTOIIedETpnq078GDYQ0kE7ooioUZ+/bt0P0bP0Xf3KPJwjH2OlouTc+v+WnB6b2KfXodnN5kC42WY/eNf2rEeJZxD86R5P6ZH5M5yUsGNu4LLPXLGb+EoR4JjzUpEh34Um/q5TRfB8/GmRIVEsmrZOf6FjALjdqDmmbLRP4CIa+GWwFRyFYIlwjZ/VSFJtea2EmT8xwcC0vPsbkAjxc0Gj4o8bATS8mOSHXfPaoeooc0Q3dZpzvPG8l5vnUlKlqMHqqHLsDYURXYEXdOXopsw1ViumcOTB5xg06nYpaHZ8Z99UPUoDNppcLP5/ZniSQjs7B5cBs82gLp1AtmBJzelwnJh1igkALoSJgkLg0vp3bhg/U6dRy48WtmIuODWFjjvfK7v1cByT5qsRV7sAVIB7ZULEQbqzrQcpKCgNlHIV/5TC2eoFi7ylfPtv84kI6x6Erhcqy6A0HV71rzLXraI6o9LNKbniCE6tUvstch9dhmrB0lb2oiYtVrPNXDP5rIrhGkvFTw5hWQTSN88jk7dC/jqayodIl9wZwzAldN/66xpd5drLFIZBfhFbITuYA3RLD0vgrDrfhUcx7aE7bFB+cJWgcXume7W34qFin55Dm5e6ATy85WHm+vba8+Uzu5tKG06MGk2u6G0jMVN320EZcc5/NPLpw0vSkSHD50Jqcjw+jGGjvxy3LtMoxz70RMJtYVqpTV5nEOwbsh+QSja4AntrFoemDD57ip+aBQ/y/LIcHuckEK4MvJWV180/RqwhxkzsCYFXKJ29lMaE5OdkBt/9UD0oNSxMqK0o3EvbQ/w7o4Dp7Ls2uJcToY9E7z7V44H3W7eF2VhTWCurBwMaWC4miCz5UGdUSt9C3YTtlAmNSO3faz1RLTE+AqjMrEM4ZqEEwb1GuXCqvypacGLQAJpP3fkfxcnB5rYEKBmap6dtKEyEfakIZ5ya3jZuJTc1JFQ5h0/+d8ElKPr6S4unHNmEjUsEXgCDyKDfZ2d2HrA7sn1NVh0hE5iM2bqFX7mIRQMlgfPY1QgnQGlFyf1x3xGnpuPzltp39QZzPXAM7KIAtNnZGegZnhGMhGIXLOQBhvjnAt2LHnviyNrB5DT8PPmRtrlwiaPOeSeu33uoUONb1IKFboDKCSCbRMPcTXP8g3KS8wslg17OD0sbAGXI35bpRA6qnE236Wv7osH99x77wk0EStilAYTbSuFHGXBvHwfi7B6CkvKsRYcbnNg5wMxjlhifTZmUWEOuEWhigNAQqP0MVTD3gddqK0dLdRnh4lo5wkK+IXBaZ7BOjMaCNWQ7ndxS6ELYBVs4sIX0vCg3iX+6HI9c6RFcK82nE3qVk6M93kKUEEbS5hP1kBtRWuNrEkFGesM5tzpifo2Cy4Jvhyy+MJJw+FzDkGC/xKnb596BE3mZScMlbD6zYs1tIzOGL42unmsF8ynzGd75T6l/LwIXi1R4lH2i3/eAl7adLNIebcp8x0OH3F0MhXnknCTfjnVPCsLz7FRPLGl9RfrCpQEjp3pXalV0HoefOd7tnxy8iNBV70RlZnenrgX+Y44sdNLuyOKA0+EBCHaZLcQogMdjAfyWKt14kwf/pc6YiE56GcvnJ2TweeFACq2fsDrgkKDAqkufBiUPrpQIdJzfwd1JxTm0k3vSntfMwc5BJLeaRe3rUWROTg5UsGFTR2ncpf9nED8zLx3XK662n6XQm3Qet16O2fTiNnf+ylWqU7+Dij/jH2b35xqiLoxLL7i+Un5Ku9JdlTojdgiMsY8+/MhMsywa7Ja7CZOfDb1PkNjQqNnHaiF3fynG5l6G9TQ76T7JkhlgJsivrbbBRUw0ejqe5bQ9P6ObRX3hqhxSPvVID/l2fxIblAA5aBNEhXoQ1clS34MuOa3PDlc9LGWj3wss/BxHqjnL5gA51mnAHbucKGa/ephnssNEft8pIV561p0i7VphDm0N6VddZqdyBrsRZkf4gO0smRI3+bOp/EPMQFvUsWI+bgUxi/qSIklTs1zhC1hslZ4Ugoj1gXu64uF6QtiViFI1nGP/59cKm3pdKelpGTga65DFACKGlZeBGZpx4gJ28OS+UJtVlqY7FGC/XPwyelqnDo9IsaiqoamJP0LdKktg2CdMvkoT9Wd1Uw5ioKLBY5pBzEfV010P6hKtsvfF7JTo+JCKuryhUeE/TnNurWLJ6aYuaapP6q/yT8bwdX55YEQwzZchVteLhgh0sRDxadTaarnxq3FBsmeuWk50/BNUMhpoTrDlb37L7p0W/PnM5bfUtJi7WmcS4figu6souxO7/tDvtC88m57bFTw91iqHyy91RcZVuM0rQ2w4NhvdmuAXVH4qy3zwzYfDMzSk4x0v8+gjx4nGDcll+zyEQ7cuKmMGttTxeHJ398bkjiVX3v9FXa5XM0g1itTBD13rUngXIpzZz/DTp8Cn1k2u59kup2sYPWYCnwoL0Nt57Zh1SSO3J6CwnbgoBvBbw3y2NsdDOAB2S84CFULyKFdJB83BQhkcd/JTICxKiuKTrqAArAw0AAwJ/+5HVUn52Q+B/FqdfvL7nDh/fzCrUwjun3eMzQYRxqoxlHgwCp7HJxxZgS/5TVkshJ3SQo/VELUAyqzZVzJQrKbWqZJeqUlPq9VZ1iaT2xo17R13TpJWetAqV9WHgdcrrZmqpDYdPZepKq9jSx9iqtg0ryH3u91+LukTPiqd2XJj2NJ6rLz4V6E5SqlV1wTfndrV0JdJa6FmquV8rruKJqkFevTQyykmIbTux9lo+02Z5dua6nc9Qxe7dp6y035V93pOVq+0sJqIRqlktrUVxBOVUVJZf9IAEpJkAByWRZnDEBzpkFe/fprMPqiQRge0ESICDzpAA9tKQBK1aTEUCN5zCaxFMAyipsYtYjgAgEiOwiHgAHSQIFUUEjMBAXRQQOwuMQQ1Bro1rOqVeoWTWusp5j5VTCpkpNkDUoU66+3rdQA6sns0hrz9apYZB6UI57M1l23wolLFw50WLwO9nxnI1q2RHApw+hzFhWZ8nfkiR/XqqkqJWrq2n95Zj4/0syqtmqtrrQsNFCG1s0KFSvdDXiC6ORpWp80SsAxa34KjIXOlxqlTWzljOQAT+AFnvLe6FFzY/+xKyjrmytdWZkU7dozSqFKoFfCWRA80oN6HASlnjQ6PmfK73X4EpYSD563ru1ynvN7kL3bVJiuZQdn/h+PpEIUfs7Dz4NcWR0rbEzd6EdPpdSO75d4QTtStfgu0qj7YW6p710Mv0JZKJDKW+Fy+9bPzcAA0hAACRk3iioaOgYmFjY/AUINE6QYCFChQnHFyFS1Ob1FYj9aOIIicRLIJZoAjkFJRU1DS0dPYMUqYxM0phZWKXLYJMpS7YcufJO41lbTCYOlwnMeF6IeX/FsRkvlE4FvRcCVMJ+QD16GAYUOEZ4KEiMAhjtiTEeGAsw3lMhKERMgr3GZNh7TKFQMW1MF2IcdcGpKAE=) format('woff2'),
      url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
  font-weight: normal;
  font-style: normal;
}
              
            
!

JS

              
                function setX(x) {
	document.documentElement.style.setProperty('--x', x);
}

function setY(y) {
	document.documentElement.style.setProperty('--y', y);
}

function setAngle(x, y) {
  const maxX = window.innerWidth;
  const maxY = window.innerHeight;
  const yAngle = 180 * x / maxX - 90;
  setY(yAngle);
  const xAngle = -90 * y / maxY;
  setX(xAngle);
}

window.addEventListener('mousemove', e => {
  setAngle(e.clientX, e.clientY);
});
setX(-30);
setY(45);
              
            
!
999px

Console