<div class="mover"><p class="message">Requires a browser that supports CSS MotionPath (such as Chrome 46+) <a href="https://codepen.io/danwilson/blog/css-motion-paths" target="_blank">More Info on CSS Motion Paths</a></p></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<svg data-visible>
  <path d="M200 200 S 200.5 200.1 201 200.2 201.4 200.5 201.8 200.8 202.2 201.3 202.4 201.8 202.6 202.3 202.7 203 202.6 203.6 202.5 204.3 202.2 205 201.9 205.7 201.4 206.4 200.7 207 200 207.5 199.2 208 198.2 208.3 197.2 208.6 196.1 208.7 195 208.7 193.8 208.5 192.6 208.2 191.5 207.7 190.3 207.1 189.2 206.3 188.1 205.3 187.2 204.2 186.3 202.9 185.6 201.5 185 200 184.6 198.4 184.3 196.7 184.3 194.9 184.5 193.1 184.8 191.3 185.4 189.4 186.3 187.6 187.3 185.9 188.5 184.2 190 182.7 191.7 181.3 193.5 180 195.5 179 197.7 178.1 200 177.5 202.4 177.1 204.9 177 207.4 177.2 210 177.6 212.5 178.3 215 179.4 217.4 180.7 219.7 182.3 221.8 184.1 223.8 186.3 225.6 188.6 227.1 191.2 228.4 194 229.3 196.9 230 200 230.3 203.2 230.3 206.4 230 209.7 229.2 213 228.1 216.2 226.7 219.4 224.9 222.4 222.8 225.3 220.3 227.9 217.5 230.3 214.4 232.4 211.1 234.2 207.6 235.7 203.9 236.8 200 237.5 196 237.8 192 237.7 187.9 237.1 183.9 236.1 180 234.6 176.2 232.8 172.6 230.5 169.2 227.8 166 224.7 163.2 221.3 160.7 217.5 158.6 213.4 157 209.1 155.7 204.7 155 200 154.7 195.2 155 190.4 155.8 185.6 157.1 180.9 158.9 176.3 161.2 171.8 164 167.5 167.2 163.6 170.9 160 175 156.7 179.5 153.9 184.2 151.5 189.3 149.6 194.6 148.3 200 147.5 205.5 147.3 211.1 147.7 216.7 148.6 222.2 150.2 227.5 152.4 232.6 155.1 237.5 158.4 242 162.2 246.1 166.5 249.8 171.2 253 176.4 255.6 181.9 257.7 187.7 259.2 193.8 260 200 260.2 206.3 259.7 212.7 258.5 219 256.6 225.2 254.1 231.2 251 237 247.2 242.5 242.8 247.6 237.9 252.2 232.5 256.3 226.6 259.8 220.4 262.8 213.8 265 207 266.6 200 267.5 192.9 267.6 185.8 267 178.7 265.6 171.7 263.5 165 260.6 158.6 257 152.5 252.8 146.9 247.8 141.8 242.3 137.2 236.3 133.3 229.7 130.1 222.7 127.6 215.4 125.9 207.8 125 200 124.9 192.1 125.7 184.2 127.2 176.4 129.7 168.7 132.9 161.3 136.9 154.2 141.7 147.5 147.1 141.3 153.3 135.7 160 130.7 167.3 126.5 175 123 183.1 120.3 191.4 118.4 200 117.5 208.7 117.5 217.4 118.3 226 120.1 234.4 122.8 242.5 126.4 250.3 130.8 257.5 136.1 264.3 142.1 270.4 148.9 275.8 156.3 280.4 164.2 284.2 172.7 287.1 181.5 289 190.6 290 200 290 209.5 289 218.9 287 228.3 284 237.4 280.1 246.2 275.2 254.7 269.5 262.6 262.9 269.9 255.5 276.5 247.5 282.3 238.8 287.2 229.7 291.3 220.1 294.4 210.1 296.5 200 297.5 189.8 297.5 179.5 296.3 169.4 294.2 159.5 290.9 150 286.6 140.9 281.3 132.4 275.1 124.6 267.9 117.5 260 111.2 251.3 105.9 241.9 101.6 232 98.3 221.6 96.1 210.9 95 200 95.1 189 96.3 178 98.7 167.1 102.3 156.5 106.9 146.3 112.6 136.5 119.4 127.4 127.1 119 135.6 111.4 145 104.7 155.1 99.1 165.7 94.4 176.8 90.9 188.3 88.6 200 87.5 211.8 87.6 223.6 89 235.2 91.6 246.6 95.4 257.5 100.4 267.9 106.6 277.6 113.8 286.6 122 294.7 131.2 301.8 141.2 307.8 152 312.7 163.4 316.4 175.3 318.8 187.5 320 200 319.8 212.6 318.4 225.2 315.6 237.5 311.5 249.6 306.1 261.2 299.5 272.3 291.8 282.6 283 292.1 273.2 300.7 262.5 308.3 251 314.6 238.9 319.8 226.3 323.7 213.3 326.3 200 327.5 186.6 327.3 173.3 325.7 160.1 322.7 147.3 318.3 135 312.6 123.3 305.6 112.3 297.4 102.3 288 93.2 277.6 85.3 266.3 78.5 254.1 73 241.3 68.9 227.9 66.2 214.1 65 200 65.2 185.8 67 171.7 70.2 157.8 74.8 144.3 80.9 131.3 88.4 118.9 97.1 107.3 107 96.7 118 87.1 130 78.8 142.9 71.6 156.4 65.9 170.6 61.6 185.2 58.8 200 57.5 214.9 57.8 229.8 59.6 244.5 63 258.8 68 272.5 74.4 285.5 82.3 297.7 91.5 308.9 102 318.9 113.6 327.7 126.2 335.2 139.8 341.2 154.1 345.7 169 348.7 184.4 348.7 184.4"/>
