<div class="tri t1">
  <div class="codepen"></div>
  <div class="logo">
    <img src="https://assets.codepen.io/3421562/rafa3l.png" alt="RAFA3L" class="rafa3l">
  </div>
  <div class="open-container-toggle" onclick="this.classList.toggle('open'); document.querySelector('.tri.t2').classList.toggle('open');">
  </div>
  <div class="bottom-left-accent"></div>
</div>
<div class="tri t2">
  <div class="t2top">
    <div class="logo-factory">
      <?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 295.67 318.08"><path d="m.7,157.08h14.27v44.31c0,2.23.36,3.71,1.07,4.45.71.74,1.13,1.11,3.24,1.11h22.56l-1.69.78c-4.62,2.12-8.04,6.22-9.31,11.14h0s-14.61,0-14.61,0c-5.2,0-9.4-2.78-11.16-4.55-2.22-2.24-4.36-5.25-4.36-10.64v-46.6Z" style="stroke-width:0px;"/><path d="m43.48,167.08c4.97,0,9.23,1.79,12.78,5.36,3.55,3.57,5.33,7.86,5.33,12.85s-1.8,9.38-5.4,12.94c-3.6,3.56-7.94,5.34-13.03,5.34s-9.43-1.79-13.04-5.36c-3.61-3.57-5.41-7.88-5.41-12.92s1.8-9.45,5.41-12.96c3.61-3.5,8.06-5.26,13.36-5.26Zm-.35,12.97c-1.41,0-2.6.51-3.59,1.53s-1.48,2.27-1.48,3.74.5,2.7,1.49,3.73c1,1.03,2.19,1.55,3.57,1.55s2.61-.52,3.6-1.55c1-1.03,1.49-2.27,1.49-3.73s-.49-2.72-1.48-3.74-2.19-1.53-3.62-1.53Z" style="stroke-width:0px;"/><path d="m85.78,188.42v12.06c-1.9.7-3.71,1.05-5.45,1.05-4.24,0-7.83-1.6-10.78-4.82-2.94-3.21-4.41-7.14-4.41-11.78,0-5.02,1.77-9.25,5.31-12.69,3.54-3.45,7.89-5.17,13.04-5.17,2.74,0,5.37.55,7.88,1.65,2.51,1.1,4.48,2.58,5.91,4.43,2.39,3.07,3.59,7.52,3.59,13.36v11.53c0,6.26-1.78,11.34-5.33,15.24s-8.17,5.85-13.87,5.85c-1.73,0-7.82-.07-11.82-.07v-12h10c2.37,0,4.65-.56,5.94-2.12,1.29-1.56,1.93-3.79,1.93-6.7v-13.18c0-3.68-1.49-5.52-4.46-5.52-1.27,0-2.37.49-3.32,1.46-.95.97-1.42,2.09-1.42,3.36,0,1.34.45,2.45,1.35,3.34.9.89,2.02,1.34,3.36,1.34.89,0,1.75-.21,2.57-.63Z" style="stroke-width:0px;"/><path d="m125.22,167.08c4.97,0,9.23,1.79,12.78,5.36,3.55,3.57,5.33,7.86,5.33,12.85s-1.8,9.38-5.4,12.94c-3.6,3.56-7.94,5.34-13.03,5.34s-9.43-1.79-13.04-5.36c-3.61-3.57-5.41-7.88-5.41-12.92s1.8-9.45,5.41-12.96c3.61-3.5,8.06-5.26,13.36-5.26Zm-.35,12.97c-1.41,0-2.6.51-3.59,1.53s-1.48,2.27-1.48,3.74.5,2.7,1.49,3.73c1,1.03,2.19,1.55,3.57,1.55s2.61-.52,3.6-1.55c1-1.03,1.49-2.27,1.49-3.73s-.49-2.72-1.48-3.74-2.19-1.53-3.62-1.53Z" style="stroke-width:0px;"/><path d="m58.68,230.6v17.58h-6.48v17.1l-18.36,34.81-1.14-68.49c0-8.51,1.14-13.51,7.08-18.99,5.06-4.67,10.67-5.52,17.84-5.52h25.21v12h-24c-5,0-6.64,4.24-6.64,8.4v3.12h6.48Z" style="stroke-width:0px;"/><path d="m86.84,250.12v13.6c-1.08.19-2.06.28-2.95.28-5.27,0-9.67-1.73-13.18-5.2-3.52-3.47-5.27-7.82-5.27-13.04s1.78-9.4,5.33-12.94c3.55-3.54,7.87-5.31,12.96-5.31,5.67,0,10.14,1.66,13.41,4.97,3.27,3.32,4.9,7.85,4.9,13.59v17.19h-13.15v-16.24c0-1.85-.45-3.33-1.35-4.43-.9-1.1-2.12-1.65-3.64-1.65-1.38,0-2.58.5-3.59,1.51s-1.51,2.2-1.51,3.59c0,1.45.46,2.65,1.37,3.59.91.94,2.07,1.41,3.48,1.41,1.15,0,2.21-.3,3.2-.91Z" style="stroke-width:0px;"/><path d="m131.21,247.13l13.04-.49c-.38,5.06-2.26,9.22-5.66,12.48-3.4,3.26-7.54,4.89-12.41,4.89-5.16,0-9.51-1.79-13.06-5.38s-5.33-7.98-5.33-13.18,1.79-9.18,5.38-12.69,7.89-5.27,12.9-5.27c4.38,0,8.25,1.38,11.6,4.15,3.35,2.77,5.44,6.29,6.26,10.58l-13.32.49c-1.15-1.5-2.6-2.25-4.36-2.25-1.5,0-2.73.49-3.69,1.48-.96.98-1.44,2.23-1.44,3.73s.51,2.8,1.53,3.83c1.02,1.03,2.29,1.55,3.81,1.55,2.23,0,3.81-1.3,4.75-3.9Z" style="stroke-width:0px;"/><path d="m161.69,215.28v13.43h5.91v13.89h-5.91c0,2.79.44,4.71,1.32,5.77s2.49,1.58,4.83,1.58v13.82c-.68.02-1.18.04-1.51.04-2.98,0-5.78-.69-8.42-2.07-2.64-1.38-4.75-3.26-6.35-5.62-2.02-3.02-3.02-7.03-3.02-12.02v-28.79h13.15Z" style="stroke-width:0px;"/><path d="m190.69,227.48c4.97,0,9.23,1.79,12.78,5.36,3.55,3.57,5.33,7.86,5.33,12.85s-1.8,9.37-5.4,12.94c-3.6,3.56-7.94,5.34-13.03,5.34s-9.43-1.79-13.04-5.36c-3.61-3.57-5.41-7.88-5.41-12.92s1.8-9.45,5.41-12.96c3.61-3.5,8.06-5.26,13.36-5.26Zm-.35,12.97c-1.41,0-2.6.51-3.59,1.53s-1.48,2.27-1.48,3.74.5,2.7,1.49,3.73c1,1.03,2.18,1.55,3.57,1.55s2.61-.52,3.6-1.55c1-1.03,1.49-2.27,1.49-3.73s-.49-2.72-1.48-3.74-2.19-1.53-3.62-1.53Z" style="stroke-width:0px;"/><path d="m233.51,227.87v14.06c-.91-.52-1.75-.77-2.5-.77-2.39,0-3.59,1.83-3.59,5.48v16.63h-13.15v-19.16c0-5.06,1.38-9.1,4.15-12.11,2.76-3.01,6.46-4.52,11.07-4.52,1.03,0,2.37.13,4.01.39Z" style="stroke-width:0px;"/><path d="m241.92,278.63v-11.43c1.78.75,3.34,1.12,4.68,1.12,4.27,0,7.03-2.4,8.3-7.21-2.3,1.36-4.55,2.04-6.75,2.04-3.26,0-5.94-1.21-8.05-3.64s-3.16-5.51-3.16-9.26v-22.04h13.15v18.84c0,2.09.87,3.13,2.6,3.13s2.5-1.15,2.5-3.45v-18.53h13.15v31.29c0,5.84-1.64,10.55-4.92,14.13-3.92,4.27-8.65,6.4-14.2,6.4-2.44,0-4.86-.47-7.28-1.41Z" style="stroke-width:0px;"/><path d="m295.67,11.1c0-8.73-2.41-11.1-11.22-11.1-10.85,0-21.7,0-32.55,0-8.75,0-10.93,2.18-10.93,10.92,0,38.46,0,76.92,0,115.38v4.25h-49.55v-4.26c0-16.76-.02-33.53.01-50.29,0-3.97-.88-7.31-5.01-8.97-3.67-1.48-6.36.31-9.09,2.39-18.2,13.92-36.43,27.82-54.65,41.72-4.87,3.71-9.74,7.41-15.33,11.67,0-2.35,0-3.7,0-5.05,0-13.68.03-27.37-.02-41.05-.02-4.68-1.93-7.94-5.72-8.23-2.55-.2-5.64.77-7.8,2.23-29.34,19.73-58.52,39.69-87.85,59.43-4.14,2.78-5.64,6.04-5.85,11-.26,5.95.07,7.95.07,8.95,4.97.47,10-.05,15.16,0,.51-1-.12-2-.12-4.18,0-2.83.91-4.39,3.21-5.94,23.58-15.93,47.08-31.98,70.6-47.99.8-.54,1.65-1.02,3.14-1.93,0,1.79,0,3.06,0,4.34,0,13.81.02,27.61-.01,41.42,0,3.59.33,6.84,4.08,8.76,3.9,2,6.81.29,9.78-1.96,21.78-16.56,43.57-33.09,65.36-49.62,1.34-1.02,2.72-2,4.75-3.5v4.55c0,13.81-.01,27.61,0,41.42,0,7.63,2.63,10.28,10.16,10.28,19.85.01,39.7.01,59.55,0,7.61,0,10.14-2.55,10.14-10.21,0-38.46,0-76.92,0-115.37v-4.67h24.14v287.27H52.4c0-1.48,0-2.8,0-4.12-.01-17.47-.03-16.94-.04-34.41,0,0-.02,0-.02,0-4.75-.5-13.48-1-18.23-1.44-.31-.03-.62-.06-.92-.09,0,20.83,0,23.66,0,44.49,0,1.59-.26,3.47.46,4.71,1.2,2.07,2.81,4.18,4.78,5.43,1.48.94,3.8.74,5.75.74,90.99.03,148.97.03,239.96.03,9.45,0,11.54-2.08,11.54-11.51,0-50.54,0-101.08,0-151.62s0-95.9,0-143.85Z" style="stroke-width:0px;"/></svg>
    </div>
    <div class="left-line"></div>
    <div class="light"></div>
    <div class="accent-dots"><div></div><div></div><div></div><div></div></div>
  </div>
  <div class="t2bottom">
    <div class="vent"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    <div class="accent-dots"><div></div><div></div><div></div><div></div></div>
    <div class="accent-texture"></div>
  </div>
  <div id="unitContainer" class="sharp"></div>
  <div id="electrodes"></div>
