csscss-calc

Diagonal length of viewport using plain CSS

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?

Solution

  • 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>