</svg>
$light: #fafafd;
* {
  box-sizing: border-box;
}

html, body {
  min-height: 30rem;
}
body {
  background: #1F5C59;
}

.mover {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  motion-offset: 100%;
  motion-path: path("M200 200 S 200.5 200.1 201 200.2 201.4 200.5 201.8 200.8 202.2 201.3 202.4 201.8 202.6 202.3 202.7 203 202.6 203.6 202.5 204.3 202.2 205 201.9 205.7 201.4 206.4 200.7 207 200 207.5 199.2 208 198.2 208.3 197.2 208.6 196.1 208.7 195 208.7 193.8 208.5 192.6 208.2 191.5 207.7 190.3 207.1 189.2 206.3 188.1 205.3 187.2 204.2 186.3 202.9 185.6 201.5 185 200 184.6 198.4 184.3 196.7 184.3 194.9 184.5 193.1 184.8 191.3 185.4 189.4 186.3 187.6 187.3 185.9 188.5 184.2 190 182.7 191.7 181.3 193.5 180 195.5 179 197.7 178.1 200 177.5 202.4 177.1 204.9 177 207.4 177.2 210 177.6 212.5 178.3 215 179.4 217.4 180.7 219.7 182.3 221.8 184.1 223.8 186.3 225.6 188.6 227.1 191.2 228.4 194 229.3 196.9 230 200 230.3 203.2 230.3 206.4 230 209.7 229.2 213 228.1 216.2 226.7 219.4 224.9 222.4 222.8 225.3 220.3 227.9 217.5 230.3 214.4 232.4 211.1 234.2 207.6 235.7 203.9 236.8 200 237.5 196 237.8 192 237.7 187.9 237.1 183.9 236.1 180 234.6 176.2 232.8 172.6 230.5 169.2 227.8 166 224.7 163.2 221.3 160.7 217.5 158.6 213.4 157 209.1 155.7 204.7 155 200 154.7 195.2 155 190.4 155.8 185.6 157.1 180.9 158.9 176.3 161.2 171.8 164 167.5 167.2 163.6 170.9 160 175 156.7 179.5 153.9 184.2 151.5 189.3 149.6 194.6 148.3 200 147.5 205.5 147.3 211.1 147.7 216.7 148.6 222.2 150.2 227.5 152.4 232.6 155.1 237.5 158.4 242 162.2 246.1 166.5 249.8 171.2 253 176.4 255.6 181.9 257.7 187.7 259.2 193.8 260 200 260.2 206.3 259.7 212.7 258.5 219 256.6 225.2 254.1 231.2 251 237 247.2 242.5 242.8 247.6 237.9 252.2 232.5 256.3 226.6 259.8 220.4 262.8 213.8 265 207 266.6 200 267.5 192.9 267.6 185.8 267 178.7 265.6 171.7 263.5 165 260.6 158.6 257 152.5 252.8 146.9 247.8 141.8 242.3 137.2 236.3 133.3 229.7 130.1 222.7 127.6 215.4 125.9 207.8 125 200 124.9 192.1 125.7 184.2 127.2 176.4 129.7 168.7 132.9 161.3 136.9 154.2 141.7 147.5 147.1 141.3 153.3 135.7 160 130.7 167.3 126.5 175 123 183.1 120.3 191.4 118.4 200 117.5 208.7 117.5 217.4 118.3 226 120.1 234.4 122.8 242.5 126.4 250.3 130.8 257.5 136.1 264.3 142.1 270.4 148.9 275.8 156.3 280.4 164.2 284.2 172.7 287.1 181.5 289 190.6 290 200 290 209.5 289 218.9 287 228.3 284 237.4 280.1 246.2 275.2 254.7 269.5 262.6 262.9 269.9 255.5 276.5 247.5 282.3 238.8 287.2 229.7 291.3 220.1 294.4 210.1 296.5 200 297.5 189.8 297.5 179.5 296.3 169.4 294.2 159.5 290.9 150 286.6 140.9 281.3 132.4 275.1 124.6 267.9 117.5 260 111.2 251.3 105.9 241.9 101.6 232 98.3 221.6 96.1 210.9 95 200 95.1 189 96.3 178 98.7 167.1 102.3 156.5 106.9 146.3 112.6 136.5 119.4 127.4 127.1 119 135.6 111.4 145 104.7 155.1 99.1 165.7 94.4 176.8 90.9 188.3 88.6 200 87.5 211.8 87.6 223.6 89 235.2 91.6 246.6 95.4 257.5 100.4 267.9 106.6 277.6 113.8 286.6 122 294.7 131.2 301.8 141.2 307.8 152 312.7 163.4 316.4 175.3 318.8 187.5 320 200 319.8 212.6 318.4 225.2 315.6 237.5 311.5 249.6 306.1 261.2 299.5 272.3 291.8 282.6 283 292.1 273.2 300.7 262.5 308.3 251 314.6 238.9 319.8 226.3 323.7 213.3 326.3 200 327.5 186.6 327.3 173.3 325.7 160.1 322.7 147.3 318.3 135 312.6 123.3 305.6 112.3 297.4 102.3 288 93.2 277.6 85.3 266.3 78.5 254.1 73 241.3 68.9 227.9 66.2 214.1 65 200 65.2 185.8 67 171.7 70.2 157.8 74.8 144.3 80.9 131.3 88.4 118.9 97.1 107.3 107 96.7 118 87.1 130 78.8 142.9 71.6 156.4 65.9 170.6 61.6 185.2 58.8 200 57.5 214.9 57.8 229.8 59.6 244.5 63 258.8 68 272.5 74.4 285.5 82.3 297.7 91.5 308.9 102 318.9 113.6 327.7 126.2 335.2 139.8 341.2 154.1 345.7 169 348.7 184.4 348.7 184.4");
  width: 3rem;
  height: 3rem;
  margin: 0 auto;
  border-radius: 50%;
  background: $light;
  will-change: transform;
  
  .message {
    display: none;
  }
  
  
  .no-motionpath & {
    width: auto;
    height: inherit;
    background: transparent;
    p {
      display: block;
      color: $light;
      padding: 1rem;
      
      a {
        color: $light;
        display: block;
        padding: 1rem 0;
      }
    }
  }
}

