<header class="header">
  <div class="header__title">
    <h1>
      <code>circle()</code>
    </h1>
  </div>
  <div class="header__reference">
    <ul class="reference-list">
      <li><a class="reference-list__link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#feat=css-clip-path">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p>
      In this example, we have a <code>div</code> with a class of <code>has-circular-mask</code> applied to it. <code>has-circular-mask</code> instructs the browser to draw a circle <code>32vw</code> in diameter, radiating out from a central point set <code>50%</code> from the left and <code>50%</code> from the top of its container. 
    </p>
    <p>
      Try playing around with <code>clip-path()</code>'s three arguments (<code>32vw</code>, <code>50%</code>, and <code>50%</code>) to see how it changes the mask's shape.
    </p>

    <div class="example__demo example__demo--circle">
      <div class="has-circlualr-mask">
        <img class="duck" alt="A Mallard duck sleeping on a dock." src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/niclas-illg-Zde6tDkKGCo-unsplash.jpg" />
      </div>
    </div>
  </div>

  <aside>
    <p>
      <small><a href="https://unsplash.com/photos/Zde6tDkKGCo">"mallard duck on dock photo"</a> by <a href="https://unsplash.com/@nicklbaert">Niclas Illg</a> on <a href="https://unsplash.com/">Unsplash</a>.</small>
    </p>
  </aside>
</main>

// Demo
.has-circlualr-mask {
  clip-path: circle(32vw at 50% 50%);
}


// Pen Setup
.example__demo--circle {
  background-color: var(--color-cinder);
}

.duck {
  height: auto;
  width: 100%;
}