liveBook · Manning

Hypot()

As explained in Math for Web Design

hypot() is a CSS mathematical function that returns the square root of the sum of the squares of its arguments.

Need an effect that scales with the screen rather than with just its width or height? CSS hypot() calculates a distance from several values. It returns the square root of the sum of each argument squared: hypot(x, y) gives the hypotenuse of a right-angled triangle. section 3.2.4

Use hypot(x, y, ...) with any number of comma-separated arguments. Arguments may be unitless or use units, but unit-bearing arguments must use the same unit. Three values model the distance from the origin to a point in 3D space. section 3.2.4

Keep viewport blur proportional

The viewport diagonal combines 100vw and 100vh, so dividing it by 100 produces a blur strength that stays visually consistent across screen sizes. .overlay { backdrop-filter: blur(calc(hypot(100vw, 100vh) / 100)); } section 3.2.4

Listing 3.9 Responsive blur strength using hypot()
.overlay {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(calc(hypot(100vw, 100vh) / 100);
);
    background-color: rgba(0, 0, 0, 0.3);
}

Inspect a complete overlay rule that derives blur from the viewport diagonal. section 3.2.4

How Math for Web Design covers it

How deep it goes
Defines the squared-sum calculation, triangle and 3D distance interpretations, argument count, and unit constraint.
Examples
Demonstrates hypot(100vw, 100vh) / 100 in an overlay backdrop-filter blur rule.
What it assumes
Introduces the needed hypotenuse calculation through a right-angled triangle example.
What you can do after
Apply it in CSS calculations that need a responsive two- or three-dimensional distance.
How it connects
Connects CSS math functions with calc(), viewport units, right-angled triangles, and JavaScript Math.hypot().
Cover of Math for Web Design
liveBookmanning.com
Read Math for Web Design on liveBook Get the book at manning.com

This explainer was generated by Manning's knowledge graph from the text of Math for Web Design. The section links point to the parts of the book it draws on.