Svg Animation On Path Like The Snail

I have the following SVG and I would like to draw the circles pixel by pixel on the path after moveing. It's like when the snail goes he let a streak behind him. So my question is

Solution 1:

You can do something like this for an instance:

.path {
  stroke-dasharray: 1230;
  stroke-dashoffset: 1230;
  animation: snail 6s linear forwards;
}

@keyframes snail {
  to {
    stroke-dashoffset: 0;
  }
}

<svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"version="1.1"viewBox="0 0 1000 200"id="svgBox"style="background-color:#e4e4e4"><pathclass="path"d="M3.858,58.607 c16.784-5.985,33.921-10.518,51.695-12.99c50.522-7.028,101.982,0.51,151.892,8.283c17.83,2.777,35.632,5.711,53.437,8.628 c51.69,8.469,103.241,11.438,155.3,3.794c53.714-7.887,106.383-20.968,159.374-32.228c11.166-2.373,27.644-7.155,39.231-4.449L10,10"stroke="pink"stroke-width="12"fill="none"id="animateMotion"/><circlecx=""cy=""r="5"fill="red"><animateMotiondur="6s"repeatCount="0"><mpathxlink:href="#animateMotion"/></animateMotion></circle></svg>

Solution 2:

Maybe this article which I think will give you some pointers, and its linked example CodePen here. I cut & pasted your path and set the id and the line gets drawn as per your 'snail trail' requirement.

Here is the resulting svg:

<svgversion="1.1"id="Layer_1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"x="0px"y="0px"width="340px"height="333px"viewBox="0 0 340 333"enable-background="new 0 0 340 333"xml:space="preserve"><pathclass="path"d="M3.858,58.607 c16.784-5.985,33.921-10.518,51.695-12.99c50.522-7.028,101.982,0.51,151.892,8.283c17.83,2.777,35.632,5.711,53.437,8.628 c51.69,8.469,103.241,11.438,155.3,3.794c53.714-7.887,106.383-20.968,159.374-32.228c11.166-2.373,27.644-7.155,39.231-4.449L10,10"stroke="Orange"stroke-width="10"fill="#FFFFFF"stroke-miterlimit="10"id="animateMotion"/><pathclass="path"fill="#FFFFFF"stroke="#000000"stroke-width="4"stroke-miterlimit="10"d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
    s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
    C46.039,146.545,53.039,128.545,66.039,133.545z"/></svg>

And the CSS

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}