Desktop Fan

Open In Editor Publish Your Code

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<input type="radio" class="sr-only" name="fan" id="zero" />
    <input type="radio" class="sr-only" name="fan" id="one" checked="true" />
    <input type="radio" class="sr-only" name="fan" id="two" />
    <input type="radio" class="sr-only" name="fan" id="three" />
    <input type="checkbox" id="rotate"  class="sr-only" />
    <div class="scene">
      <div class="fan">
        <div class="fan__base">
          <div class="cuboid base">
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
          </div>
        </div>
        <div class="fan__controls">
          <label class="fan__control" for="zero">
            <div class="cuboid control">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </label>
          <label class="fan__control" for="one">
            <div class="cuboid control">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </label>
          <label class="fan__control" for="two">
            <div class="cuboid control">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </label>
          <label class="fan__control" for="three">
            <div class="cuboid control">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </label>
        </div>
        <div class="fan__spine">
          <div class="cuboid spine">
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
          </div>
        </div>
        <div class="fan__head">
          <div class="fan__rotater">
            <div class="cuboid rotater">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
            <label for="rotate" class="fan__stalk">
              <div class="cuboid stalk">
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
              </div>
            </label>
          </div>
          <div class="fan__barrel">
            <div class="cuboid barrel">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </div>
          <div class="fan__housing">
            <div class="fan__housing-rear"></div>
            <div class="fan__blades">
              <div class="fan__blade"></div>
              <div class="fan__blade"></div>
              <div class="fan__blade"></div>
            </div>
            <div class="fan__housing-front">
              <svg
                viewBox="0 0 1090 932"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M255 291.5C255 350.35 210.559 397 157 397C103.441 397 59 350.35 59 291.5C59 232.65 103.441 186 157 186C210.559 186 255 232.65 255 291.5Z"
                  fill="#AF7128"
                  stroke="black"
                  stroke-width="18"
                />
                <path
                  d="M352.695 357.498C429.154 315.051 522.19 269.06 614.556 237.41C707.188 205.668 797.9 188.796 870.259 203.243C917.465 212.668 969.649 233.978 1019.57 259.265C1065.5 282.529 1084.26 325.237 1079.87 367.006C1075.47 408.966 1047.62 450.217 999.25 469.47L562.8 643.185C521.196 659.745 474.07 654.428 437.201 629.016L347.561 567.231C270.288 513.971 271.798 402.409 352.695 357.498Z"
                  fill="#FB0000"
                  stroke="black"
                  stroke-width="18"
                />
                <path
                  d="M882.496 439.605V439.906V440.207V440.511V440.816V441.123V441.432V441.743V442.055V442.369V442.684V443.001V443.32V443.64V443.963V444.286V444.612V444.939V445.268V445.598V445.93V446.264V446.599V446.936V447.274V447.614V447.956V448.299V448.643V448.99V449.338V449.687V450.038V450.391V450.745V451.101V451.458V451.816V452.177V452.538V452.902V453.267V453.633V454.001V454.37V454.741V455.113V455.487V455.862V456.238V456.617V456.996V457.377V457.76V458.143V458.529V458.915V459.304V459.693V460.084V460.477V460.87V461.265V461.662V462.06V462.459V462.86V463.262V463.665V464.07V464.476V464.884V465.292V465.703V466.114V466.527V466.941V467.356V467.773V468.191V468.61V469.031V469.453V469.876V470.3V470.726V471.153V471.581V472.01V472.441V472.873V473.306V473.74V474.176V474.613V475.051V475.49V475.93V476.372V476.815V477.259V477.704V478.15V478.598V479.046V479.496V479.947V480.399V480.852V481.307V481.762V482.219V482.677V483.135V483.595V484.056V484.518V484.982V485.446V485.911V486.378V486.845V487.314V487.784V488.254V488.726V489.199V489.673V490.147V490.623V491.1V491.578V492.057V492.537V493.018V493.499V493.982V494.466V494.951V495.437V495.923V496.411V496.9V497.389V497.88V498.371V498.864V499.357V499.851V500.346V500.842V501.339V501.837V502.336V502.836V503.336V503.837V504.34V504.843V505.347V505.852V506.357V506.864V507.371V507.879V508.388V508.898V509.409V509.92V510.432V510.945V511.459V511.974V512.489V513.005V513.522V514.04V514.558V515.077V515.597V516.118V516.639V517.161V517.684V518.208V518.732V519.257V519.783V520.309V520.836V521.364V521.893V522.422V522.952V523.482V524.013V524.545V525.077V525.61V526.144V526.678V527.213V527.749V528.285V528.822V529.359V529.897V530.436V530.975V531.515V532.055V532.596V533.138V533.68V534.222V534.765V535.309V535.853V536.398V536.943V537.489V538.035V538.582V539.129V539.677V540.225V540.774V541.324V541.873V542.423V542.974V543.525V544.077V544.629V545.181V545.734V546.288V546.842V547.396V547.95V548.505V549.061V549.617V550.173V550.729V551.286V551.844V552.402V552.96V553.518V554.077V554.636V555.196V555.756V556.316V556.876V557.437V557.998V558.56V559.122V559.684V560.246V560.809V561.372V561.935V562.498V563.062V563.626V564.19V564.755V565.32V565.885V566.45V567.015V567.581V568.147V568.713V569.279V569.846V570.413V570.98V571.547V572.114V572.681V573.249V573.817V574.385V574.953V575.521V576.089V576.658V577.226V577.795V578.364V578.933V579.502V580.071V580.641V581.21V581.779V582.349V582.919V583.488V584.058V584.628V585.198V585.768V586.337V586.907V587.477V588.047V588.618V589.188V589.758V590.328V590.898V591.468V592.038V592.608V593.178V593.748V594.318V594.888V595.457V596.027V596.597V597.167V597.736V598.306V598.875V599.444V600.014V600.583V601.152V601.721V602.29V602.858V603.427V603.995V604.564V605.132V605.7V606.268V606.836V607.403V607.971V608.538V609.105V609.672V610.238V610.805V611.371V611.937V612.503V613.069V613.634V614.199V614.764V615.329V615.893V616.457V617.021V617.585V618.148V618.711V619.274V619.837V620.399V620.961V621.523V622.084V622.645V623.206V623.766V624.326V624.886V625.446V626.005V626.563V627.122V627.68V628.237V628.795V629.351V629.908V630.464V631.02V631.575V632.13V632.684V633.238V633.792V634.345V634.898V635.45V636.002V636.554V637.105V637.655V638.205V638.755V639.304V639.853V640.401V640.948V641.496V642.042V642.588V643.134V643.679V644.224V644.768V645.311V645.854V646.397V646.938V647.48V648.02V648.56V649.1V649.639V650.177V650.715V651.252V651.789V652.325V652.86V653.395V653.929V654.463V654.996V655.528V656.059V656.59V657.12V657.65V658.179V658.707V659.235V659.762V660.288V660.813V661.338V661.862V662.385V662.908V663.43V663.951V664.472V664.991V665.51V666.028V666.546V667.062V667.578V668.093V668.608V669.121V669.634V670.146V670.657V671.167V671.677V672.186V672.694V673.201V673.707V674.212V674.717V675.22V675.723V676.225V676.726V677.226V677.726V678.224V678.722V679.218V679.714V680.209V680.703V681.196V681.688V682.179V682.669V683.159V683.647V684.134V684.621V685.106V685.591V686.074V686.557V687.038V687.519V687.998V688.477V688.954V689.431V689.906V690.381V690.854V691.327V691.798V692.268V692.738V693.206V693.673V694.139V694.604V695.068V695.531V695.993C882.496 715.563 872.833 733.805 856.625 744.69C793.852 786.849 724.55 831.542 656.981 865.688C589.222 899.931 524.312 922.979 470.071 923C369.613 921.316 275.169 869.033 196.676 821.31C180.836 811.679 167.029 803.482 154.782 796.211C116.453 773.454 93.3971 759.766 71.0944 739.595C55.3337 725.34 46.4864 704.824 44.8225 682.887C39.5155 612.925 39.0594 506.082 47.7392 436.444C50.6305 413.246 64.7562 393.018 84.9954 379.671C127.019 351.957 173.711 323.117 231.812 291.4C350.06 226.847 395.095 206.124 469.328 206.001C554.284 218.836 644.314 258.587 719.138 301.651C794.257 344.886 852.911 390.793 874.987 414.793C880.462 420.746 882.496 429.139 882.496 439.605Z"
                  fill="#AF7128"
                  stroke="black"
                  stroke-width="18"
                />
                <circle cx="403" cy="736" r="35" fill="black" />
                <path
                  d="M35 613C44.2826 613 53.185 609.313 59.7487 602.749C66.3125 596.185 70 587.283 70 578C70 568.717 66.3125 559.815 59.7487 553.251C53.185 546.687 44.2826 543 35 543L35 578L35 613Z"
                  fill="black"
                />
                <ellipse
                  cx="197.29"
                  cy="714.273"
                  rx="57.5551"
                  ry="35.3134"
                  transform="rotate(20.5555 197.29 714.273)"
                  fill="black"
                />
                <path
                  d="M108.342 465.73L361.48 568.814L341.869 616.974L88.7301 513.89L108.342 465.73Z"
                  fill="#FF1818"
                  stroke="black"
                  stroke-width="18"
                />
                <path
                  d="M304.747 619.11L296.504 579.96C296.4 577.811 296.297 575.621 296.194 573.4C296.068 570.698 295.939 567.949 295.801 565.168C295.086 550.722 294.115 535.479 291.698 523.178C290.492 517.036 288.833 511.117 286.382 506.212C284.007 501.46 280.322 496.546 274.481 494.199C258.375 487.054 233.249 477.776 210.557 469.598C203.973 467.226 197.616 464.953 191.725 462.847C176.93 457.557 165.074 453.318 159.955 451.19C157.07 449.99 153.926 449.645 150.781 450.38C147.758 451.086 145.319 452.652 143.441 454.333C139.866 457.531 137.235 462.132 135.2 466.528C131.046 475.504 127.524 487.899 124.317 499.335C124.181 499.822 124.045 500.307 123.909 500.791C120.727 512.143 117.817 522.526 114.706 529.802C113.647 532.279 112.731 533.981 112.014 535.085C106.388 532.464 95.3982 526.975 83.434 520.585C69.2417 513.005 54.4279 504.554 46.0161 498.52C43.0728 496.409 41.2292 492.512 41.08 486.602C40.2874 455.198 47.9142 380.509 58.8834 327.131C63.9261 302.592 81.7741 282.911 105.444 271.498C140.523 254.583 175.867 237.753 229.766 217.628C348.073 173.455 393.61 159.058 468.797 159C549.656 167.328 634.92 192.216 707.361 219.857C779.989 247.57 839.097 277.807 867.409 296.332C877.427 302.887 882.001 314.432 882.001 328.759V329.041V329.324V329.608V329.893V330.179V330.466V330.755V331.044V331.335V331.626V331.919V332.213V332.507V332.803V333.1V333.398V333.697V333.997V334.298V334.6V334.903V335.207V335.512V335.819V336.126V336.434V336.743V337.053V337.364V337.676V337.989V338.303V338.618V338.934V339.251V339.569V339.888V340.208V340.529V340.85V341.173V341.496V341.821V342.146V342.473V342.8V343.128V343.457V343.787V344.117V344.449V344.782V345.115V345.449V345.785V346.121V346.457V346.795V347.134V347.473V347.813V348.155V348.496V348.839V349.183V349.527V349.872V350.218V350.565V350.913V351.261V351.61V351.96V352.311V352.663V353.015V353.368V353.722V354.076V354.432V354.788V355.145V355.502V355.861V356.22V356.579V356.94V357.301V357.663V358.026V358.389V358.753V359.118V359.483V359.849V360.216V360.583V360.951V361.32V361.69V362.06V362.43V362.802V363.174V363.546V363.92V364.294V364.668V365.043V365.419V365.795V366.172V366.55V366.928V367.307V367.686V368.066V368.447V368.828V369.21V369.592V369.975V370.358V370.742V371.126V371.511V371.897V372.283V372.669V373.056V373.444V373.832V374.221V374.61V375V375.39V375.78V376.171V376.563V376.955V377.348V377.741V378.134V378.528V378.922V379.317V379.713V380.108V380.504V380.901V381.298V381.695V382.093V382.492V382.89V383.289V383.689V384.089V384.489V384.889V385.29V385.692V386.094V386.496V386.898V387.301V387.704V388.108V388.512V388.916V389.321V389.725V390.131V390.536V390.942V391.348V391.755V392.161V392.568V392.976V393.384V393.791V394.2V394.608V395.017V395.426V395.835V396.245V396.655V397.065V397.475V397.885V398.296V398.707V399.118V399.53V399.941V400.353V400.765V401.178V401.59V402.003V402.415V402.828V403.242V403.655V404.069V404.482V404.896V405.31V405.724V406.139V406.553V406.968V407.382V407.797V408.212V408.627V409.042V409.458V409.873V410.289V410.704V411.12V411.536V411.952V412.368V412.784V413.2V413.616V414.032V414.448V414.865V415.281V415.697V416.114V416.53V416.947V417.363V417.78V418.196V418.613V419.029V419.446V419.862V420.279V420.695V421.112V421.528V421.945V422.361V422.778V423.194V423.61V424.026V424.443V424.859V425.275V425.691V426.107V426.522V426.938V427.354V427.769V428.185V428.6V429.015V429.431V429.846V430.26V430.675V431.09V431.504V431.919V432.333V432.747V433.161V433.575V433.988V434.402V434.815V435.228V435.641V436.054V436.466V436.879V437.291V437.703V438.115V438.526V438.937V439.348V439.759V440.17V440.58V440.99V441.4V441.81V442.219V442.629V443.037V443.446V443.854V444.262V444.67V445.078V445.485V445.892V446.298V446.705V447.111V447.516V447.922V448.327V448.732V449.136V449.54V449.944V450.347V450.75V451.153V451.555V451.957V452.358V452.76V453.16V453.561V453.961V454.361V454.76V455.159V455.557V455.955V456.353V456.75V457.147V457.543V457.939V458.334V458.729V459.124V459.518V459.912V460.305V460.698V461.09V461.482V461.873V462.264V462.654V463.044V463.434V463.823V464.211V464.599V464.986V465.373V465.759V466.145V466.53V466.915V467.299V467.683V468.066V468.448V468.83V469.211V469.592V469.972V470.352V470.731V471.109V471.487V471.865V472.241V472.617V472.993V473.367V473.742V474.115V474.488V474.861V475.232V475.603V475.974V476.343V476.712V477.081V477.448V477.816V478.182V478.548V478.913V479.277V479.641V480.004V480.366V480.727V481.088V481.448V481.807V482.166V482.524V482.881V483.238V483.593V483.948V484.302V484.656V485.008V485.36V485.711V486.062V486.411V486.76V487.108V487.455V487.802V488.147V488.492V488.836V489.179V489.521V489.863V490.203V490.543V490.882V491.22V491.558V491.894V492.23V492.564V492.898V493.231V493.563V493.894V494.224V494.554V494.882V495.21V495.537V495.862V496.187V496.511V496.834V497.156V497.478V497.798V498.117V498.435V498.753V499.069V499.385V499.699V500.013V500.325V500.637V500.947V501.257V501.565V501.873V502.18V502.485V502.79V503.093V503.396V503.697V503.998V504.297V504.596V504.893V505.189V505.485V505.779V506.072V506.364V506.655V506.945V507.234V507.522V507.808V508.094V508.378V508.662V508.944V509.225V509.505V509.784V510.062V510.339V510.614V510.888V511.162V511.367C880.048 512.426 877.357 513.798 873.943 515.462C865.666 519.496 853.609 525.017 838.672 531.531C808.815 544.551 767.695 561.43 722.767 578.143C677.825 594.862 629.189 611.372 584.272 623.69C539.189 636.053 498.557 643.991 469.306 644C404.957 643.27 359.605 637.295 304.747 619.11ZM110.867 536.539C110.866 536.539 110.872 536.534 110.884 536.525C110.872 536.535 110.867 536.539 110.867 536.539Z"
                  fill="black"
                  stroke="black"
                  stroke-width="18"
                  stroke-linejoin="round"
                />
                <path
                  d="M745 463.5C745 522.35 700.559 569 647 569C593.441 569 549 522.35 549 463.5C549 404.65 593.441 358 647 358C700.559 358 745 404.65 745 463.5Z"
                  fill="#AF7128"
                  stroke="black"
                  stroke-width="18"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

