mdn · chrisdavidmills · Sep 30, 2025 · Sep 29, 2025 · Sep 29, 2025 · Sep 29, 2025
@@ -31,6 +31,8 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
 
 - The "css-progress" directory contains an example demonstrating the [CSS `progress()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/progress). See the [example live](https://mdn.github.io/dom-examples/css-progress).
 
+- The "css-typed-arithmetic" directory contains an example demonstrating [CSS typed arithmetic](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units/Using_CSS_typed_arithmetic) usage. See the [index page](https://mdn.github.io/dom-examples/css-typed-arithmetic) to access the live examples.
+
 - The "device-posture-api" directory contains an example demonstrating how to use the [Device Posture API](https://developer.mozilla.org/docs/Web/API/Device_Posture_API). [Run the example live](https://mdn.github.io/dom-examples/device-posture-api/).
 
 - The "drag-and-drop" directory is for examples and demos of the [HTML Drag and Drop](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) standard.

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Animated story circle</title>
+    <link href="style.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="support-info">
+      The rotation of each colored story section is calculated based on its
+      <code>sibling-index()</code> multiplied by a ratio of the width of the
+      <code>&lt;body&gt;</code> element and <code>1200px</code>. At the time of
+      writing, this works in Chromium 140+ and Safari 26+.
+    </div>
+    <div class="story-circle">
+      <p><strong>Hello there!</strong></p>
+      <p>This is</p>
+      <p>quite an</p>
+      <p>interesting way</p>
+      <p>to tell a</p>
+      <p>story</p>
+      <p>all around in</p>
+      <p>a circle.</p>
+      <p>What fun!</p>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,49 @@
+:root {
+  height: 100%;
+  font-family: sans-serif;
+}
+
+body {
+  height: inherit;
+  margin: 0 auto;
+  min-width: 400px;
+  max-width: 1600px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  container-type: inline-size;
+}
+
+.story-circle {
+  width: 1px;
+  height: 1px;
+  --width-percentage: calc((100cqw / 1200px) - 0.33333);
+}
+
+p {
+  padding: 10px;
+  width: 150px;
+  text-align: right;
+  background: linear-gradient(to right, red, orange 50%);
+  border-radius: 5px;
+
+  position: absolute;
+  transform-origin: center left;
+
+  --angle: calc(
+    ((sibling-index() - 1) * (360 / sibling-count())) * var(--width-percentage)
+  );
+  rotate: calc(var(--angle) * 1deg);
+}
+
+/* Support information */
+
+.support-info {
+  padding: 5px;
+  background-color: yellow;
+  border: 1px solid black;
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  right: 5px;
+}
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>CSS typed arithmetic demo</title>
+    <link href="style.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="support-info">
+      The paragraph <code>background-color</code> and
+      <code>font-size</code> should change depending on the viewport width, as
+      expressed in pixels in the <code>--viewport-in-pixels</code> custom
+      property. At the time of writing, this works in Chromium 140+ and Safari
+      26+.
+    </div>
+    <p>Hello there!</p>
+  </body>
+</html>
@@ -0,0 +1,21 @@
+:root {
+  font-family: sans-serif;
+  --viewport-in-pixels: calc(100vw / 1px);
+}
+
+p {
+  border: 5px solid black;
+  text-align: center;
+  font-size: calc(1em * (var(--viewport-in-pixels) / 200));
+  background-color: lch(
+    75% 50% calc((100 + (var(--viewport-in-pixels) / 10)) * 1deg)
+  );
+}
+
+/* Support information */
+
+.support-info {
+  padding: 5px;
+  background-color: yellow;
+  border: 1px solid black;
+}
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width" />
+
+    <title>CSS typed arithmetic examples</title>
+  </head>
+
+  <body>
+    <h1>CSS typed arithmetic examples</h1>
+    <ul>
+      <li>
+        <a href="responsive-background-opacity/index.html"
+          >Responsive background opacity</a
+        >
+      </li>
+      <li>
+        <a href="different-type-variations/index.html"
+          >Different type variations</a
+        >
+      </li>
+      <li>
+        <a href="animated-story-circle/index.html">Animated story circle</a>
+      </li>
+    </ul>
+    <h2>More information</h2>
+    <ul>
+      <li>
+        <a
+          href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units/Using_typed_arithmetic"
+          >Using CSS typed arithmetic</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/mdn/dom-examples/tree/main/css-typed-arithmetic"
+          >The code used on these pages</a
+        >
+      </li>
+    </ul>
+  </body>
+</html>
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Responsive background opacity demo</title>
+    <link href="style.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="wrapper">
+      <h1>Prose of the century</h1>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+        aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+        pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+        at ultricies tellus laoreet sit amet.
+      </p>
+      <div class="support-info">
+        The opacity of the background image decreases as the viewport width
+        decreases. At the time of writing, this works in Chromium 140+.
+      </div>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,31 @@
+:root {
+  font-family: sans-serif;
+  --width-percentage: calc((100vw / 2000px));
+}
+
+.wrapper {
+  width: 480px;
+  padding: 20px;
+  margin: 0 auto;
+}
+
+body {
+  background: linear-gradient(
+      rgb(255 255 255 / calc(1 - var(--width-percentage))),
+      rgb(255 255 255 / calc(1 - var(--width-percentage)))
+    ),
+    url("https://mdn.github.io/shared-assets/images/examples/colorful-heart.png")
+      no-repeat top 50px right 50px;
+}
+
+p {
+  line-height: 1.5;
+}
+
+/* Support information */
+
+.support-info {
+  padding: 5px;
+  background-color: yellow;
+  border: 1px solid black;
+}