svg {
  stroke: $light;
  fill: transparent;
  width: 500px;
  height: 500px;
  position: absolute;
  top: 25px;
  left: 20px;
  opacity: 0;
  transition: opacity .2s ease;
  &[data-visible] {
    opacity: .1;
    animation: pulse 16s infinite ease-in-out;
    
    .no-motionpath & {
      opacity: .5;
      animation: none;
    }
  }
}

@keyframes pulse {
  25%, 75% {
    opacity: 0;
  }
}
var m = document.querySelectorAll('.mover');

if (CSS && CSS.supports && CSS.supports('motion-offset', 0)) {
  var time = 9000;
  for (var i = 0, len = m.length; i < len; ++i) {
    var player = m[i].animate([
      { motionOffset: '100%' },
      { motionOffset: 0 }
    ], {
      duration: time,
      iterations: Infinity,
      fill: 'both',
      easing: 'ease-in',
      delay: time * (i / m.length)
    });
    var scaler = m[i].animate([
      { transform: 'scale(.01)', opacity: .01, offset: 0 },
      { transform: 'scale(1)', opacity: 1, offset: .01 },
      { transform: 'scale(.01)', opacity: .01, offset: 1 }
    ], {
      duration: time,
      iterations: Infinity,
      direction: 'normal',
      fill: 'both',
      easing: 'cubic-bezier(0.55,0.055,0.675,0.19)',
      delay: time * (i / m.length)
    });
  }
} else {
  document.documentElement.className = 'no-motionpath'
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.