CSS

@import url('https://unpkg.com/normalize.css') layer(normalize);

@layer normalize, base, demo;

@layer demo {
  *,
  *:after,
  *:before {
    transform-style: preserve-3d;
  }

:root {
    --size: 30;
    --width: calc(var(--size) * 1vmin);
    --height: calc(var(--width) * 1.75vmin);
    --blade-speed: 1;
    --rotation: 25;
    --fan-speed: 2;
    --accent: hsl(25 80% 60%);
    --state: running;
    --light: color-mix(in lch, canvas, canvasText 10%);
    --dark: color-mix(in lch, canvasText, canvas 25%);
    --color: light-dark(var(--light), var(--dark));
  }

html {
    color-scheme: light dark;
  }

[data-theme='light'] {
    color-scheme: light only;
  }

[data-theme='dark'] {
    color-scheme: dark only;
  }

body {
    overflow-x: hidden;
    background: light-dark(canvas, canvas);
  }

.fan svg {
    height: 15%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 1px);
    filter: grayscale(1);
    opacity: 0.5;
  }

:root:has(#zero:checked) {
    --blade-speed: 0;
    --state: paused;
  }

:root:has(#one:checked) {
    --blade-speed: 1;
  }

:root:has(#one:checked) .fan__control:nth-of-type(2),
  :root:has(#two:checked) .fan__control:nth-of-type(3),
  :root:has(#three:checked) .fan__control:nth-of-type(4) {
    transition: transform 0.1s cubic-bezier(0, 1.4, 0.2, 1.4);
    transform: translate(0, 50%);
  }

:root:has(#two:checked) {
    --blade-speed: 0.5;
  }

:root:has(#three:checked) {
    --blade-speed: 0.25;
  }

/* 3D Stuff */
  .cuboid {
    width: 100%;
    height: 100%;
    position: relative;
  }

.cuboid__side {
    filter: brightness(var(--b, 1));
  }

.cuboid__side:nth-of-type(1) {
    --b: 1;
    height: calc(var(--thickness) * 1vmin);
    width: 100%;
    position: absolute;
    top: 0;
    transform: translate(0, -50%) rotateX(90deg);
  }

.cuboid__side:nth-of-type(2) {
    --b: 1;
    height: 100%;
    width: calc(var(--thickness) * 1vmin);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%) rotateY(90deg);
  }

.cuboid__side:nth-of-type(3) {
    --b: 0.5;
    width: 100%;
    height: calc(var(--thickness) * 1vmin);
    position: absolute;
    bottom: 0;
    transform: translate(0%, 50%) rotateX(90deg);
  }

.cuboid__side:nth-of-type(4) {
    --b: 0.75;
    height: 100%;
    width: calc(var(--thickness) * 1vmin);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%) rotateY(90deg);
  }

