Animation SVG wrong direction - css

Question

I trying to animate a word with a svg that I made. The word write itself but in the wrong direction (Start from the end of the word and finish at the beginning). Can I control the direction of the animation?
#keyframes offset{
100%{
stroke-dashoffset:0;
}
}
.motEpicerie{ stroke:#000; stroke-width:3px;
stroke-dasharray:984;
stroke-dashoffset:984;
animation:offset 4s linear forwards;
}
<svg version="1.1" id="Layer_1" class="epicerie " xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="289.334px" height="147.667px" viewBox="0 0 289.334 147.667" enable-background="new 0 0 289.334 147.667" xml:space="preserve">
<g>
<path class="motEpicerie" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="transparent" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M228.293,46.177c-4.689,8.297-10.952,13.491-20.684,13.784c-6.413,0.193-11.021-1.515-11.733-7.494 c-0.903-7.58,7.276-20.367,15.424-22.665c5.503-1.552,10.582,2.217,5.812,7.603c-6.455,7.287-20.035,8.148-20.035,8.148 c-2.399,5.764-3.151,7.966-8.06,12.141c-4.508,3.833-14.247,3.839-8.275-9.593l8.301-19.347c0,0-7.103,16.342-8.301,19.347 c-1.814,4.233-6.919,14.211-14.439,11.617c-7.103-2.45,2.603-18.859,3.811-22.799c-3.501-1.209-12.115-3.761-13.608-6.29 c-2.963-5.02,6.241-7.678,5.849-2.726c-0.459,5.752-11.412,36.231-33.89,32.81c-8.804-2.026-6.048-11.959-6.048-11.959 c0.771-7.007,7.591-14.874,13.038-17.959c3.847-2.178,7.67-1.381,8.536,1.39c0.975,3.118-0.669,5.983-3.25,7.726 c-8.083,5.457-17.817,6.573-17.817,6.573c-1.43,3.532-5.029,7.645-7.839,10.012c-9.926,8.362-28.189,5.832-23.42-7.89 c7.371-21.206,24.367-21.562,21.98-11.38l-0.745,2.174c4.837-10.943-9.491-13.03-18.257,2.527L93.183,44.8 c0,0-4.396,10.209-9.506,13.951c-5.704,4.177-12.03,1.504-8.658-7.711l8.658-21.077l-2.758,6.713 c-7.942,7.561-33.585,8.77-32.967,20.387c0.428,8.049,16.558,3.14,18.419-18.956c0.255-3.033-1.372-12.257-11.787-5.706 c-3.734,2.349-7.263,6.262-7.263,6.262L30.809,77.19l20.24-47.227c-1.11,2.632-4.771,11.649-5.968,14.272 C31.615,73.749,8.633,67.459,3.315,57.511c-5.617-10.506,7.495-26.177,25.397-23.516c3.843,0.571,0.161,3.467-4.757,2.581 c-4.244-0.765-10.965-6.193-9.918-11.854c1.773-9.596,12.306-14.502,21.47-13.243c6.67,0.916,5.462,5.986,2.559,7.76 c-7.335,4.482-14.827,4.854-22.417,2.661c0,0-9.846-2.604-13.387-10.08"/>
</g>
</svg>
https://jsfiddle.net/piieell/jo1ern3r/
Thank you!

Answer 1

Just reverse the stroke-dashoffset to the negative value.
Of course, the most obvious solution would be to simply re-write the path in the correct direction. Pre-planning is everything. :)
.motEpicerie {
stroke: #000;
stroke-width: 3px;
stroke-dasharray: 984;
stroke-dashoffset: -984;
animation: offset 4s linear forwards;
}
#keyframes offset {
100% {
stroke-dashoffset: 0;
}
}
.motEpicerie {
stroke: #000;
stroke-width: 3px;
stroke-dasharray: 984;
stroke-dashoffset: -984;
animation: offset 4s linear forwards;
}
<svg version="1.1" id="Layer_1" class="epicerie " xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="289.334px" height="147.667px" viewBox="0 0 289.334 147.667" enable-background="new 0 0 289.334 147.667"
xml:space="preserve">
<g>
<path class="motEpicerie" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="transparent" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M228.293,46.177c-4.689,8.297-10.952,13.491-20.684,13.784c-6.413,0.193-11.021-1.515-11.733-7.494 c-0.903-7.58,7.276-20.367,15.424-22.665c5.503-1.552,10.582,2.217,5.812,7.603c-6.455,7.287-20.035,8.148-20.035,8.148 c-2.399,5.764-3.151,7.966-8.06,12.141c-4.508,3.833-14.247,3.839-8.275-9.593l8.301-19.347c0,0-7.103,16.342-8.301,19.347 c-1.814,4.233-6.919,14.211-14.439,11.617c-7.103-2.45,2.603-18.859,3.811-22.799c-3.501-1.209-12.115-3.761-13.608-6.29 c-2.963-5.02,6.241-7.678,5.849-2.726c-0.459,5.752-11.412,36.231-33.89,32.81c-8.804-2.026-6.048-11.959-6.048-11.959 c0.771-7.007,7.591-14.874,13.038-17.959c3.847-2.178,7.67-1.381,8.536,1.39c0.975,3.118-0.669,5.983-3.25,7.726 c-8.083,5.457-17.817,6.573-17.817,6.573c-1.43,3.532-5.029,7.645-7.839,10.012c-9.926,8.362-28.189,5.832-23.42-7.89 c7.371-21.206,24.367-21.562,21.98-11.38l-0.745,2.174c4.837-10.943-9.491-13.03-18.257,2.527L93.183,44.8 c0,0-4.396,10.209-9.506,13.951c-5.704,4.177-12.03,1.504-8.658-7.711l8.658-21.077l-2.758,6.713 c-7.942,7.561-33.585,8.77-32.967,20.387c0.428,8.049,16.558,3.14,18.419-18.956c0.255-3.033-1.372-12.257-11.787-5.706 c-3.734,2.349-7.263,6.262-7.263,6.262L30.809,77.19l20.24-47.227c-1.11,2.632-4.771,11.649-5.968,14.272 C31.615,73.749,8.633,67.459,3.315,57.511c-5.617-10.506,7.495-26.177,25.397-23.516c3.843,0.571,0.161,3.467-4.757,2.581 c-4.244-0.765-10.965-6.193-9.918-11.854c1.773-9.596,12.306-14.502,21.47-13.243c6.67,0.916,5.462,5.986,2.559,7.76 c-7.335,4.482-14.827,4.854-22.417,2.661c0,0-9.846-2.604-13.387-10.08"
/>
</g>
</svg>

Answer 2

You would have to reverse the order of the points on your path.
Your path is pretty complex with a lot of points so it may be harder to distinguish the points and re-order them.
Here is a simple example that worked for me though. (Just changing the order of the polyline points)
Old Path/Code:
.st2{fill:none;stroke:#2D3E99;stroke-width:13;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.g {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 230.2 173.4" style="enable-background:new 0 0 230.2 173.4;" xml:space="preserve">
<polyline class="st2 g" points="163.8,65.5 116.2,83.2 47,59.1 6.5,45 113.8,6.5 223.7,45.3 188.3,56.8 "/>
</svg>
New Path/Code:
.st2{fill:none;stroke:#2D3E99;stroke-width:13;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.g {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 230.2 173.4" style="enable-background:new 0 0 230.2 173.4;" xml:space="preserve">
<polyline class="st2 g" points="188.3,56.8 223.7,45.3 113.8,6.5 6.5,45 47,59.1 116.2,83.2 163.8,65.5"/>
</svg>
it would be nice if there was a tool that would re-order the points though