CODEWITHSUNDEEP
csscss-calc
jwseph
jwseph

Reputation: 562

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?

Upvotes: 1

Views: 428

Answers (2)

Temani Afif
Temani Afif

Reputation: 274236

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>

Upvotes: 0

Brett Donald
Brett Donald

Reputation: 14467

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>

Upvotes: 2

Related Questions