.cuboid__side:nth-of-type(5) {
    --b: 0.9;
    height: 100%;
    width: 100%;
    transform: translate3d(0, 0, calc(var(--thickness) * 0.5vmin));
    position: absolute;
    top: 0;
    left: 0;
  }

.cuboid__side:nth-of-type(6) {
    --bg: 0;
    height: 100%;
    width: 100%;
    transform: translate3d(0, 0, calc(var(--thickness) * -0.5vmin))
      rotateY(180deg);
    position: absolute;
    top: 0;
    left: 0;
  }

/* Sizing */
  :root {
    --width: 30vmin;
    --height: calc(var(--width) * 1.75);
  }

label {
    cursor: pointer;
  }
  .fan__controls label {
    transition: transform 0.1s;
  }

.fan__controls label:hover {
    transform: translate(0, 20%);
  }

.fan__controls label:active {
    transform: translate(0, 40%);
  }

.scene {
    position: absolute;
    height: calc(var(--size) * 1vmin);
    width: calc(var(--size) * 1vmin);
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0vmin) rotateX(-24deg) rotateY(34deg)
      rotateX(90deg);
  }

.fan {
    height: var(--height);
    width: var(--width);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(-90deg)
      rotateX(calc(var(--rotateX, 0) * 1deg))
      rotateY(calc(var(--rotateY, 0) * 1deg));
  }