</div>
<div class="tri t3">
  <div class="theme-options">
    <div class="option-1 active" onclick="document.querySelector('.theme-options > .active').classList.remove('active'); this.classList.toggle('active');"></div>
    <div class="option-2" onclick="document.querySelector('.theme-options > .active').classList.remove('active'); this.classList.toggle('active');"></div>
    <div class="option-3" onclick="document.querySelector('.theme-options > .active').classList.remove('active'); this.classList.toggle('active');"></div>
  </div>
  <div class="right-options">
    <div class="top-node">
      <!-- https://codepen.io/RAFA3L/pen/XWvBBNb -->
      <div class="ring" 
        data-count="28" 
        data-size="3" 
        data-radius="20" 
        data-vertical="3"
        data-time="1.2"
      ></div>
    </div>
    <div class="smooth-sharp" onclick="
      const shapeToggle = this.children[0];
      shapeToggle.setAttribute('data-toggled', shapeToggle.getAttribute('data-toggled') === 'true' ? 'false' : 'true');
      shapeToggle.querySelector('path').setAttribute('d', 
        shapeToggle.getAttribute('data-toggled') === 'true' 
          ? 'M 0 0 C 8.3333 0 19 1 19 15 C 19 24 26 31 36 31 C 49 31 50 42.3333 50 50 H 0 V 0 Z' 
          : 'M 0 0 C 8.3333 0 16.6667 0 25 0 C 25 18 32 25 50 25 C 50 33.6667 50 42.3333 50 50 H 0 V 0 Z'
      );
    ">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="shapeToggle" data-toggled="false">
        <path d="M 0 0 C 8.3333 0 16.6667 0 25 0 C 25 18 32 25 50 25 C 50 33.6667 50 42.3333 50 50 H 0 V 0 Z" />
      </svg>
    </div>
    <div class="add-spot"></div>
    <div class="reset" data-blocks="7"></div>
    <div class="remove-spot"></div>
    <div class="download" id="downloadBtn"><div class="glow"><div class="ico"></div></div></div>
    <div class="led-bar">
      <div class="text"></div>
      <div class="text-overlay"></div>
    </div>
  </div>
  <div class="right-ish">
    <div class="text-box">
      Rafa3l © <script>document.write(new Date().getFullYear())</script><br>
      Platform: Codepen<br>
      IPv4: 104.16.32.228<br>
      IPv6: 2606:4700::6812:6fa4<br>
    </div>
    <div class="barcode"></div>
    <div class="hazard"></div>
    <div class="recycle"></div>
    <div class="qr"></div>
    <div class="reactive"></div>
    <div class="global"></div>
  </div>
</div>
*{ box-sizing: border-box; } html, body { height: 100%; overflow: hidden;}

body {
    display: flex; margin: 0;
    justify-content: center; align-items: center;
    flex-direction: row;
    background: var(--c2);
    font-family: monospace;

    --c1: #1e1e1e;
    --c2: #c1c1c1;
    --c3: #ce5121;
}
body:has( .theme-options > .option-1.active ),
.theme-options > .option-1 {
    --c1: #1e1e1e;
    --c2: #c1c1c1;
    --c3: #ce5121;
}
body:has( .theme-options > .option-2.active ),
.theme-options > .option-2 {
    --c1: #0e0e0e;
    --c2: #777;
    --c3: #05e284;
}
body:has( .theme-options > .option-3.active ),
.theme-options > .option-3 {
    --c1: #e85a23;
    --c2: #313131;
    --c3: #40efff;
}

body::after {
    content: '';
    display: block;
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    opacity: 0.5;
    background: radial-gradient(circle at 0% 0%, transparent 24%, #000c),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"
    );
    filter: grayscale(1);
    background-size: contain;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.tri {
    width: 60%;
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    --highlight: hsla( from var(--c2) h s calc(l + 16)/ 0.24);
    --shadow: hsla( from var(--c2) h s calc(l - 36)/ 0.24);
}
.tri.t1,
.tri.t3 {
    width: 20%;
}
.tri.t1 {
    box-shadow: 
    inset -4px 0 1px -3px var(--shadow),
    inset -4px 0 4px -3px var(--shadow);
}
.tri.t3 {
    box-shadow: 
    inset 4px 0 1px -2px var(--highlight),
    inset 4px 0 4px -2px var(--highlight);
}
.tri.t2 {
    min-width: 280px;
    max-width: 642px;
    background: var(--c1);
    container: unitContainer / inline-size;
}

.tri.t1 .logo {
    text-align: end;
    mix-blend-mode: color-burn;
    position: absolute;
    right: 2.4cqi; top: -186px; bottom: 0; margin: auto;
    height: fit-content; width: fit-content;
    rotate: 90deg;
    transform-origin: 100% 0%;
    cursor: pointer;
    width: 164px; 
}
.tri.t1 .logo img { 
    width: 100%; height: auto;
    opacity: 0.2;
}
.tri.t1 .codepen { 
    background-image: url('https://blog.codepen.io/wp-content/uploads/2023/09/logo-black.png');
    background-size: contain;
    width: 42px; height: 42px;
    opacity: 0.16;
    position: absolute;
    top: -618px; bottom: 0;
    rotate: 90deg;
    margin: auto;
    right: 2.4cqi;
    translate: 6px 0;
    background-repeat: no-repeat;
    cursor: pointer;
}

.tri.t2::before {
    content:''; display: block;
    width: 100%; height: 100%;
    position: absolute;
    left: 0; top: 0;
    background: url('https://assets.codepen.io/3421562/dbg.jpg');
    background-size: 1200px;
    opacity: 0.18;
    mix-blend-mode: luminosity;
    pointer-events: none;
}

.tri .t2top, .tri .t2bottom{
    position: absolute;
    width: 100%; height: 50%;
    background: var(--c2);
    z-index: 10;
    box-shadow: 
    inset 4px 0 1px -2px var(--highlight),
    inset 4px 0 4px -2px var(--highlight),
    inset -4px 0px 1px -3px var(--shadow),
    inset -4px 0px 4px -3px var(--shadow);

    transition: 
    scale 1s ease-in-out,
    translate 1s ease-in-out,
    filter 1s ease-in-out;
    --s2: hsla(from var(--shadow) h s l / 0.3);
    filter: drop-shadow( 0cqi -0.2cqi 0px var(--s2) );
}
.tri .t2top {
    top: 0;
}
.tri .t2top::after {
    content: ''; display: block;
    position: absolute;
    top: 98%;
    width: 100%;
    height: 10cqi;

    box-shadow: 
    inset 4px 0 1px -2px var(--highlight),
    inset 4px 0 4px -2px var(--highlight),
    inset -4px 0px 1px -3px var(--shadow),
    inset -4px 0px 4px -3px var(--shadow);
    background: var(--c2);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 58% 100%, 48% 0%, 0 0%);
}
.tri .t2bottom{
    bottom: 0;
    height: calc(51.2% - 10cqi);
}
.tri .t2bottom::after {
    content: ''; display: block;
    position: absolute;
    bottom: 98%;
    width: 100%;
    height: 10cqi;
    rotate: 180deg;

    box-shadow: 
    inset -4px 0 1px -2px var(--highlight),
    inset -4px 0 4px -2px var(--highlight),
    inset 4px -2px 1px -3px var(--shadow),
    inset 4px -2px 4px -3px var(--shadow);
    background: var(--c2);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 40% 0%, 0 0%);
}
.tri.t2.open .t2top,
.tri.t2.open .t2bottom {
    --s3: hsla(from var(--shadow) h s 0 / 0.4);
    filter: drop-shadow( 1cqi 1cqi 1px var(--s3) );
    scale: 1.02;
}
.tri.t2.open .t2top {
    translate: 0 -50%;
}
.tri.t2.open .t2bottom {
    translate: 0 50%;
}

/* bottom vent */
.tri .t2bottom .vent {
    display: flex;
    gap: 5px;
    position: absolute;
    right: 22cqi;
    top: 12cqi;
}
.tri .t2bottom .vent > div {
    height: 64px;
    width: 4px;
    background: var(--c2);
    background: lch( from var(--c2) calc(l / 4) c h / 1);
    border-radius: 10px;
    --u: 0.34cqi; --nu: -0.3cqi;
    box-shadow:
    var(--nu) var(--nu) var(--u) 0 lch( from var(--c2) calc(l + 32) c h / 0.5),
    var(--u) var(--u) var(--u) 0 lch( from var(--c2) calc(l - 32) c h / 0.4);
}

/* top logo */
.tri .t2top .logo-factory {
    pointer-events: none;
    position: absolute;
    width: 100%; height: 100%;
    display: grid;
    place-items: end center;
    padding-bottom: min(10vh, 42px);
}
.tri .t2top .logo-factory svg{
    fill: var(--c2);
    width: 32%;
    filter:
    drop-shadow(-1px -1px 0.2px lch(from var(--c2) calc(l + 16) c h / 0.3 ))
    drop-shadow(1px 1px 0.2px lch(from var(--c2) calc(l - 22) c h / 0.3 ));
}


