Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
CSS Exponential Functions (pow(),sqrt(),log(),exp(),hypot()) enable advanced mathematical operations for exponential growth, power calculations, and complex sizing formulas!
width: calc(pow(2, 5) * 10px); /* 2⁵ × 10 = 320px */Raises a base to a power. Returns baseexponent.
width: calc(sqrt(400) * 1px); /* √400 = 20px */Returns the square root of a number.
opacity: calc(log(10) / 2.3); /* Natural logarithm */Returns the natural logarithm (base e) of a number.
transform: scale(exp(1)); /* e¹ = 2.718... */Returns e (Euler's number) raised to the power of value.
pow()sqrt()log()exp()<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exponential Functions - Scaling Demo</title>
</head>
<body>
<div class="container">
<h1>📈 Exponential Functions</h1>
<p class="subtitle">Power-based calculations and growth patterns</p>
<div class="demo-area">
<div class="bar-demo">
<div class="bar bar-1">2¹</div>
<div class="bar-label">20px</div>
</div>
<div class="bar-demo">
<div class="bar bar-2">2²</div>
<div class="bar-label">40px</div>
</div>
<div class="bar-demo">
<div class="bar bar-3">2³</div>
<div class="bar-label">80px</div>
</div>
<div class="bar-demo">
<div class="bar bar-4">2⁴</div>
<div class="bar-label">160px</div>
</div>
<div class="bar-demo">
<div class="bar bar-5">2⁵</div>
<div class="bar-label">240px</div>
</div>
</div>
<div class="info-box">
<div class="info-title">🧮 Exponential Growth Pattern</div>
<p class="info-text">
This demonstrates exponential growth (2<sup>n</sup>). While CSS supports <code>pow()</code>,
<code>sqrt()</code>, <code>log()</code>, and <code>exp()</code> functions, they have
<strong>limited browser support</strong>. This example shows pre-calculated exponential values
to demonstrate the concept. Each bar is 2× the previous one!
</p>
</div>
</div>
</body>
</html>Loading preview...