.fan__base {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    height: 8%;
    width: 80%;
  }

.fan__controls {
    height: 6%;
    width: 50%;
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translate3d(-50%, 0, calc(var(--size) * 0.3vmin));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 6%;
  }

.fan__housing {
    height: 150%;
    width: 150%;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    position: absolute;
    pointer-events: none;
    transform: translate3d(-50%, -50%, calc(var(--size) * 0.45vmin));
  }

.fan__housing-rear,
  .fan__housing-front {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 80%;
    width: 80%;
    border-radius: 50%;
  }

.fan__housing-front {
    transform: translate3d(-50%, -50%, calc(var(--size) * 0.11vmin));
  }

.fan__housing-front:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    height: 35%;
    width: 35%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
  .fan__housing-rear {
    transform: translate3d(-50%, -50%, calc(var(--size) * -0.1vmin));
  }

.fan__head {
    height: calc(var(--size) * 1vmin);
    width: calc(var(--size) * 1vmin);
    position: absolute;
    top: 0;
    left: 0;
    transform: translate3d(0, 0, calc(var(--size) * -0.25vmin));
  }

:root:has(#one:checked, #two:checked, #three:checked):has(#rotate:checked)
    .fan__head {
    --rotate-state: running;
  }

[for='rotate']:hover {
    transform: translate(-50%, -10%);
  }

:root:has(#rotate:checked) [for='rotate'] {
    transform: translate(-50%, 20%);
  }

.fan__head {
    -webkit-animation: fan calc(var(--fan-speed, 1) * 1s)
      calc(var(--fan-speed, 1) * -0.5s) infinite alternate ease-in-out
      var(--rotate-state, paused);
            animation: fan calc(var(--fan-speed, 1) * 1s)
      calc(var(--fan-speed, 1) * -0.5s) infinite alternate ease-in-out
      var(--rotate-state, paused);
  }

.fan__rotater {
    top: 50%;
    width: calc(var(--size) * 0.2vmin);
    height: calc(var(--size) * 0.2vmin);
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
  }

.fan__spine {
    height: 57.5%;
    bottom: 8%;
    width: 20%;
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, 0%, calc(var(--size) * -0.25vmin));
  }

