<div class="reduced-motion-notification">
  <p>It looks like you have reduced motion experience enabled. Turn it off to view this demo.</p>
  <p><a href="https://developer.paciellogroup.com/blog/2019/05/short-note-on-prefers-reduced-motion-and-puzzled-windows-users/">Learn more about how to do this</a></p>
</div>

<header class="header">
  <div class="header__title">
    <h1>
      <code>path()</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/offset-path">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#feat=mdn-css_properties_offset-path_path-support">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p>
      In this example, we are moving the <code>div</code> with a class name of <code>dot</code> along a spiral path defined in the <code>path()</code> function. A <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes">CSS keyframe animation</a> called <code>spiral</code> controls the timing of the animation and the size ofthe dot.
    </p>
  
    <div class="example__demo example__demo--path">
      <div class="wrapper">
        <div class="dot"></div>
      </div>
    </div>

    <p>
      It can be difficult to create sophisticated SVG paths directly in code. A SVG editing program such as <a href="https://www.figma.com/">Figma</a>, <a href="https://www.sketch.com/">Sketch</a>, or <a href="https://www.adobe.com/products/illustrator.html">Illustrator</a> can help.
    </p>
    
  </div>
</main>

// Demo
.dot {
  height: var(--size-delta);
  width: var(--size-delta);
  background-color: var(--color-hibiscus);
  border-radius: var(--size-delta);
  offset-path: path("M56.06,227.87A168.42,168.42,0,0,1,224.48,59.45,151.58,151.58,0,0,1,376.06,211,136.43,136.43,0,0,1,239.63,347.45,122.78,122.78,0,0,1,116.86,224.67a110.5,110.5,0,0,1,110.5-110.5,99.46,99.46,0,0,1,99.45,99.45,89.52,89.52,0,0,1-89.51,89.51,80.55,80.55,0,0,1-80.55-80.56,72.5,72.5,0,0,1,72.5-72.5,65.26,65.26,0,0,1,65.25,65.25,58.73,58.73,0,0,1-58.73,58.73,52.86,52.86,0,0,1-52.85-52.86,47.56,47.56,0,0,1,47.57-47.56,42.81,42.81,0,0,1,42.81,42.81");
  animation: spiral 10000ms infinite ease-in-out;
  
  // Feature Queries
  @media screen and (prefers-reduced-motion: reduce) {
    display: none;
  }
}


// Pen Setup
@keyframes spiral {
  0% { 
    offset-distance: 0%;
  }
  5% { 
    offset-distance: 0%;
  }
  50% { 
    offset-distance: 100%;
  }
  55% { 
    offset-distance: 100%;
    transform: scale(0.5);
  }
  100% { 
    offset-distance: 0%;
  }
}

.example__demo--path {
  align-items: flex-start;
  background: var(--color-white) url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/topography.png") repeat;
  display: flex;
  height: calc(var(--size-giga) * 2);
  padding: 0;
}