skip to Main Content

My goal is to create a absolutely-positioned circle with radius equal to the viewport’s (sv*) diagonal length.

enter image description here

I tried calculating the diagonal length of the viewport based on the width and height using the Pythagorean Theorem like so:

.circle {
    --radius: sqrt(calc(calc(100svw * 100svw) + calc(100svh * 100svh)));
    ...
}

but this failed because in calc multiplication, at least one of the arguments has to be a number.

I know with JavaScript it’s possible to calculate the diagonal length of the viewport, but is it possible with plain CSS?

2

Answers


  1. A simple alternative would be to add the viewport width and height together, and use that as your radius.

    const toggle = () => {
      document.querySelector('.d1').classList.toggle('big')
      setTimeout(toggle, 4000)
    }
    setTimeout(toggle, 1000)
    body {
      margin: 0;
    }
    .d1 {
      width: 10px;
      aspect-ratio: 1/1;
      background: red;
      border-radius: 9999px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: all 2s ease-in-out;
    }
    .big {
      width: calc(100vh + 100vw);
      background: blue;
    }
    <div class="d1"></div>
    Login or Signup to reply.
  2. If you consider clip-path, you don’t need complex math

    .box {
      position: absolute;
      inset: 0;
      background: red;
      clip-path: circle(50px); /* starting value */
      transition: all 2s ease-in-out;
    }
    html:hover .box {
      clip-path: circle(71%); /* 71% ~ 100%/sqrt(2) */
    }
    <div class="box"></div>

    You can easily adjust the position of the clip-path:

    .box {
      position: absolute;
      inset: 0;
      background: red;
      clip-path: circle(50px at top right); /* starting value */
      transition: all 2s ease-in-out;
    }
    html:hover .box {
      clip-path: circle(71%); /* 71% ~ 100%/sqrt(2) */
    }
    <div class="box"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search