/* inset top light */
.tri .t2top .light{
    position: absolute;
    width: 40%; height: 0.2cqi;
    left: 5%; bottom: 0;
    box-shadow: 
    0 2px 2px 0 var(--c3),
    0 2px 0 0 #000;
    
    opacity: 0;
    transition: opacity 0.3s ease-out;
    transition-delay: 0.6s;
}
.tri .t2top .light::before {
    content: ''; display: block;
    position: absolute;
    top: 1cqi;
    width: 100%; height: 6cqi;
    background: linear-gradient( 0deg, transparent, var(--c3));
    filter: blur(12px);
    opacity: 0.8;
}
.tri.t2.open .t2top .light {
    opacity: 1;
}

/* left line top accent */
.tri .t2top .left-line {
    position: absolute;
    left: 3cqi;
    bottom: 20px;
    height: 30vh; width: 10px;
    background: var(--c2);
    background: lch(from var(--c2) calc(l - 42) calc(c - 12) h);
    border-radius: 4px;
    --u: 0.4cqi; --nu: -0.4cqi;
    box-shadow:
    var(--u) var(--u) var(--u) 0 lch( from var(--c2) calc(l + 32) c h / 0.5),
    var(--nu) var(--nu) var(--u) 0 lch( from var(--c2) calc(l - 32) c h / 0.5);
    transition: 
    translate 1s ease-in-out;
}
.tri .t2top .left-line::before {
    display: block; content: '';
    position: absolute;
    left: 0; right: 0; margin: auto;
    bottom: 0;
    width: 8px; height: 8px;
    background: var(--c3);
    border-radius: 2px;
    translate: 0px -25vh;
    transition: 
    translate 1s ease-in-out,
    box-shadow 1s ease-in-out;
    box-shadow: 
    0 0 0px 0px var(--c3),
    0 0 0px 0px var(--c3),
    0 0 0px 0px var(--c3),
    0 0 0px 0px var(--c3),
    0 0 0 1px lch(from var(--c3) calc(l - 24) c h / 1),
    inset 1px 1px 1px 0px lch(from var(--c3) calc(l + 24) c h / 0.4),
    inset -1px -1px 1px 0px #0006;
}
.tri.t2.open .t2top .left-line {
    translate: 5px 0;
}
.tri.t2.open .t2top .left-line::before {
    translate: 1px -2px;
    box-shadow: 
    0 0 4px 0px var(--c3),
    0 0 12px 0px var(--c3),
    0 0 12px 0px var(--c3),
    0 0 16px 0px var(--c3),
    0 0 0 1px lch(from var(--c3) calc(l - 24) c h / 1),
    inset 1px 1px 1px 0px lch(from var(--c3) calc(l + 24) c h / 0.4),
    inset -1px -1px 1px 0px #0006;
}


/* top accent dots */
.tri.t2 .t2top .accent-dots {
    position: absolute;
    pointer-events: none;
    width: 100%; height: 100%;
    & > div{
        position: absolute;
        background: lch( from var(--c2) calc(l - 24) c h );
        width: 10px; height: 10px;
        border-radius: 100px;
        box-shadow: 
        0 0 1px 1px #333,
        2px 2px 3px 0px #fff7,
        -2px -2px 3px 1px #0004;
        z-index: 1;
    }
    &>div:nth-child(1) {
        right: 10%; bottom: -3cqi;
    }
    &>div:nth-child(2) {
        right: 10%; top: 10%;
        scale: 1.2;
    }
    &>div:nth-child(3) {
        left: 12%; top: 32%;
    }
    &>div:nth-child(4) {
        left: 13%; bottom: 10%;
        scale: 1.4;
    }
}
/* bottom accent dots */
.tri.t2 .t2bottom .accent-dots {
    position: absolute;
    pointer-events: none;
    width: 100%; height: 100%;
    & > div{
        position: absolute;
        background: lch( from var(--c2) calc(l - 24) c h );
        width: 10px; height: 10px;
        border-radius: 100px;
        box-shadow: 
        0 0 1px 1px #333,
        2px 2px 3px 0px #fff7,
        -2px -2px 3px 1px #0004;
        z-index: 1;
    }
    &>div:nth-child(1) {
        right: 10%; top: 10%;
    }
    &>div:nth-child(2) {
        right: 10%; bottom: 24%;
        scale: 1.4;
    }
    &>div:nth-child(3) {
        left: 12%; top: -2cqi;
    }
    &>div:nth-child(4) {
        scale: 1.2;
        left: 13%; bottom: 10%;
    }
}

/* bottom accent texture */
.tri.t2 .t2bottom .accent-texture {
    position: absolute;
    pointer-events: none;
    width: 70%; height: 54px;
    top: 74%; left: 8%;
    opacity: 0.6;
    &::before, &::after{
        content: ''; display: block;
        width: 100%; height: 40%;
        background: repeating-linear-gradient(
            135deg,
            #0002 0px,
            #0002 1px,
            #0001 1px,
            #0001 1.9px,
            #fff2 1.9px,
            #fff2 2.8px,
            #0000 2.8px,
            #0000 5.6px
        );
        border-radius: 4px;
        box-shadow: 
        2px 2px 2px 0 lch(from var(--c2) calc(l + 2) c h),
        -2px -2px 1px 0 #0001,
        inset 1px 1px 2px 1px #0001,
        inset -2px -2px 2px 0 lch(from var(--c2) calc(l + 6) c h),
        inset 2px 2px 2px 0 #0001;
    }
    &::after{
        position: absolute;
        bottom: 0; left: 24%;
        background: repeating-linear-gradient(
            35deg,
            #fff2 0px,
            #fff2 1px,
            #0001 1px,
            #0001 1.9px,
            #0002 1.9px,
            #0002 2.8px,
            #0000 2.8px,
            #0000 5.6px
        );
    }
}

