CSS offset-path

I am having issues moving an HTML element along offset-path.

Here is the code snippet:

<!doctype html>
<html>
<head>
<style>
body {
overflow: hidden;
height: 100%;
width: 100%;
}
.move {
position: absolute;
left: 0px;
top: 0px;
height: 20px;
width: 20px;
border-radius: 20px;
background-color: red;
offset-path: path('m 202.12,52.491225 c 3.31251,-3.67658 9.10988,-1.554326 11.56362,1.965794 4.25681,6.106786 0.90896,14.34608 -5.12478,17.779745 -8.73843,4.972849 -19.65657,0.279213 -23.99586,-8.283763 -5.74075,-11.328536 0.34175,-24.995957 11.44274,-30.211989 13.90291,-6.532567 30.34978,0.957749 36.42811,14.601731 7.33722,16.469791 -1.57076,35.711912 -17.76071,42.644233 -19.03258,8.149499 -41.07928,-2.181898 -48.86036,-20.919698 -8.96668,-21.592884 2.79176,-46.45016 24.07869,-55.076478 24.15158,-9.7871929 51.82351,3.400736 61.2926,27.237666 10.61006,26.709172 -4.00907,57.198683 -30.39665,67.508724 -29.26598,11.43467 -62.57522,-4.61692 -73.72485,-33.555636 -12.26059,-31.822194 5.2244,-67.9527938 36.71462,-79.9409665 34.37797,-13.0875275 73.33121,5.8315987 86.15709,39.8736025 13.91526,36.933404 -6.43857,78.71028 -43.03259,92.37321 -39.48856,14.74365 -84.0899,-7.04535 -98.58933,-46.191569 -10.35797,-27.964909 -3.87292,-60.061453 15.98043,-82.20198927');
animation: move1 3s infinite linear;
}

@keyframes move1 {
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<div class="move"></div>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="1280"
   height="595"
   viewBox="0.0005 0 384.0128 178.50595"
   version="1.1"
   id="svg8"
   inkscape:version="1.0.2-2 (e86c870879, 2021-01-15)"
   sodipodi:docname="movement.svg">
  <defs
     id="defs2" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.62"
     inkscape:cx="926.94335"
     inkscape:cy="380.05589"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     inkscape:document-rotation="0"
     showgrid="false"
     inkscape:window-width="1920"
     inkscape:window-height="986"
     inkscape:window-x="-11"
     inkscape:window-y="-11"
     inkscape:window-maximized="1"
     units="px"
     showguides="false"
     scale-x="0.30001"
     inkscape:object-nodes="false"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-11.707165,8.6160947)">
    <path
       sodipodi:type="spiral"
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.30001"
       id="path835"
       sodipodi:cx="203.81085"
       sodipodi:cy="57.676441"
       sodipodi:expansion="1"
       sodipodi:revolution="4.19908"
       sodipodi:radius="82.813995"
       sodipodi:argument="-28.756319"
       sodipodi:t0="0.065857701"
       d="m 202.12,52.491225 c 3.31251,-3.67658 9.10988,-1.554326 11.56362,1.965794 4.25681,6.106786 0.90896,14.34608 -5.12478,17.779745 -8.73843,4.972849 -19.65657,0.279213 -23.99586,-8.283763 -5.74075,-11.328536 0.34175,-24.995957 11.44274,-30.211989 13.90291,-6.532567 30.34978,0.957749 36.42811,14.601731 7.33722,16.469791 -1.57076,35.711912 -17.76071,42.644233 -19.03258,8.149499 -41.07928,-2.181898 -48.86036,-20.919698 -8.96668,-21.592884 2.79176,-46.45016 24.07869,-55.076478 24.15158,-9.7871929 51.82351,3.400736 61.2926,27.237666 10.61006,26.709172 -4.00907,57.198683 -30.39665,67.508724 -29.26598,11.43467 -62.57522,-4.61692 -73.72485,-33.555636 -12.26059,-31.822194 5.2244,-67.9527938 36.71462,-79.9409665 34.37797,-13.0875275 73.33121,5.8315987 86.15709,39.8736025 13.91526,36.933404 -6.43857,78.71028 -43.03259,92.37321 -39.48856,14.74365 -84.0899,-7.04535 -98.58933,-46.191569 -10.35797,-27.964909 -3.87292,-60.061453 15.98043,-82.20198927"
       transform="matrix(2.5087133,0,0,1.2316414,-295.45996,3.4040924)" />
  </g>
</svg>
</body>
</html>

I think it has to do with the position, scale, and transform of the SVG, and the mover position, not so much the path. I would try aligning things so it works flat on. Then maybe try transforming a container to see if that will give you a skew/perspective of the entire thing without messing with the position of the path and mover.

But I haven’t actually animated using a path in some time and I’m not all that amazing at SVG either, so I might just have missed something.


Edit: Here is an example pen I found which might be a good reference.

I would simplify the SVG so you just have the path and stroke and make sure everything is positioned correctly and working. Then as I said, try to transform some wrapper/container to create the skew/perspective. Otherwise, I think you would have to draw the path in such a way that it looks like it is skewed/tilted with the perspective you want.

Thanks for the reply lasjorg ! I have been trying the SVG code using Inkscape and at last decided not to use it. Luckily I came across this wonderful online SVG edit tool - “editor.method.ac” and now everything’s working as expected. The SVG paths created using above tool works well and HTML elements align to the path created using this tool without any complexities of scaling anything.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.