.fan__stalk {
    height: 160%;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0);
    transition: transform 0.2s cubic-bezier(0, 1.4, 0.2, 1.4);
    width: 75%;
    position: absolute;

& > div {
      width: 40%;
      left: 50%;
      translate: -50% 0;
    }
  }

.fan__blades {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 16%;
    width: 16%;
    transform: translate3d(-50%, -50%, -1px) rotate(0deg);
    -webkit-animation: rotate calc(var(--blade-speed, 0) * 1s) infinite linear;
            animation: rotate calc(var(--blade-speed, 0) * 1s) infinite linear;
  }

.fan__blade {
    height: 300%;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50% 0;
    transform: translate(-50%, 0) rotate(calc(var(--rotate, 0) * 1deg));
  }

.fan__blade:nth-of-type(1) {
    --rotate: 0;
  }

.fan__blade:nth-of-type(2) {
    --rotate: calc(360 / 3 * 1);
  }

.fan__blade:nth-of-type(3) {
    --rotate: calc(360 / 3 * 2);
  }

.fan__barrel {
    height: 22.5%;
    width: 22.5%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, calc(var(--size) * 0.3vmin));
  }

.base {
    --thickness: calc(var(--size) * 0.8);
  }

.control {
    --thickness: calc(((var(--size) * 0.5) - ((var(--size) * 0.5) * 0.18)) / 3);
  }