/* open container toggle */
.tri.t1 .open-container-toggle {
    width: 42px; height: 164px;
    background: lch(from var(--c3) calc(l - 4) c h / 0.8) linear-gradient(90deg, transparent 35%, #0008 45%, #0006 45%, #0006 55%, #fff4 55%, transparent 65%);
    box-shadow: 
    2px 2px 3px 0px lch(from var(--c2) calc(l + 24) c h / 0.8),
    1px 1px 4px 2px lch(from var(--c3) l c h / 0.4),
    -2px -2px 3px 0px #0004,
    inset -2px -2px 4px -1px lch(from var(--c2) calc(l + 24) c h / 0.4),
    inset 2px 2px 4px 0 #0007;
    position: absolute;
    right: 2cqi;
    border-radius: 6px;
    cursor: pointer;
    &::before,
    &::after {
        box-shadow: 
        2px 2px 2px 1px #0003,
        inset 3px 3px 2px -1px lch(from var(--c2) calc(l + 24) c h / 0.8),
        inset -3px -3px 2px -1px lch(from var(--c2) calc(l - 24) c h / 0.8);
        display: block; content: ''; 
        position: absolute; left: 0; right: 0; top: 0; bottom: 0;
        margin: auto; 
        width: 34px; height: 34px;
        border-radius: 4px;
        background: var(--c2); 
        transform: translateY(18px);
        transition: transform 1s ease-in-out, background-image 1s ease-in-out;
    
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'/%3E%3Cpath opacity='0.3' d='M215.39,92.94A8,8,0,0,0,208,88H48a8,8,0,0,0-5.66,13.66l80,80a8,8,0,0,0,11.32,0l80-80A8,8,0,0,0,215.39,92.94Z' fill='currentColor'/%3E%3C/svg%3E");
        background-size: 64%;
        background-position: center;
        background-repeat: no-repeat;
    }
}
.tri.t1 .open-container-toggle::after {
    transform: translateY(-18px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'/%3E%3Cpath opacity='0.3' d='M213.66,154.34l-80-80a8,8,0,0,0-11.32,0l-80,80A8,8,0,0,0,48,168H208a8,8,0,0,0,5.66-13.66Z' fill='currentColor'/%3E%3C/svg%3E");
}
.tri.t1 .open-container-toggle.open::before {
    transform: translateY(60px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'/%3E%3Cpath opacity='0.3' d='M213.66,154.34l-80-80a8,8,0,0,0-11.32,0l-80,80A8,8,0,0,0,48,168H208a8,8,0,0,0,5.66-13.66Z' fill='currentColor'/%3E%3C/svg%3E");
}
.tri.t1 .open-container-toggle.open::after {
    transform: translateY(-60px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'/%3E%3Cpath opacity='0.3' d='M215.39,92.94A8,8,0,0,0,208,88H48a8,8,0,0,0-5.66,13.66l80,80a8,8,0,0,0,11.32,0l80-80A8,8,0,0,0,215.39,92.94Z' fill='currentColor'/%3E%3C/svg%3E");
}

/* bottom left accent */
.tri.t1 .bottom-left-accent {
    width: 42px; height: 42%;
    background: repeating-linear-gradient(
        -45deg,
        #0001 0px,
        #0001 10px,
        #fff3 10px,
        #fff1 12px,
        #0000 12px,
        #0000 20px,
        #0003 22px,
    );
    position: absolute;
    right: 2cqi;
    top: calc(50% + 84px);
}

/* theme options */
.tri.t3 .theme-options {
    position: absolute;
    width: 86px;
    height: fit-content;
    left: 1cqi; top: 0; bottom: 0;
    translate: 0 -242px;
    margin: auto;
    display: flex;
    flex-direction: column;
}
.tri.t3 .theme-options > div {
    position: relative;
    width: 64%; height: 24px;
    margin: 6px auto;
    border: 1px solid #444;
    
    border-radius: 100px;
    cursor: pointer;
    background: linear-gradient(
        -45deg, 
        var(--c1) 0%,
        var(--c1) 35%,
        var(--c3) 35%, 
        var(--c3) 65%, 
        var(--c2) 65%, 
        var(--c2) 
        );
    box-shadow: 
        0 0 1px 1px #333,
        -2px -2px 3px 1px #0004,
        2px 2px 3px 1px #fff7;
}
.tri.t3 .theme-options > div::before {
    content:''; display: block;
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;
    width: 72%; height: 50%;
    background: #444;
    border-radius: 100px;
    box-shadow: 
    0 0 1px 1px #333,
    0 0 8px 1px var(--c3),
    0 0 3px 1px var(--c3),
    inset -1px -1px 2px 0px #0004,
    inset 1px 1px 2px 0px #fff7;
    filter: grayscale(1) brightness(1);
    transition: 
    filter 0.1s ease-in-out,
    background 0.1s ease-in-out;
}
.tri.t3 .theme-options > div:hover::before {
    background: var(--c3);
    filter: grayscale(0.7) brightness(1);
}
.tri.t3 .theme-options > div.active::before {
    background: var(--c3);
    filter: grayscale(0) brightness(1.2);
}

/* electrodes */
#electrodes {
    position: absolute;
    pointer-events: none;
    right: 0; top: 0; bottom: 0; margin: auto;
    display: block;
    height: 64%; width: 50%;
    opacity: 0.64;
    rotate: 180deg;
    background: linear-gradient( 174deg, lch(from var(--c3) l c h / 0.1 ), transparent 42%);
}


/* right options */
.tri.t3 .right-options {
    width: 80px; height: 150px;
    margin-left: 4px; margin-top: 100px;
    position: absolute;
    background: lch( from var(--c1) l c h / 0.2);
    left: 2cqi;
    border-radius: 100px;
    box-shadow: 
    inset -4px -1px 2px -1px  lch( from var(--c1) calc( l + 24 ) c h / 0.1),
    inset 2px 3px 16px -4px #0003,
    inset 2px 3px 12px 1px #0003,
    inset 2px 3px 2px 1px #0001,
    inset 2px 3px 0px -1px #0002,
    inset 0 0 1px 1px #0001,
    -2px -2px 3px 0px #0004,
    1px 1px 0px 0px #fff3,
    3px 3px 3px 0px #fff2,
    -1px -1px 1px 0px #0005,
    0 0 0px 1px #0001;
}
.tri.t3 .right-options::before {
    content: ''; display: block;
    width: 92px; height: 242px;
    border: 1px solid #0004;
    box-shadow: 
    1px 1px 1px 0 #0002,
    inset 1px 1px 0 0 #fff3;
    position: absolute;
    bottom: -6px;
    border-radius: 100px;
    translate: -8px 0px;
}

/* right options top-node */
.tri.t3 .right-options .top-node {
    position: absolute;
    bottom: calc(100% + 10px); left: 7px;
    width: 64px; height: 64px;
    border-radius: 100%;
    background: #1e1e1e;
    box-shadow: 
    0 0 1px 0.4px #000a,
    1px 1px 2px 0px #000a,
    inset 0 0 0 1px #000a,
    inset 2px 2px 2px 0 #fffa,
    inset -2px -2px 2px 0 #000a,
    inset -3px -2px 14px 4px #000a;
    .ring {
        position: relative;
        width: 100%; height: 100%;
        transition: opacity 0.2s ease-in-out;
    }
    .dot {
        position: absolute;
        background-color: var(--c3);
        border-radius: 50%;
        top: 50%; left: 50%;
        transform-origin: center;
        transform: translate(-50%, -50%);
        animation-play-state: paused !important;
    }
}
body:has(.tri.t2:not(.open)) .tri.t3 .right-options .top-node .ring {
    opacity: 0.3;
    .dot {
        translate: 0 0 !important;
    }
}
body:has(.tri.t2.open) .tri.t3 .right-options .top-node .ring {
    opacity: 1;
    .dot {
        animation-play-state: running !important;
    }
}
@keyframes vert {
    0% { translate: 0 var(--vert);}
    50% { translate: 0 calc( -1 * var(--vert));}
    100% { translate: 0 var(--vert);}
}


/* right options smooth-sharp */
.tri.t3 .right-options .smooth-sharp {
    width: 68px; height: 50px;
    background: #1e1e1e;
    box-shadow: 
    0 0 1px 0.4px #000a,
    2px 2px 3px 0px #000a,
    inset 0 0 0 1px #000a,
    inset 2px 2px 2px 0 #fffa,
    inset -2px -2px 2px 0 #000a,
    inset -3px -2px 14px 4px #000a;
    position: absolute;
    top: 6px; left: 0; right: 0;
    margin: auto;
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;

    transition: box-shadow 0.168s ease-in-out;
    cursor: pointer;
    overflow: hidden;
    pointer-events: none;

    display: flex;
    justify-content: center; align-items: center;
    padding-left: 6px; padding-bottom: 4px;
    &:hover{
        box-shadow: 
        0 0 1px 0.4px #000a,
        1px 1px 2px 0px #000a,
        inset 0 0 0 1px #000a,
        inset 1px 1px 2px 0 #fffa,
        inset -2px -2px 2px 0 #000a,
        inset -3px -2px 14px 4px #000a;
    }
}
body:has(.tri.t2.open) .tri.t3 .right-options .smooth-sharp{
    pointer-events: all;
}
.tri.t3 .right-options .smooth-sharp::before {
    content: ''; display: block;
    width: 300%; height: 20px;
    background: linear-gradient(0deg, #fff4, #fff0);
    filter: blur(6px);
    rotate: -42deg;
    position: absolute;
    bottom: 100%; right: -50%;
    transition: all 0.3s ease-out;
}
.tri.t3 .right-options .smooth-sharp::after{
    content: 'sharp'; display: block;
    width: 100%; height: fit-content;
    position: absolute; bottom: 8%;
    font-size: 10px; font-weight: 100;
    color: #fffa;
    text-align: center;
    opacity: 0.3;
    transition: opacity 1s ease-in-out;
}
.tri.t3 .right-options .smooth-sharp:has([data-toggled='true'])::after{ content: 'smooth'; }
.tri.t3 .right-options .smooth-sharp:hover::before {
    bottom: -200%;
}
.shapeToggle {
    width: 16px; margin: auto;
    filter: drop-shadow(0 0 3px var(--c3));
    opacity: 0.2;
    transition: opacity 1s ease-in-out;
}
.shapeToggle path {
    transition: d 0.2s ease-in-out;
    fill: var(--c3);
}

body:has(.tri.t2.open) .tri.t3 .right-options .shapeToggle,
body:has(.tri.t2.open) .tri.t3 .right-options .smooth-sharp::after {
    opacity: 1;
}

/* add spot btn */
.tri.t3 .right-options .add-spot,
.tri.t3 .right-options .remove-spot {
    width: 20px; height: 28px;
    background: #1e1e1e;
    box-shadow: 
    0 0 1px 0.4px #000a,
    2px 2px 3px 0px #000a,
    inset 0 0 0 1px #000a,
    inset 2px 2px 2px 0 #fffa,
    inset -2px -2px 2px 0 #000a,
    inset -3px -2px 14px 4px #000a;
    position: absolute;
    top: 0; bottom: 0;
    margin: auto;
    display: flex; justify-content: center; align-items: center;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    pointer-events: none;
    
    &::before {
        content:'+'; display: block;
        
        color: var(--c3);
        font-size: 1em; font-weight: 1000;
        position: absolute;
        width: fit-content; height: fit-content;
        left: 0; right: 0; top: 0; bottom: 0; margin: auto;
        opacity: 0.2;
        transition: opacity 1s ease-in-out, filter 0.2s ease-in-out;
        filter: drop-shadow( 0 0 0px lch(from var(--c3) l c h / 0));
    }
    &::after {
        content: ''; display: block;
        width: 300%; height: 20px;
        background: linear-gradient(0deg, #fff4, #fff0);
        filter: blur(6px);
        rotate: -42deg;
        position: absolute;
        bottom: 100%; right: -50%;
        transition: all 0.3s ease-out;
    }
    &:hover{
        box-shadow: 
        0 0 1px 0.4px #000a,
        1px 1px 2px 0px #000a,
        inset 0 0 0 1px #000a,
        inset 1px 1px 2px 0 #fffa,
        inset -2px -2px 2px 0 #000a,
        inset -3px -2px 14px 4px #000a;
    }
    &:hover::after {
        bottom: -100px;
    }
}
body:has(.tri.t2.open) .tri.t3 .right-options .add-spot,
body:has(.tri.t2.open) .tri.t3 .right-options .remove-spot {
    pointer-events: all;
    &::before {
        filter: drop-shadow( 0 0 3px lch(from var(--c3) l c h / 1)) drop-shadow( 0 0 3px lch(from var(--c3) l c h / 1));
        opacity: 1;
    }
}
.tri.t3 .right-options .add-spot { right: 5px; }
.tri.t3 .right-options .remove-spot { left: 5px;    
    &::before { content:'-'; }
}

/* right options reset */
.tri.t3 .right-options .reset {
    width: 22px; height: 26px;
    background: #1e1e1e;
    box-shadow: 
    0 0 1px 0.4px #000a,
    2px 2px 3px 0px #000a,
    inset 0 0 0 1px #000a,
    inset 2px 2px 2px 0 #fffa,
    inset -2px -2px 2px 0 #000a,
    inset -3px -2px 14px 4px #000a;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
    display: flex; justify-content: center; align-items: center;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    pointer-events: none;
    
    &::before {
        content:'\275A'; 
        content:attr(data-blocks); 
        display: block;
        color: var(--c3);
        font-size: 1em;
        position: absolute;
        width: fit-content; height: fit-content;
        left: 0; right: 0; top: 0; bottom: 0; margin: auto;
        opacity: 0.2;
        transition: opacity 1s ease-in-out, filter 0.2s ease-in-out;
        filter: drop-shadow( 0 0 0px lch(from var(--c3) l c h / 0));
    }
    &::after {
        content: ''; display: block;
        width: 300%; height: 20px;
        background: linear-gradient(0deg, #fff4, #fff0);
        filter: blur(6px);
        rotate: -42deg;
        position: absolute;
        bottom: 100%; right: -50%;
        transition: all 0.3s ease-out;
    }
    &:hover{
        box-shadow: 
        0 0 1px 0.4px #000a,
        1px 1px 2px 0px #000a,
        inset 0 0 0 1px #000a,
        inset 1px 1px 2px 0 #fffa,
        inset -2px -2px 2px 0 #000a,
        inset -3px -2px 14px 4px #000a;
    }
    &:hover::after {
        bottom: -100px;
    }
}

body:has(.tri.t2.open) .tri.t3 .right-options .reset {
    pointer-events: all;
    &::before {
        filter: drop-shadow( 0 0 3px lch(from var(--c3) l c h / 1));
        opacity: 1;
    }
}

/* right options download */
.tri.t3 .right-options .download {
    width: 68px; height: 50px;
    background: #1e1e1e;
    box-shadow: 
    0 0 1px 0.4px #000a,
    2px 2px 3px 0px #000a,
    inset 0 0 0 1px #000a,
    inset 2px 2px 2px 0 #fffa,
    inset -2px -2px 2px 0 #000a,
    inset -3px -2px 14px 4px #000a;
    position: absolute;
    bottom: 6px; left: 0; right: 0;
    margin: auto;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;

    transition: box-shadow 0.168s ease-in-out;
    cursor: pointer;
    overflow: hidden;
    pointer-events: none;
    .glow {
        position: absolute;
        width: 100%; height: 100%;
        transition: filter 0.2s ease-in-out;
    }
}

body:has(.tri.t2.open) .tri.t3 .right-options .download {
    pointer-events: all;
    &.downloading {
        pointer-events: none;
    }
    .glow {
        filter: 
        drop-shadow( 0 0 1px lch(from var(--c3) l c h / 1))
        drop-shadow( 0 0 3px lch(from var(--c3) l c h / 1));
    }
}
.tri.t3 .right-options .download .ico {
    position: absolute;
    left: 0;right: 0; top: 0; bottom: 0; margin: auto;
    background: var(--c3);
    mask:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect fill='none'/%3E%3Cpath fill='rgba(255,255,255, 1)' d='M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40A8,8,0,0,0,168,96H136V32a8,8,0,0,0-16,0V96H88a8,8,0,0,0-5.66,13.66Z'/%3E%3C/svg%3E");
    mask-composite: exclude;
    -webkit-mask:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect fill='none'/%3E%3Cpath fill='rgba(255,255,255, 1)' d='M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40A8,8,0,0,0,168,96H136V32a8,8,0,0,0-16,0V96H88a8,8,0,0,0-5.66,13.66Z'/%3E%3C/svg%3E");
    -webkit-mask-composite: destination-out;
    mask-size: 38%; mask-repeat: no-repeat; mask-position: 50% 42%;
    transition: opacity 1s ease-in-out, filter 0.2s ease-in-out;
    opacity: 0.2;
}
body:has(.tri.t2.open) .tri.t3 .right-options .download .ico  {
    opacity: 1;
}
.tri.t3 .right-options .download:hover{
    box-shadow: 
    0 0 1px 0.4px #000a,
    1px 1px 2px 0px #000a,
    inset 0 0 0 1px #000a,
    inset 1px 1px 2px 0 #fffa,
    inset -2px -2px 2px 0 #000a,
    inset -3px -2px 14px 4px #000a;
}
.tri.t3 .right-options .download::before {
    content: ''; display: block;
    width: 300%; height: 20px;
    background: linear-gradient(0deg, #fff4, #fff0);
    filter: blur(6px);
    rotate: -42deg;
    position: absolute;
    bottom: 100%; right: -50%;
    transition: all 0.3s ease-out;
}
.tri.t3 .right-options .download:hover::before {
    bottom: -200%;
}

/* right options led text bar */
.led-bar {
    position: absolute;
    left: 120%; top: 0; bottom: 50%; margin: auto;
    height: 272px;
    background: #1e1e1e;
    width: 20px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
    0 0 0 1px #0002,
    1px 1px 2px 0 #000a;

    background-image: radial-gradient(#fff6 1px, transparent 0);
    background-size: 3px 3px;
    background-position: -3px -3px;
}
.text-overlay {
    position: absolute;
    width: 100%; height: 100%;
    top: 0; bottom: 0; left: 0; right: 0;
    background-image: radial-gradient(transparent 1px, #0008 0);
    background-size: 2.6px 2.6px;
    background-position: -2px -2px;
    box-shadow: 
    inset 2px 2px 2px 0 #fffa,
    inset 0 0 1px 4px #000;
}
.led-bar .text{
    position: absolute;
    color: #fff;
    font-size: 16px;
    writing-mode: vertical-lr;
    text-orientation: upright;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: -2px;
    word-spacing: 16px;
    translate: 0 300px;
    text-shadow: 
    0 0 2px #fff,
    0 0 1px #fff;
    padding-left: 1px;
}
@keyframes scroll {
    to { translate: 0 -100%; }
}
.led-bar {
    user-select: none;
    &::before, &::after {
        content: ''; display: block;
        position: absolute;
        left: 0; right: 0;
        margin: auto;
        width: 90%; height: 12px;
        background: linear-gradient( 0deg, transparent, #000);
        backdrop-filter: blur(1px);
        z-index: 1;
    }
    &::before {
        box-shadow: inset 1px 3px 1px -1px #fffb;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    &::after {
        background: linear-gradient( 180deg, transparent, #000);
        bottom: 0;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
}


/* right hazards and ish */
.tri.t3 .right-ish {
    width: 264px;
    height: 100px;
    position: absolute;
    left: 2.2cqi;
    top: 0; bottom: 0; margin: auto 0;
    translate: 0 280px;
}
.tri.t3 .right-ish::before {
    content: ''; display: block;
    width: 100%; height: 100%;
    border: 1px solid #0002;
    box-shadow: 
    -1px -1px 1px 0 #0002,
    1px 1px 1px 1px #fff2,
    inset 0.6px 0.6px 0 0 #0004,
    inset 1px 1px 1px 0 #0001,
    inset -1px -1px 2px 0 #fff2;
    position: absolute;
}
.tri.t3 .right-ish .text-box {
    line-height: 100%;
    left: 36%; top: 51%;
    font-size: 9px;
    height: fit-content; width: fit-content;
    opacity: 0.3;
}
.tri.t3 .right-ish > div{
    position: absolute;
    background-repeat: no-repeat; background-position: 50% 50%; background-size: contain;
    width: 100%; height: 100%; max-height: 100%;
    opacity: 0.2;
}
.tri.t3 .right-ish .barcode{
    opacity: 0.14;
    width: 28%; height: 50%;
    top: 8%; right: 4%;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 502.24 279.68'%3E%3Cpath d='m166.99,279.32h-17.98V.5h17.98v278.82Z' style='stroke-width:0px;'/%3E%3Cpath d='m297.38,279.35h-18.02V.1h18.02v279.24Z' style='stroke-width:0px;'/%3E%3Cpath d='m502.24,279.34h-18.01V.5h18.01v278.84Z' style='stroke-width:0px;'/%3E%3Cpath d='m18.75.34h17.68v278.91c-1.34.11-2.63.31-3.93.32-4.46.04-8.93.01-13.75.01V.34Z' style='stroke-width:0px;'/%3E%3Cpath d='m381.92.34h17.67v278.91c-1.36.12-2.65.31-3.94.32-4.46.04-8.93.02-13.73.02V.34Z' style='stroke-width:0px;'/%3E%3Cpath d='m111.16,279.24h-8.81V.46h8.81v278.78Z' style='stroke-width:0px;'/%3E%3Cpath d='m465.64.42h8.77v278.78h-8.77V.42Z' style='stroke-width:0px;'/%3E%3Cpath d='m8.69.36v278.88H0V.36h8.69Z' style='stroke-width:0px;'/%3E%3Cpath d='m55.98.32h8.49v278.88h-8.49V.32Z' style='stroke-width:0px;'/%3E%3Cpath d='m92.51,279.3h-8.64V.43h8.64v278.88Z' style='stroke-width:0px;'/%3E%3Cpath d='m129.68,279.35h-8.58V.41h8.58v278.94Z' style='stroke-width:0px;'/%3E%3Cpath d='m194.81,279.35h-8.58V.5h8.58v278.85Z' style='stroke-width:0px;'/%3E%3Cpath d='m213.49,279.36h-8.5V.48h8.5v278.88Z' style='stroke-width:0px;'/%3E%3Cpath d='m232.9.36h8.53v278.9h-8.53V.36Z' style='stroke-width:0px;'/%3E%3Cpath d='m269.44,279.3h-8.47V.47h8.47v278.83Z' style='stroke-width:0px;'/%3E%3Cpath d='m307.1,279.05V.75c.74-.23,1.34-.54,1.96-.58q7.23-.45,7.24,6.66c0,88.35,0,176.69,0,265.04q0,8.5-9.2,7.19Z' style='stroke-width:0px;'/%3E%3Cpath d='m335.23.33h8.55v278.93c-1.43.1-2.86.28-4.3.3-1.31.02-2.61-.13-4.26-.23V.33Z' style='stroke-width:0px;'/%3E%3Cpath d='m371.73,279.3h-8.47V.46h8.47v278.84Z' style='stroke-width:0px;'/%3E%3Cpath d='m409.88.33h8.55v278.86h-8.55V.33Z' style='stroke-width:0px;'/%3E%3Cpath d='m446.56.64v278.3c-.74.23-1.34.54-1.96.58q-7.23.45-7.23-6.66c0-88.35,0-176.69,0-265.04q0-8.5,9.2-7.19Z' style='stroke-width:0px;'/%3E%3C/svg%3E");
}
.tri.t3 .right-ish .hazard{
    top: 14%; left: 36%;
    width: 12%; height: 34%;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 447.8 448.11'%3E%3Cpath d='m222.68,448.09c-61.69,0-123.38.05-185.08-.03-22.09-.03-38.97-17.35-37.52-39.09.4-5.93,2.65-12.06,5.34-17.45C65.27,271.47,125.29,151.51,185.28,31.54c2.16-4.32,4.22-8.69,6.62-12.87,14-24.37,48.76-25.07,63.29-.99,6.09,10.09,10.92,20.95,16.21,31.51,57.14,114.15,114.26,228.3,171.37,342.46,9.92,19.82,4.86,40.07-12.56,50.68-7.21,4.39-15.14,5.77-23.45,5.77-61.36-.03-122.72-.01-184.08-.01Zm1.16-16c61.18,0,122.35.04,183.53-.08,4.07,0,8.35-.63,12.18-1.98,9.34-3.3,16.51-16.55,9.09-31.26-48.32-95.82-96.23-191.85-144.27-287.81-13.71-27.37-27.38-54.77-41.13-82.12-4.74-9.43-12.34-13.78-21.71-12.68-8.64,1.01-13.9,6.21-17.64,13.73-24.4,49.01-48.91,97.96-73.39,146.92-36.9,73.81-73.84,147.6-110.66,221.45-1.82,3.65-3.49,7.73-3.8,11.72-1,12.65,8.93,22.08,22.78,22.09,61.68.04,123.35.02,185.03.02Z' style='stroke-width:0px;'/%3E%3Cpath d='m223.71,296.05c-4,0-8.01.13-12-.03-10.04-.42-17.08-6.98-17.73-16.8-2.91-43.72-5.79-87.44-8.52-131.16-.93-14.9,9.51-28.8,24.2-30.93,8.95-1.3,18.37-1.47,27.31-.2,15.94,2.27,26.14,15.41,25.24,31.5-1.68,30.11-3.78,60.19-5.72,90.28-.83,12.8-1.78,25.59-2.5,38.4-.69,12.3-7.41,18.85-19.77,18.95-3.5.03-7,0-10.5,0Zm.21-16c2.83,0,5.7-.28,8.49.06,4.46.55,5.51-1.27,5.76-5.55,1.28-22.61,2.97-45.19,4.45-67.78,1.28-19.44,2.55-38.88,3.66-58.33.55-9.59-5.82-16.24-15.38-16.42-4.33-.08-8.66-.04-12.99-.01-10.82.08-16.96,6.66-16.29,17.44.77,12.3,1.52,24.6,2.32,36.89,1.97,30.07,3.98,60.14,5.9,90.22.16,2.5.97,3.62,3.58,3.51,3.49-.15,7-.04,10.49-.03Z' style='stroke-width:0px;'/%3E%3Cpath d='m191.93,347.91c-.17-17.31,14.12-31.66,31.72-31.83,17.62-.17,32.04,14.07,32.28,31.89.24,17.43-14.39,32.07-32.07,32.09-17.76.02-31.76-14.08-31.93-32.15Zm32.05,16.15c8.66-.05,15.98-7.36,15.93-15.9-.05-8.89-7.5-16.23-16.31-16.07-8.6.16-15.77,7.58-15.63,16.19.14,8.71,7.37,15.83,16.02,15.78Z' style='stroke-width:0px;'/%3E%3C/svg%3E");
}
.tri.t3 .right-ish .recycle{
    top: 14%; left: 52%;
    width: 12%; height: 34%;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 370.26 359.32'%3E%3Cpath d='m159.23,329.81c-24.47,0-48.47-.25-72.46.1-12.74.19-24.1-3.05-33.78-11.21-3.89-3.27-7.66-7.11-10.23-11.44-12.75-21.46-25.09-43.17-37.55-64.81-.41-.71-.68-1.51-1.02-2.29.37-.14.75-.42.92-.33,9.66,5.31,20.06,6.28,30.91,6.21,39-.25,78.01-.1,117.01-.1h6.2v83.85Z' style='stroke-width:0px;'/%3E%3Cpath d='m67.11,90.27c3.59-6.23,6.89-11.99,10.21-17.73,9.42-16.27,18.8-32.56,28.3-48.78C114.11,9.28,127.27,1.14,143.58.52c25.62-.98,51.3-.27,76.95-.25.64,0,1.27.21,1.89.33,0,.46.11.94-.02,1.01-10.09,5.76-16.19,14.87-21.79,24.72-19.24,33.84-38.83,67.48-58.3,101.19-.82,1.42-1.7,2.81-2.83,4.67-24.04-13.92-47.87-27.72-72.38-41.91Z' style='stroke-width:0px;'/%3E%3Cpath d='m253.29,180.45c24.32-14.01,48.1-27.7,72.1-41.53.82,1.19,1.62,2.2,2.26,3.3,11.93,20.59,23.96,41.13,35.71,61.82,9.01,15.86,9.2,32.31.51,48.16-11.68,21.3-24.21,42.13-36.39,63.16-.48.84-1.11,1.59-2.22,3.16-.27-1.94-.49-3.13-.58-4.33-.63-8.11-3.21-15.51-7.31-22.57-20.57-35.4-40.99-70.88-61.46-106.34-.82-1.42-1.56-2.87-2.62-4.83Z' style='stroke-width:0px;'/%3E%3Cpath d='m220.31,234.11v20.28c2.14.1,3.91.24,5.68.25,17.66.07,35.32.19,52.97.09,3.07-.02,4.74.97,6.24,3.64,7.77,13.76,15.79,27.38,23.65,41.09,5.16,8.99,5.87,18.62,3.42,28.49-.42,1.68-1.87,3.56-3.38,4.42-6.89,3.94-14.31,6.05-22.37,6-19.82-.12-39.65-.04-59.47-.04h-6.73v20.82c-.37.06-.73.12-1.1.18-.81-1.16-1.66-2.3-2.42-3.5-11.82-18.52-23.61-37.05-35.44-55.55-1.38-2.15-2.45-3.81-.62-6.63,12.51-19.26,24.77-38.67,37.12-58.03.41-.65.93-1.24,1.4-1.85.35.12.7.23,1.05.35Z' style='stroke-width:0px;'/%3E%3Cpath d='m39.12,138.8c-6.26-3.69-12.06-7.11-17.87-10.54.08-.35.15-.69.23-1.04,7.06-.35,14.11-.73,21.17-1.06,16.47-.77,32.93-1.59,49.41-2.19,1.66-.06,4.28.7,4.91,1.89,11.36,21.42,22.49,42.96,33.04,65.24-5.93-3.41-11.87-6.83-18.15-10.44-1.05,1.66-2.04,3.13-2.93,4.67-8.84,15.25-17.72,30.49-26.43,45.81-1.48,2.6-3.03,3.75-6.16,3.72-16.15-.18-32.31-.04-48.46-.09-10.43-.03-18.88-4.73-26.15-11.76-1.11-1.08-1.75-3.18-1.73-4.8.11-8.3,2.46-15.99,6.67-23.2,10.8-18.52,21.46-37.14,32.46-56.21Z' style='stroke-width:0px;'/%3E%3Cpath d='m292.8,81.69c6.47-3.73,12.36-7.13,19.14-11.04-.68,1.7-.94,2.56-1.35,3.35-10.52,20.22-21,40.46-31.67,60.6-.81,1.54-3.06,3.36-4.59,3.31-23.15-.75-46.29-1.78-69.43-2.77-.79-.03-1.57-.26-3.4-.57,6.6-3.92,12.39-7.36,18.53-11-.89-1.7-1.64-3.29-2.52-4.81-8.83-15.27-17.62-30.57-26.56-45.78-1.48-2.52-1.85-4.4-.21-7.16,8.26-13.87,16.29-27.87,24.3-41.89,5.22-9.13,13.44-14.09,23.16-16.91,1.53-.45,4.01-.22,5.08.76,5.36,4.88,11.55,9.38,15.31,15.36,10.63,16.89,20.21,34.44,30.2,51.73,1.24,2.14,2.5,4.27,3.99,6.82Z' style='stroke-width:0px;'/%3E%3C/svg%3E");
    opacity: 0.4;
}
.tri.t3 .right-ish .global{
    bottom: 14%; right: 2%;
    width: 10%; height: 20%;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='m240,0c10.33,0,20.67,0,31,0,1.45.3,2.89.64,4.34.9,17,2.97,34.62,4.02,50.91,9.21,99.9,31.82,160.49,99.57,181.68,202.32,1.94,9.4,2.74,19.04,4.07,28.57v30c-1.17,9.04-2.03,18.14-3.56,27.12-8.37,48.94-29.02,92.03-62.4,128.8-38.33,42.22-85.44,69.25-141.56,80.09-11.07,2.14-22.31,3.35-33.47,4.98h-30c-9.06-1.15-18.18-1.95-27.17-3.52-62.12-10.82-113.65-40.41-154.26-88.55-29.48-34.95-48.1-75.19-55.71-120.37-1.59-9.47-2.59-19.03-3.86-28.56,0-11,0-22,0-33,.83-6.25,1.56-12.51,2.5-18.74,8.38-55.6,32.3-103.58,71.86-143.43C111.21,38.7,155.47,14.82,206.99,4.92,217.91,2.83,228.99,1.62,240,0Zm27.37,353.65c.82.22,1.29.46,1.76.46,30,.03,60,.01,89.99.11,2.86,0,3.65-1.27,4.09-3.75,2.27-12.61,5.16-25.12,6.96-37.79,7.14-50.35,4.79-100.33-6.58-149.91-.85-3.72-2.17-5.06-6.18-5.04-28.33.2-56.66.1-84.99.12-1.61,0-3.22.16-5.05.26v195.53Zm-24.7.52v-195.97c-.66-.15-.97-.29-1.29-.29-29.48-.03-58.96,0-88.44-.13-3.26-.02-3.66,1.7-4.26,4.17-7.43,30.73-10.85,61.91-10.86,93.51-.01,31.93,3.24,63.46,10.79,94.52.58,2.38.87,4.27,4.21,4.26,29.81-.12,59.62-.07,89.85-.07Zm-118.39-.25c-14.05-65.38-14.07-130.47.05-195.62-1.09-.2-1.73-.43-2.37-.43-24.33-.02-48.67-.1-73,.14-1.62.02-3.97,2.12-4.7,3.81-27.07,62.6-27.26,125.28-.36,188.03,1.39,3.25,3.03,4.43,6.6,4.4,23-.17,46-.08,69-.1,1.47,0,2.93-.14,4.78-.24Zm263.36-195.82c14.06,65.37,14.15,130.45.02,195.6,1.07.21,1.71.44,2.35.44,24.33.02,48.66.1,72.99-.13,1.62-.02,4-2.1,4.72-3.78,27.1-62.61,27.03-125.3.37-188.06-1.39-3.26-3.01-4.44-6.58-4.41-23,.17-45.99.08-68.99.1-1.47,0-2.93.14-4.87.24Zm-120.24-25.06h88.36c-5.93-13.42-10.97-26.27-17.15-38.55-10.5-20.87-23.98-39.59-43.17-53.52-8.36-6.07-17.51-10.55-28.03-12.43v104.5Zm-.04,350.47c2.03-.48,3.8-.82,5.51-1.32,13.23-3.92,24.36-11.36,34.18-20.84,18.67-18.03,31.08-40.13,40.94-63.83,2.51-6.03,4.66-12.21,7.09-18.62h-87.73v104.61ZM242.91,28.89c-13.29,3.09-24.33,9.66-34.2,18.31-18.41,16.13-30.92,36.48-40.93,58.48-4.1,9.01-7.48,18.34-11.3,27.8h86.42V28.89Zm-86.84,349.94c5.81,13.2,10.82,25.86,16.87,37.99,10.42,20.9,23.83,39.63,42.82,53.78,8.06,6,16.86,10.5,27.09,12.35v-104.13h-86.77Zm28,97.9c-.36-1.31-.35-1.71-.55-1.92-24.96-26.32-40.21-58.05-51.17-92.12-1.09-3.4-2.65-4.28-5.99-4.26-20.65.14-41.3.06-61.96.09-1.4,0-2.81.24-5.16.45,30.65,47.26,71.63,79.65,124.82,97.76Zm143.48-.53c53.02-17.4,94.45-49.76,125.39-97.69-3.12,0-4.92,0-6.72,0-19.83,0-39.66.15-59.48-.12-4.47-.06-6.29,1.35-7.65,5.55-11,34.09-26.61,65.64-51.54,92.26ZM184.61,35.74c-53.12,17.62-94.72,49.78-125.28,97.23,1.64.28,2.29.48,2.94.48,21.81.02,43.62-.03,65.43.09,3.11.02,3.67-1.72,4.59-4.06,5.58-14.22,10.71-28.66,17.22-42.44,8.91-18.86,20.58-36.06,35.09-51.29Zm268.03,97.45c-30.82-47.55-72.2-79.95-125.18-97.47,2.81,3.79,6.05,7.12,8.99,10.7,20.07,24.41,33.32,52.41,42.85,82.3,1.14,3.59,2.77,4.91,6.65,4.87,20.33-.21,40.66-.09,60.99-.11,1.59,0,3.19-.16,5.7-.29Z' style='stroke-width:0px;'/%3E%3C/svg%3E");
    opacity: 0.1;
}
.tri.t3 .right-ish .qr{
    opacity: 0.3;
    top: 14%; left: 4%;
    width: 30%; height: 72%;
    background-image: url("https://assets.codepen.io/3421562/qr-codepen-io.svg");
}

/* interactive dynamic units */
#unitContainer {
    display: flex; gap: 2cqi;
    justify-content: center;
    width: 100%;
    
    --block-sz: 2cqi;
    --br: calc( var(--block-sz) / 2);
    --sbr: 50%;
}
#unitContainer.bgtrans *:before{ background: transparent !important; }
#unitContainer.bgwhite *:before{ background: #fff !important; }
#unitContainer.bgblack *:before{ background: #000 !important; }
.unit {
    display: grid;
    
    grid-template-columns: repeat(5, var(--block-sz));
    grid-template-rows: repeat(6, var(--block-sz));
    
}
.unit > div {
    width: var(--block-sz); height: var(--block-sz);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.unit > div::before { transition: border-radius 0.4s ease-in-out; }
.unit > div.fill:hover,
.unit > div:not(.fill):hover::before {
    box-shadow: 
    0 0 0 0.4cqi var(--c1),
    inset 0 0 0 0.4cqi var(--c1);
    border: 2px solid var(--c3);
    cursor: pointer;
}
.unit > div:hover,
.unit > div:hover::before {
    z-index: 2;
}
.unit > div.fill {
    background: var(--c2);
    border-top-left-radius: var(--br);
    border-top-right-radius: var(--br);
    border-bottom-left-radius: var(--br);
    border-bottom-right-radius: var(--br);
}
.sharp .unit > div.fill {
    border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}

/* FILL CHECKS */
$columns: 5; $rows: 7;
@mixin fill-check($offset, $direction, $exclude-x: null) {
  @for $i from 1 through ($columns * $rows) {
    .unit div.fill:nth-child(#{$i}) {
      @if $direction == top-right {
        ~ div.fill:nth-child(#{$i + $offset}):not([data-x="#{$exclude-x}"]) {
            border-top-right-radius: 0;
        }
    } @else if $direction == top-left {
        ~ div.fill:nth-child(#{$i + $offset}):not([data-x="#{$exclude-x}"]) {
            border-top-left-radius: 0;
        }
    } @else if $direction == bottom-right {
        &:has(~ div:nth-child(#{$i + $offset}).fill):not([data-x="#{$exclude-x}"]) {
            border-bottom-right-radius: 0;
        }
    } @else if $direction == bottom-left {
        &:has(~ div:nth-child(#{$i + $offset}).fill):not([data-x="#{$exclude-x}"]) {
            border-bottom-left-radius: 0;
        }
    } @else if $direction == top {
        ~ div.fill:nth-child(#{$i + $offset}) {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    } @else if $direction == bottom {
        &:has(~ div:nth-child(#{$i + $offset}).fill) {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
    }
  }
}
@include fill-check($columns + 1, top-left, 1);
@include fill-check($columns - 1, top-right, $columns);
@include fill-check($columns, top);
@include fill-check($columns, bottom);
@include fill-check($columns + 1, bottom-right, $columns);
@include fill-check($columns - 1, bottom-left, 1);
/* checks left - exclude 5th column */
.unit div.fill:not([data-x="#{$columns}"]):has(+ .fill) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/* checks right - exclude 1st column */
.unit div.fill:not([data-x="#{$columns}"]):has(+ .fill) + .fill{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ------------- */
/* NOFILL CHECKS */
.unit > div:not(.fill){
    background: var(--c2);
}
.unit > div:not(.fill)::before{
    content: ''; display: block;
    width: 100%; height: 100%;
    background: var(--c1);
}
/* nofill top right corner */
@for $i from 1 through ($columns * $rows) {
    .unit:has( div.fill:nth-child(#{$i - $columns})):has( div.fill:nth-child(#{$i + 1})) div:not(.fill):not([data-x="5"]):nth-child(#{$i})::before {
        border-top-right-radius: var(--sbr);
    }
}
/* nofill top left corner */
@for $i from 1 through ($columns * $rows) {
    .unit:has( div.fill:nth-child(#{$i - $columns})):has( div.fill:nth-child(#{$i - 1})) div:not(.fill):not([data-x="1"]):nth-child(#{$i})::before {
        border-top-left-radius: var(--sbr);
    }
}
/* nofill bottom right corner */
@for $i from 1 through ($columns * $rows) {
    .unit:has( div.fill:nth-child(#{$i + $columns})):has( div.fill:nth-child(#{$i + 1})) div:not(.fill):not([data-x="5"]):nth-child(#{$i})::before {
        border-bottom-right-radius: var(--sbr);
    }
}
/* nofill bottom left corner */
@for $i from 1 through ($columns * $rows) {
    .unit:has( div.fill:nth-child(#{$i + $columns})):has( div.fill:nth-child(#{$i - 1})) div:not(.fill):not([data-x="1"]):nth-child(#{$i})::before {
        border-bottom-left-radius: var(--sbr);
    }
}
View Compiled
const rafa3l = {
    0: ["XXX__","X__X_","XXX__","X__X_","X__X_","X__XX"],
    1: ["_XXX_","X___X","____X","_XXXX","X___X","_XX_X"],
    2: ["_XXXX","X___X","XXX__","X____","X____","X____"],
    3: ["_XXX_","X___X","____X","_XXXX","X___X","_XX_X"],
    4: ["_XXX_","X___X","__XX_","____X","X___X","_XXX_"],
    5: ["XX___","_X___","_X___","_X___","_X__X","XXXXX"]
};
const cod3p3n = {
    0: ["_XXX_","XXX_X","XXX__","XXX_X","XXXXX","_XXX_"],
    1: ["_XXX_","XX_XX","XX_XX","XX_XX","XX_XX","_XXX_"],
    2: ["XXXX_","XX_XX","XX_XX","XX_XX","XX_XX","XXXX_"],
    3: ["_XXXX","XX__X","XXX__","XX__X","XXXXX","XXXXX"],
    4: ["XXXX_","XX_XX","XX_XX","XXXX_","XX___","XX___"],
    5: ["_XXXX","XX__X","XXX__","XX__X","XXXXX","XXXXX"],
    6: ["_XXX_","XXXXX","XX_XX","XX_XX","XX_XX","XX_XX"]
};
const block = [ "XXXXX","XXXXX","XXXXX","XXXXX","XXXXX","XXXXX"];

/* ///////////////////////////////////////////////////// */
/* Logo unit builder */
/* ///////////////////////////////////////////////////// */
function createUnits(containerId, n, fillUnits) {
    const container = document.getElementById(containerId);
    container.innerHTML = "";
    for (let i = 0; i < n; i++) {
        const unit = document.createElement("div");
        unit.classList.add("unit");
        const layout = fillUnits[i] || [];
        layout.forEach((row, y) => {
            [...row].forEach((cell, x) => {
                const block = document.createElement("div");
                block.setAttribute("data-x", x + 1);
                block.setAttribute("data-y", y + 1);
                if (cell === "X") {
                    block.classList.add("fill");
                }
                unit.appendChild(block);
            });
        });
        container.appendChild(unit);
    }
}
createUnits('unitContainer', Object.keys(cod3p3n).length, cod3p3n );
document.addEventListener('click', (e) => {
    if (e.target.matches('.unit div')) {
        e.target.classList.toggle('fill');
    }
});


/* ///////////////////////////////////////////////////// */
/* Button handling */
/* ///////////////////////////////////////////////////// */
const resetBtn = document.querySelector(".reset");
let blocks = block;
document.querySelector(".smooth-sharp").addEventListener('click', () => {
    document.querySelector('#unitContainer').classList.toggle('sharp');
});
document.querySelector(".add-spot").addEventListener('click', () => {
    if (resetBtn.dataset.blocks < 8) {
        resetBtn.dataset.blocks++;
    }
});
document.querySelector(".remove-spot").addEventListener('click', () => {
    if (resetBtn.dataset.blocks > 1) {
        resetBtn.dataset.blocks--;
    }
});
resetBtn.addEventListener('click', () => {
    const numBlocks = parseInt(resetBtn.dataset.blocks, 10);
    const blocks = Array.from({ length: numBlocks }, () => block);
    createUnits('unitContainer', numBlocks , blocks );
});
document.querySelector(".rafa3l").addEventListener('click', () => {
    resetBtn.dataset.blocks = 6;
    createUnits('unitContainer', Object.keys(rafa3l).length, rafa3l );
});
document.querySelector(".codepen").addEventListener('click', () => {
    resetBtn.dataset.blocks = 7;
    createUnits('unitContainer', Object.keys(cod3p3n).length, cod3p3n );
});


const downloadBtn = document.querySelector('#downloadBtn');
const ledBarText = document.querySelector('.led-bar .text');
document.getElementById('downloadBtn').addEventListener('click', () => {
    ledBarText.innerHTML = 'Downloading  ---  Please Wait  ---  ';
    ledBarText.style.translate = '0 300px';
    ledBarText.style.animation = 'scroll 10s linear infinite';
    downloadBtn.classList.add('downloading');
    
    const container = document.getElementById('unitContainer');
    const clone = container.cloneNode(true);
    clone.style.position = 'absolute';
    clone.style.top = '-9999px';
    document.body.appendChild(clone);
    clone.style.background = 'transparent';
    clone.classList.add('bgwhite');
    const units = clone.querySelectorAll('.unit > div')
    units.forEach(unit => {
        unit.style.background = '#000';
    });

    html2canvas(clone, { scale: 14 }).then(canvas => {
        document.body.removeChild(clone);
        const reduceScaleFactor = 2;
        const resizedCanvas = document.createElement('canvas'); const context = resizedCanvas.getContext('2d');
        const targetWidth = canvas.width / reduceScaleFactor; const targetHeight = canvas.height / reduceScaleFactor;
        resizedCanvas.width = targetWidth; resizedCanvas.height = targetHeight;
        context.drawImage(canvas, 0, 0, targetWidth, targetHeight);
        const imageData = context.getImageData(0, 0, targetWidth, targetHeight);
        const pixels = imageData.data; const threshold = 128;
        for (let i = 0; i < pixels.length; i += 4) {
            const grayscale = 0.299 * pixels[i] + 0.587 * pixels[i + 1] + 0.114 * pixels[i + 2];
            const value = grayscale > threshold ? 255 : 0;
            pixels[i] = value;
            pixels[i + 1] = value;
            pixels[i + 2] = value;
        }
        context.putImageData(imageData, 0, 0);
        resizedCanvas.toBlob(blob => {
            const link = document.createElement('a');
            link.download = 'logo-factory_by_rafa3l.jpg';
            link.href = URL.createObjectURL(blob);
            link.click();

            ledBarText.innerHTML = 'Download  Done';
            setTimeout(() => {
                ledBarText.innerHTML = '';
            }, 5000);
            ledBarText.style.animation = 'none';
            ledBarText.style.translate = '0 16px';
            downloadBtn.classList.remove('downloading');
        }, 'image/jpeg', 0.2);
    });
});


/* ///////////////////////////////////////////////////// */
/* electrodes script */
/* ///////////////////////////////////////////////////// */
var particleLength   = 224;     // Length of particle
var turnProbability  = 0.024;   // Turning probability
var maxParticles     = 6;       // Max particles
var particleWidth    = 1;       // Width of particle
var particleLifespan = 3200;    // Lifespan of particle
var particleSpeed    = 80;      // Speed in pixels/second
/* ///////////////////////////////////////////////////// */
var electrodes = document.getElementById('electrodes');
var canvas = document.createElement('canvas');
canvas.style.position = 'absolute'; canvas.style.top = '0'; canvas.style.left = '0';
electrodes.appendChild(canvas);
function resizeCanvas() { canvas.width = electrodes.offsetWidth; canvas.height = electrodes.offsetHeight; }
resizeCanvas();
var particleSpawnInterval = particleLifespan / maxParticles;
var lastParticleSpawnTime = Date.now();
var directions = { 'down': {x: 0, y: 1}, 'left': {x: -1, y: 0}, 'right': {x: 1, y: 0}};
function Particle() {
    this.x = Math.random() * canvas.width; this.y = 0;
    this.direction = 'down';
    this.path = [{x: this.x, y: this.y}];
    this.birthTime = Date.now();
    this.length = particleLength;
    this.width = particleWidth;
    this.speed = particleSpeed;
    this.dead = false;
}
Particle.prototype.update = function(deltaTime) {
    if (Math.random() < turnProbability) {
        var turns = ['left', 'right', 'down'];
        if (this.direction === 'left') { turns = turns.filter(dir => dir !== 'right');
        } else if (this.direction === 'right') { turns = turns.filter(dir => dir !== 'left');}
        this.direction = turns[Math.floor(Math.random() * turns.length)];
    }
    var distance = this.speed * (deltaTime / 1000);
    this.x += directions[this.direction].x * distance; this.y += directions[this.direction].y * distance;
    this.x = Math.max(0, Math.min(this.x, canvas.width)); this.y = Math.min(this.y, canvas.height);
    this.path.push({x: this.x, y: this.y});
    if (this.path.length > this.length) { this.path.shift(); }
    var age = Date.now() - this.birthTime;
    if (age >= particleLifespan) { this.dead = true;
    } else { this.opacity = 1 - age / particleLifespan; }
};
Particle.prototype.draw = function(ctx) {
    if (this.path.length < 2) return;

    ctx.lineWidth = this.width;

    for (var i = 1; i < this.path.length; i++) {
        var segmentOpacity = this.opacity * (i / this.path.length);
        ctx.strokeStyle = 'rgba(255, 255, 255,' + segmentOpacity + ')';

        ctx.beginPath();
        ctx.moveTo(this.path[i - 1].x, this.path[i - 1].y);
        ctx.lineTo(this.path[i].x, this.path[i].y);
        ctx.stroke();
    }
};
var particles = []; var lastTime = Date.now();
function animate() {
    var now = Date.now(); var deltaTime = now - lastTime;
    lastTime = now; var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = particles.length - 1; i >= 0; i--) {
        particles[i].update(deltaTime);
        particles[i].draw(ctx);
        if (particles[i].dead) { particles.splice(i, 1); }
    }
    if (now - lastParticleSpawnTime >= particleSpawnInterval && particles.length < maxParticles) {
        particles.push(new Particle()); lastParticleSpawnTime = now;
    }
    requestAnimationFrame(animate);
}
let resizeTimeout;
window.addEventListener('resize', () => {
    canvas.style.transition = 'opacity 0s'; canvas.style.opacity = '0'; clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(() => {
        resizeCanvas();
        canvas.style.transition = 'opacity 1s ease-in 0.6s'; canvas.style.opacity = '1';
        particles.forEach(particle => {
            particle.x = Math.random() * canvas.width; particle.y = Math.random() * canvas.height * 0.5;
        });
    }, 200);
}); 
animate();

/* ///////////////////////////////////////////////////// */
/* active ring animation */
/* ///////////////////////////////////////////////////// */
document.addEventListener("DOMContentLoaded", () => {
    const ring = document.querySelector(".ring");
    const dotCount = parseInt(ring.getAttribute("data-count"), 10);
    const dotSize = parseInt(ring.getAttribute("data-size"), 10);
    const radius = parseInt(ring.getAttribute("data-radius"), 10);
    const vertical = parseInt(ring.getAttribute("data-vertical"), 10);
    const time = ring.getAttribute("data-time");

    const opTarget = 0.2;
    const szTarget = 0.8;
    const vertTarget = 0.8;
    
    for (let i = 0; i < dotCount; i++) {
        const angle = (i / dotCount) * 2 * Math.PI;
        const x = Math.cos(angle) * radius;
        const y = Math.sin(angle) * radius;
        
        const dot = document.createElement("div");
        dot.className = "dot";
        dot.style.transform = `translate(${x}px, ${y / 12}px)`;
        dot.style.width = `${dotSize}px`;
        dot.style.height = `${dotSize}px`;
        dot.style.animation = `vert ${time}s ease-in-out infinite`;
        dot.style.animationDelay = `${(i / dotCount) * (-1 * time ) * 2}s`;
        dot.style.setProperty('--vert', `${vertical}px`);
        
        let p;
        if (i >= dotCount / 2) {
            const norm = (i - dotCount / 2) / (dotCount / 2);
            p = norm <= 0.5 ? 1 - 2 * norm : (2 * norm - 1);
        } else { p = 1; }

        dot.style.opacity = `${opTarget + p * (1 - opTarget)}`;
        dot.style.width = `${dotSize * (szTarget + p * (1 - szTarget))}px`;
        dot.style.height = `${dotSize * (szTarget + p * (1 - szTarget))}px`;
        dot.style.setProperty('--vert', `${vertical * (vertTarget + p * (1 - vertTarget))}px`);

        ring.appendChild(dot);
    }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.