Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="mover"><p class="message"> 
 Требуется браузер с поддержкой CSS Motion Path (напр. Chrome 43+ с включённым параметром «Включить экспериментальные функции веб-платформы» в chrome://flags)<a href="https://codepen.io/danwilson/blog/css-motion-paths" target="_blank">Больше информации о 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>
              
            
!

CSS

              
                $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;
  }
}
              
            
!

JS

              
                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'
}
              
            
!
999px

Console