Skip to content

Instantly share code, notes, and snippets.

@thecrypticace

thecrypticace/index.html

Created May 19, 2022 23:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save thecrypticace/4a7944fcbe711114300597004059abe9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save thecrypticace/4a7944fcbe711114300597004059abe9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. thecrypticace created this gist May 19, 2022.
    39 changes: 39 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    <meta charset="utf-8">

    <style>
    .square-root {
    --n: 0;
    --guess-0: 1;
    --guess-1: calc(0.5 * calc(var(--guess-0) + calc(var(--n) / var(--guess-0))));
    --guess-2: calc(0.5 * calc(var(--guess-1) + calc(var(--n) / var(--guess-1))));
    --guess-3: calc(0.5 * calc(var(--guess-2) + calc(var(--n) / var(--guess-2))));
    --guess-4: calc(0.5 * calc(var(--guess-3) + calc(var(--n) / var(--guess-3))));
    --guess-5: calc(0.5 * calc(var(--guess-4) + calc(var(--n) / var(--guess-4))));
    --guess-6: calc(0.5 * calc(var(--guess-5) + calc(var(--n) / var(--guess-5))));
    --guess-7: calc(0.5 * calc(var(--guess-6) + calc(var(--n) / var(--guess-6))));
    --guess-8: calc(0.5 * calc(var(--guess-7) + calc(var(--n) / var(--guess-7))));
    --guess-9: calc(0.5 * calc(var(--guess-8) + calc(var(--n) / var(--guess-8))));
    }

    .guess-1 { display: block; background: black; width: calc(1px * var(--guess-1)); }
    .guess-2 { display: block; background: black; width: calc(1px * var(--guess-2)); }
    .guess-3 { display: block; background: black; width: calc(1px * var(--guess-3)); }
    .guess-4 { display: block; background: black; width: calc(1px * var(--guess-4)); }
    .guess-5 { display: block; background: black; width: calc(1px * var(--guess-5)); }
    .guess-6 { display: block; background: black; width: calc(1px * var(--guess-6)); }
    .guess-7 { display: block; background: black; width: calc(1px * var(--guess-7)); }
    .guess-8 { display: block; background: black; width: calc(1px * var(--guess-8)); }
    .guess-9 { display: block; background: black; width: calc(1px * var(--guess-9)); }
    </style>

    <div class="square-root" style="--n: 128;">
    <div class="guess-1">&nbsp;</div>
    <div class="guess-2">&nbsp;</div>
    <div class="guess-3">&nbsp;</div>
    <div class="guess-4">&nbsp;</div>
    <div class="guess-5">&nbsp;</div>
    <div class="guess-6">&nbsp;</div>
    <div class="guess-7">&nbsp;</div>
    <div class="guess-8">&nbsp;</div>
    <div class="guess-9">&nbsp;</div>
    </div>