CSS Motion Path value types

In this example below you will see how to do a CSS Motion Path value types with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by danwilson, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright danwilson ©
  • HTML
  • CSS
  • JavaScript
    <svg viewBox="0 0 500 500">
  <path d="M10,100 C15,5 250,5 250,100" id="theMotionPath" fill="none"/>
</svg>

<h1>Offset Path (Motion Path) 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>*-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="url">url()</div></li>
  </ul>
</main>

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

/*Downloaded from https://www.codeseek.co/danwilson/css-motion-path-value-types-qadqPB */
    div, main li {
  text-align:center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
div {
  color: white;
  background: #494857;
  width: 8rem;
  height: 4.6rem;
  border-radius: 1.25rem;
  border: .4rem solid #a94857;
  animation: animatePath 2s 0s infinite alternate ease-in-out;
}
main li {
  margin: 1rem 2rem 4rem;
}
aside div {
  margin: 1rem 1rem 1rem;
}
@mixin oldspec {
  background: #48a987;
  //border-color: #d9b728;
  &::after {
    content: '✔';
    padding-left: .5rem;
  }
}
@mixin newspec {
  background: #48a987;
  border-color: transparent;
  &::after {
    content: '✔';
    padding-left: .5rem;
  }
}

@supports (motion-path: path("M10,100 C15,5 250,5 250,100")) {
  .path {
    @include oldspec;
    motion-path: path("M10,100 C15,5 250,5 250,100");
  }
}

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

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

@supports (offset-path: ray(45deg contain)) {
  .contain {
    animation-name: animatePathOffset;
    offset-path: ray(45deg contain);
    @include newspec;
  }
}

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

@supports (offset-path: circle(10px)) {
  .circle {
    animation-name: animatePathOffset;
    offset-path: circle(10px);
    @include newspec;
  }
}
@supports (offset-path: ellipse(10px 20px)) {
  .ellipse {
    animation-name: animatePathOffset;
    offset-path: circle(10px 20px);
    @include newspec;
  }
}
@supports (offset-path: polygon(50px 0px, 0px 100px, 100px 100px)) {
  .polygon {
    animation-name: animatePathOffset;
    offset-path: polygon(50px 0px, 0px 100px, 100px 100px);
    @include newspec;
  }
}

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




@supports (motion-offset: 100%) {
  .distance {
    @include oldspec;
  }
}
@supports (offset-distance: 100%) {
  .distance {
    @include newspec;
  }
}
@supports (motion-rotation: 100deg) {
  .rotation {
    @include oldspec;
  }
}
@supports (offset-rotate: 100deg) {
  .rotation {
    @include newspec;
  }
}
@supports (motion-path: path("M10,100 C15,5 250,5 250,100")) {
  .offsetpath {
    @include oldspec;
  }
}
@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 animatePath {
  100% { motion-offset: 100% }
}
@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;
}
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.old {
  background: #48a987;
  //background: #48a98799;
  //border-color: #d9b728;
  border-color: #a94857;
  //color: #111;
}
li.unsupported {
  background: #474857;
  border-color: #a94857;
}


* {
  box-sizing: border-box;
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.6em;
}


/*Downloaded from https://www.codeseek.co/danwilson/css-motion-path-value-types-qadqPB */
    

Comments