.spine {
    --thickness: calc(var(--size) * 0.2);
  }

.rotater {
    --thickness: calc(var(--size) * 0.2);
  }

.barrel {
    --thickness: calc(var(--size) * 0.4);
  }

.stalk {
    --thickness: calc(var(--size) * 0.05);
  }

/* Colors */
  .fan__housing,
  .fan__housing-rear,
  .fan__housing-front {
    background: color-mix(in lch, var(--color), #0000 70%);
    border: 1vmin solid color-mix(in lch, var(--color), #000 15%);
  }
  .fan__housing-front::after {
    background: color-mix(in lch, var(--color), #000 5%);
  }
  .fan__blade {
    background: linear-gradient(var(--accent), var(--accent)) 50% 95% / 100% 2%
        no-repeat,
      var(--color);
  }
  .base div {
    background: var(--color);
  }
  .control div {
    background: color-mix(in lch, var(--color), #000 10%);
  }

.fan__control:nth-of-type(1) .control div {
    background: var(--accent);
  }
  .spine div {
    background: var(--color);
  }

.rotater div {
    background: var(--color);
  }
  .barrel div {
    background: var(--color);
  }

.stalk div {
    background: var(--accent);
  }

/* Animation */

@-webkit-keyframes fan {
    0%,
    5% {
      transform: translate3d(0, 0, calc(var(--width) * -0.25))
        rotateY(calc(var(--rotation, 0) * 1deg));
    }

95%,
    100% {
      transform: translate3d(0, 0, calc(var(--width) * -0.25))
        rotateY(calc(var(--rotation, 0) * -1deg));
    }
  }

@keyframes fan {
    0%,
    5% {
      transform: translate3d(0, 0, calc(var(--width) * -0.25))
        rotateY(calc(var(--rotation, 0) * 1deg));
    }

95%,
    100% {
      transform: translate3d(0, 0, calc(var(--width) * -0.25))
        rotateY(calc(var(--rotation, 0) * -1deg));
    }
  }

@-webkit-keyframes rotate {
    from {
      transform: translate3d(-50%, -50%, -1px) rotate(0deg);
    }

to {
      transform: translate3d(-50%, -50%, -1px) rotate(360deg);
    }
  }

@keyframes rotate {
    from {
      transform: translate3d(-50%, -50%, -1px) rotate(0deg);
    }

to {
      transform: translate3d(-50%, -50%, -1px) rotate(360deg);
    }
  }
}

@layer base {
  :root {
    --font-size-min: 16;
    --font-size-max: 20;
    --font-ratio-min: 1.2;
    --font-ratio-max: 1.33;
    --font-width-min: 375;
    --font-width-max: 1500;
  }

:where(.fluid) {
    --fluid-min: calc(
      var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
    );
    --fluid-max: calc(
      var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
    );
    --fluid-preferred: calc(
      (var(--fluid-max) - var(--fluid-min)) /
        (var(--font-width-max) - var(--font-width-min))
    );
    --fluid-type: clamp(
      (var(--fluid-min) / 16) * 1rem,
      ((var(--fluid-min) / 16) * 1rem) -
        (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
        (var(--fluid-preferred) * var(--variable-unit, 100vi)),
      (var(--fluid-max) / 16) * 1rem
    );
    font-size: var(--fluid-type);
  }

*,
  *:after,
  *:before {
    box-sizing: border-box;
  }

body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    font-family: 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue',
      Helvetica, Arial, sans-serif, system-ui;
  }

body::before {
    --size: 45px;
    --line: color-mix(in lch, canvasText, transparent 70%);
    content: '';
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: linear-gradient(
          90deg,
          var(--line) 1px,
          transparent 1px var(--size)
        )
        50% 50% / var(--size) var(--size),
      linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
        var(--size) var(--size);
    -webkit-mask: linear-gradient(-20deg, transparent 50%, white);
            mask: linear-gradient(-20deg, transparent 50%, white);
    top: 0;
    transform-style: flat;
    pointer-events: none;
    z-index: -1;
  }

.bear-link {
    color: canvasText;
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: 48px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    opacity: 0.8;
  }

:where(.x-link, .bear-link):is(:hover, :focus-visible) {
    opacity: 1;
  }

.bear-link svg {
    width: 75%;
  }

/* Utilities */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS