Description

Experimenting with the new CSS shape() function.

Created on 12 Oct 2025

Code

<style>
  div {
    clip-path: shape(
      from 50% 0,
      arc by 0 var(--t) of calc(var(--t) / 2),
      arc to 50% 0 of calc(var(--t) / 2),
      arc by 0 calc(100% - var(--t)) of calc((100% - var(--t)) / 2),
      arc to 50% 0 of calc((100% - var(--t)) / 2),
      arc by 0 100% of 50% cw,
      arc to 50% 0 of 50% cw
    );
    transform: rotate(-45deg);
    background: currentColor;
    width: 50vmin;
    aspect-ratio: 1;
  }


  html {
    --t: 15%; /* Diameter of star, and thickest part of moon. */
    padding: 1rem;
    color-scheme: dark;
    font-family: system-ui, sans-serif;
  }

  p {
    margin: 0;
  }

  input {
    width: 100%;
    margin: 0.5rem 0;
    accent-color: magenta;
  }

  output {
    display: flex;
    justify-content: center;
  }
</style>

<p id="desc">Interactive <i lang="ja">月に星</i> (<i lang="ja-Latn">tsuki ni hoshi</i>, moon and star) mon using CSS <code>shape()</code> function.</p>
<input id="control" type="range" value="15" max="100" step="any" aria-label="Change the size of the moon and star">
<output for="control">
  <div role="img" aria-describedby="desc"></div>
</output>

<script>
  document
    .querySelector("#control")
    .addEventListener("input", (ev) =>
      document.body.style.setProperty("--t", ev.target.value + "%")
    );
</script>