CodePen Embed - CSS Motion Path offset-path animation

Live

 
<div class="wrapper">
  <svg class="cyclist" width="24" height="24" viewBox="0 0 24 24">
  <path d="M5,20.5A3.5,3.5 0 0,1 1.5,17A3.5,3.5 0 0,1 5,13.5A3.5,3.5 0 0,1 8.5,17A3.5,3.5 0 0,1 5,20.5M5,12A5,5 0 0,0 0,17A5,5 0 0,0 5,22A5,5 0 0,0 10,17A5,5 0 0,0 5,12M14.8,10H19V8.2H15.8L13.86,4.93C13.57,4.43 13,4.1 12.4,4.1C11.93,4.1 11.5,4.29 11.2,4.6L7.5,8.29C7.19,8.6 7,9 7,9.5C7,10.13 7.33,10.66 7.85,10.97L11.2,13V18H13V11.5L10.75,9.85L13.07,7.5M19,20.5A3.5,3.5 0 0,1 15.5,17A3.5,3.5 0 0,1 19,13.5A3.5,3.5 0 0,1 22.5,17A3.5,3.5 0 0,1 19,20.5M19,12A5,5 0 0,0 14,17A5,5 0 0,0 19,22A5,5 0 0,0 24,17A5,5 0 0,0 19,12M16,4.8C17,4.8 17.8,4 17.8,3C17.8,2 17,1.2 16,1.2C15,1.2 14.2,2 14.2,3C14.2,4 15,4.8 16,4.8Z"></path>
</svg>
<svg class="hill" width="942" height="343" viewBox="0 0 942 343" fill="#000" xmlns="http://www.w3.org/2000/svg">
<path d="M129.069 240.15C101.054 252.632 64.034 259.999 0 259V343H942V0C923.49 108.841 845.949 228.167 801.425 268.608C781.416 286.783 743.395 307.552 666.854 257.125C590.313 206.699 552.793 138.298 478.754 138.798C404.715 139.297 387.206 221.677 341.181 257.125C295.157 292.574 245.13 270.606 210.612 257.125C176.093 243.645 157.083 227.668 129.069 240.15Z"/>
</svg>
</div>

Live

​x
 
html,
body {
  width: 100%;
  height: 100%;
  display: flex;
}
​
.wrapper {
  position: relative;
  margin: auto;
}
​
.cyclist {
  width: 48px;
  height: 48px;
  position: absolute;
  transform: translateY(-50%);  // position the rider above the curve. could be done with offset-position but it has no browser support yet
  offset-path: path("M1 260C65.034 260.999 102.054 253.632 130.069 241.15C158.083 228.668 177.093 244.645 211.612 258.125C246.13 271.606 296.157 293.574 342.181 258.125C388.206 222.677 405.715 140.297 479.754 139.798C553.793 139.298 591.313 207.699 667.854 258.125C744.395 308.552 782.416 287.783 802.425 269.608C846.949 229.167 924.49 109.841 943 1");
  animation: ride-hills 10s ease-in infinite;
}
​
@keyframes ride-hills {
  to {
    offset-distance: 100%;
  }
}
​

This Pen is owned by mafqla on CodePen. It is a fork of this Pen.

See more by @mafqla on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"VwRBpYj\",\"auto_save\":true},\"hashid\":\"VwRBpYj\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[\"css\",\"animation\",\"offset-path\"],\"id\":73143847,\"user_id\":5382232,\"html\":\"<div class=\\\"wrapper\\\">\\n  <svg class=\\\"cyclist\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\">\\n  <path d=\\\"M5,20.5A3.5,3.5 0 0,1 1.5,17A3.5,3.5 0 0,1 5,13.5A3.5,3.5 0 0,1 8.5,17A3.5,3.5 0 0,1 5,20.5M5,12A5,5 0 0,0 0,17A5,5 0 0,0 5,22A5,5 0 0,0 10,17A5,5 0 0,0 5,12M14.8,10H19V8.2H15.8L13.86,4.93C13.57,4.43 13,4.1 12.4,4.1C11.93,4.1 11.5,4.29 11.2,4.6L7.5,8.29C7.19,8.6 7,9 7,9.5C7,10.13 7.33,10.66 7.85,10.97L11.2,13V18H13V11.5L10.75,9.85L13.07,7.5M19,20.5A3.5,3.5 0 0,1 15.5,17A3.5,3.5 0 0,1 19,13.5A3.5,3.5 0 0,1 22.5,17A3.5,3.5 0 0,1 19,20.5M19,12A5,5 0 0,0 14,17A5,5 0 0,0 19,22A5,5 0 0,0 24,17A5,5 0 0,0 19,12M16,4.8C17,4.8 17.8,4 17.8,3C17.8,2 17,1.2 16,1.2C15,1.2 14.2,2 14.2,3C14.2,4 15,4.8 16,4.8Z\\\"></path>\\n</svg>\\n<svg class=\\\"hill\\\" width=\\\"942\\\" height=\\\"343\\\" viewBox=\\\"0 0 942 343\\\" fill=\\\"#000\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n<path d=\\\"M129.069 240.15C101.054 252.632 64.034 259.999 0 259V343H942V0C923.49 108.841 845.949 228.167 801.425 268.608C781.416 286.783 743.395 307.552 666.854 257.125C590.313 206.699 552.793 138.298 478.754 138.798C404.715 139.297 387.206 221.677 341.181 257.125C295.157 292.574 245.13 270.606 210.612 257.125C176.093 243.645 157.083 227.668 129.069 240.15Z\\\"/>\\n</svg>\\n</div>\",\"css\":\"html,\\nbody {\\n  width: 100%;\\n  height: 100%;\\n  display: flex;\\n}\\n\\n.wrapper {\\n  position: relative;\\n  margin: auto;\\n}\\n\\n.cyclist {\\n  width: 48px;\\n  height: 48px;\\n  position: absolute;\\n  transform: translateY(-50%);  // position the rider above the curve. could be done with offset-position but it has no browser support yet\\n  offset-path: path(\\\"M1 260C65.034 260.999 102.054 253.632 130.069 241.15C158.083 228.668 177.093 244.645 211.612 258.125C246.13 271.606 296.157 293.574 342.181 258.125C388.206 222.677 405.715 140.297 479.754 139.798C553.793 139.298 591.313 207.699 667.854 258.125C744.395 308.552 782.416 287.783 802.425 269.608C846.949 229.167 924.49 109.841 943 1\\\");\\n  animation: ride-hills 10s ease-in infinite;\\n}\\n\\n@keyframes ride-hills {\\n  to {\\n    offset-distance: 100%;\\n  }\\n}\\n\",\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"babel\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2024-02-07T00:33:56.919Z\",\"updated_at\":\"2024-02-07T00:33:56.919Z\",\"title\":\"CSS Motion Path offset-path animation\",\"description\":\"A quick demo to test the support of  offset-path\",\"slug_hash\":\"VwRBpYj\",\"head\":\"\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":41923684,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"018d80fc-54b7-77d3-be83-7b0ce1815abc\",\"is_new_editor_pen\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://public.codepenassets.com/css/normalize-5.0.0.min.css","__pen_prefix_free_url":"https://public.codepenassets.com/js/prefixfree-1.0.7.min.js","__pen_reset_css_url":"https://public.codepenassets.com/css/reset-2.0.min.css"}