<svg viewBox="0 0 500 500">
  <path d="M10,100 C15,5 250,5 250,100" id="theMotionPath" fill="none"/>
</svg>

<h1><a href="https://drafts.fxtf.org/motion-1/" target="_blank">Offset Path (CSS Motion Path)</a> Support</h1>

<h2>Properties supported in this browser</h2>
<aside>
  <div class="offsetpath">offset-path</div>
<div class="rotation">offset-rotate</div>
<div class="distance">offset-distance</div>
<div class="anchor">offset-anchor</div>
<div class="position">offset-position</div>
</aside>
<h2><code>offset-path</code> values supported</h2>
<main>
  <ul>
    <li><div class="path">path()</div></li>
    <li><div class="angle">angle</div></li>
    <li><div class="contain">contain</div></li>
    <li><div class="geometry-box">geometry-box</div></li>
    <li><div class="circle">circle()</div></li>
    <li><div class="ellipse">ellipse()</div></li>
    <li><div class="polygon">polygon()</div></li>
    <li><div class="rect">rect()</div></li>
    <li><div class="xywh">xywh()</div></li>
    <li><div class="url">url()</div></li>
  </ul>
</main>

<p>Legend</p>
<ul>
  <li class="latest">Current Spec <i>&#10004;</i></li>
  <li class="unsupported">Unsupported</li>
</ul>

div, main li {
  text-align:center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
div {
  color: white;
  background: #494857;
  width: 7rem;
  height: 2.6rem;
  border-radius: 1.25rem;
  border: .4rem solid #a94857;
  animation: animatePathOffset 2s 0s infinite alternate ease-in-out;
}
main li {
  margin: 1rem 1rem 4rem;
}
aside div {
  margin: 1rem 1rem 1rem;
}
@mixin newspec {
  background: #48a987;
  border-color: transparent;
  &::after {
    content: '✔';
    padding-left: .5rem;
  }
}

@supports (offset-path: path("M50,30 C35,25 55,25 55,30")) {
  .path {
    offset-path: path("M50,30 C35,25 55,25 55,30");
    @include newspec;
  }
}

@supports (offset-path: ray(85deg farthest-side)) {
  .angle {
    offset-path: ray(90deg farthest-side);
    @include newspec;
  }
}

@supports (offset-path: ray(45deg farthest-side contain)) {
  .contain {
    offset-path: ray(90deg farthest-side  contain);
    @include newspec;
  }
}

@supports (offset-path: margin-box) {
  .geometry-box {
    offset-path: margin-box;
    @include newspec;
  }
}

@supports (offset-path: circle(10px)) {
  .circle {
    offset-path: circle(10px);
    @include newspec;
  }
}
@supports (offset-path: ellipse(10px 20px)) {
  .ellipse {
    offset-path: ellipse(10px 20px);
    @include newspec;
  }
}
@supports (offset-path: polygon(50px 0px, 0px 100px, 100px 100px)) {
  .polygon {
    offset-path: polygon(50px 0px, 0px 100px, 100px 100px);
    @include newspec;
  }
}
@supports (offset-path: rect(10px 20px 30px 40px)) {
  .rect {
    offset-path: rect(10px 20px 30px 40px);
    @include newspec;
  }
}
@supports (offset-path: xywh(0px 0px 20px 20px)) {
  .xywh {
    offset-path: xywh(0px 0px 20px 20px);
    @include newspec;
  }
}

@supports (offset-path: url("#theMotionPath")) {
  .url {
    offset-path: url("#theMotionPath");
    @include newspec;
  }
}




@supports (offset-distance: 100%) {
  .distance {
    @include newspec;
  }
}
@supports (offset-rotate: 100deg) {
  .rotation {
    @include newspec;
  }
}
@supports (offset-path: path("M10,100 C15,5 250,5 250,100")) {
  .offsetpath {
    @include newspec;
  }
}
@supports (offset-anchor: top left) {
  .anchor {
    @include newspec;
  }
}
@supports (offset-position: top left) {
  .position {
    @include newspec;
  }
}

@keyframes animatePathOffset {
  0% { offset-distance: 45% }
  100% { offset-distance: 65% }
}
@keyframes animatePathAngle {
  0% { offset-distance: 45% }
  100% { offset-distance: 65% }
}



body {
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-family: sans-serif;
  background: #d9e9f9;
  background: radial-gradient(circle, #fefeff, #d9e9f9);
  padding-bottom: 10rem;
}
body > * {
  margin: 1.5rem 0 0rem;
}
main ul, aside {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: .75em;
}
svg {
  position: absolute;
  left: -100%;
  width: 1em;
}
body > ul {
  display: flex;
  margin: 0rem 0 3rem;
}
h1 + p {
  margin-bottom: 0rem;
}
body > ul li {
  font-size: .75em;
  background: #48a987;
  padding: .5rem;
  color: white;
  margin: .5rem;
  border-radius: .5rem;
  border: .2rem solid transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
li i {
  display: block;
}
li.unsupported {
  background: #474857;
  border-color: #a94857;
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
h1 {
  font-size: 1.6em;
  font-weight: 500;
}
h2 {
  font-size: 1.2em;
  font-weight: 500;
}