Я пытаюсь применить CSS для линейного заполнения элемента пути вдоль пути. Но у меня нет никакого успеха.
.self-draw {
stroke-dasharray: var(--dash-length);
stroke-dashoffset: var(--dash-length);
animation-name: self-draw-animate, color;
animation-duration: 2s, 2s;
animation-delay: var(--delay), 4s;
animation-iteration-count: 1, 1;
animation-direction: normal, normal;
animation-timing-function: linear, linear;
animation-fill-mode: both;
}
@keyframes self-draw-animate {
0% {
stroke-dashoffset: var(--dash-length);
}
100% {
stroke-dashoffset: 0px;
}
}
@keyframes color {
100% {
fill: black;
}
}
path:nth-of-type(1) {
--delay: 0s;
}
path:nth-of-type(2) {
--delay: 1s;
}
path:nth-of-type(3) {
--delay: 2s;
}
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" width="258.66" height="60.5" viewBox="0 0 258.66 60.5">
<title>signature-self-draw</title>
<g>
<path class="self-draw" d="M160.05,69.23q0,1.68-3.39,4.86a47.27,47.27,0,0,1-8.28,6.1q-.63,2-1.86,7.28A65.3,65.3,0,0,1,142.9,99.2a24.78,24.78,0,0,1-5.45,7q-11,10.36-24.58,10.37a17.28,17.28,0,0,1-6.89-1.3,12.76,12.76,0,0,0-1.65,5.63,8.7,8.7,0,0,0,2,5.56.68.68,0,0,1,.21.49c0,.19-.11.29-.35.29-.54,0-1.12-.73-1.75-2.19a10.26,10.26,0,0,1-.94-4.08,12.89,12.89,0,0,1,1.8-6.06q-7.35-3.79-7.35-13a22.81,22.81,0,0,1,3.51-11.81,36.81,36.81,0,0,1,9.88-10.58q8.13-6,16.07-6A9.55,9.55,0,0,1,134.3,76a8.62,8.62,0,0,1,2.55,6.57,18.11,18.11,0,0,1-.63,4.61q5.16-3.45,9.14-5.84a34,34,0,0,1,6.36-9.49c2.56-2.65,4.78-4,6.68-4Q160.05,67.85,160.05,69.23ZM136.22,82.41a7.86,7.86,0,0,0-2.34-5.94,8.53,8.53,0,0,0-6.17-2.25q-9.46,0-18.3,9.84t-8.84,20.39q0,6.93,5.1,9.85a51.88,51.88,0,0,1,6.85-8.62,6.13,6.13,0,0,1-2.32-4.78,5.22,5.22,0,0,1,1.34-3.6,4.18,4.18,0,0,1,3.23-1.5c1.57,0,2.36.73,2.36,2.18a2.61,2.61,0,0,1-.88,2,2.91,2.91,0,0,1-2.08.83c-1.14,0-1.72-.55-1.72-1.65A2.3,2.3,0,0,1,112.8,98a2.85,2.85,0,0,0,.14-.52.19.19,0,0,0-.21-.21q-.6,0-1.23,1.26a5.58,5.58,0,0,0-.63,2.5,5.38,5.38,0,0,0,2.14,4.15q7.08-7.45,22.33-17.41A20.22,20.22,0,0,0,136.22,82.41Zm8.72-.14q-4.12,2.6-9,5.9a30.65,30.65,0,0,1-8.14,13.08q-5.82,5.63-11.16,5.63a8.88,8.88,0,0,1-3.56-.85,51.51,51.51,0,0,0-6.75,8.65,15.75,15.75,0,0,0,6.54,1.3,24.34,24.34,0,0,0,12.8-3.74,33.87,33.87,0,0,0,10.62-10.39,40.34,40.34,0,0,0,3.27-5.75q1.19-2.66,3.86-10C143.85,84.88,144.35,83.6,144.94,82.27ZM135,88.74l-2.32,1.58q-13.26,9.14-19.13,15.22a6.7,6.7,0,0,0,3.17.78q4.92,0,10.3-5.17A32.06,32.06,0,0,0,135,88.74Zm24.4-19.44c0-.57-.33-.85-1-.85-1.57,0-3.32,1.09-5.25,3.25a23.2,23.2,0,0,0-4.49,7.62,47.27,47.27,0,0,0,7.68-5.7Q159.39,70.77,159.39,69.3Z" transform="translate(-97.47 -67.28)" fill="#fff" stroke="#000" stroke-miterlimit="10" style="--dash-length: 567.5332641601562px;"/>
<path class="self-draw" d="M170.65,104.15c0,.5-1.71,2.77-5.13,6.83-2.77,3.34-5,5-6.55,5a3.28,3.28,0,0,1-2.64-1.21,4.56,4.56,0,0,1-1-3,9.1,9.1,0,0,1,1.12-4.11,47.3,47.3,0,0,1-5.38,6.64,5.44,5.44,0,0,1-3.62,1.72,3.85,3.85,0,0,1-3.13-1.6,6.27,6.27,0,0,1-1.26-4q0-6.75,9.53-12,4.17-2.32,6.75-2.33a1.9,1.9,0,0,1,2.18,2.11,6.12,6.12,0,0,1-.29,1.59l1.8-3.41a8.47,8.47,0,0,0,1.86.24,16.43,16.43,0,0,0,2.46-.24l-6.22,10.3q-3.24,5.42-3.24,7.13c0,1.11.46,1.66,1.38,1.66s2.44-1.08,4.5-3.23a59.66,59.66,0,0,0,6.31-7.94c.14-.23.26-.35.38-.35A.19.19,0,0,1,170.65,104.15ZM161,98.33c0-1.14-.53-1.72-1.58-1.72q-3.24,0-8.49,6.33t-5.26,10.23c0,1.52.68,2.29,2,2.29q2.43,0,8.4-8Q161,100.8,161,98.33Z" transform="translate(-97.47 -67.28)" fill="#fff" stroke="#000" stroke-miterlimit="10" style="--dash-length: 174.83096313476562px;"/>
<path class="self-draw" d="M209.82,104.15a4.77,4.77,0,0,1-.35.57L208,106.79q-6.62,9.19-9.78,9.19a3.39,3.39,0,0,1-2.71-1.23,4.65,4.65,0,0,1-1.06-3.16,8.58,8.58,0,0,1,1.34-4.26c.16-.28,1-1.53,2.56-3.76q3-4.21,3-5.52a1.27,1.27,0,0,0-1.44-1.44q-4.65,0-15.93,19.06a9.83,9.83,0,0,0-1.93-.14,17.2,17.2,0,0,0-2.46.14l5-7.91c3.25-5.21,4.88-8.39,4.88-9.57s-.43-1.58-1.3-1.58q-1.94,0-6.32,5.56a93.56,93.56,0,0,0-8.72,13.5,11.89,11.89,0,0,0-2.08-.14,16.8,16.8,0,0,0-2.39.14l5-7.91q5.21-8.16,5.2-10.09c0-.71-.27-1.06-.81-1.06q-1.72,0-7.15,7.54c-.23.33-.42.5-.56.5s-.14-.1-.14-.22a31.54,31.54,0,0,1,3.24-4.38c2.11-2.64,3.74-4,4.89-4a2.38,2.38,0,0,1,1.94,1.08,4.09,4.09,0,0,1,.81,2.55c0,1.36-.69,3.24-2.08,5.66q6.33-9.28,9.42-9.29a3,3,0,0,1,2.43,1.2,4.67,4.67,0,0,1,.95,3,10.7,10.7,0,0,1-1.86,5.1q6.67-9.28,10-9.29a3.14,3.14,0,0,1,2.54,1.31,4.85,4.85,0,0,1,1,3.16,10.42,10.42,0,0,1-1.72,5.1s-1,1.52-3,4.5A8,8,0,0,0,197,114a1.28,1.28,0,0,0,1.45,1.45q2.75,0,9.08-8.88l1.09-1.51.63-.78c.12-.23.24-.35.36-.35A.19.19,0,0,1,209.82,104.15Z" transform="translate(-97.47 -67.28)" fill="#fff" stroke="#000" stroke-miterlimit="10" style="--dash-length: 259.19708251953125px;"/>
</g>
</svg>
Когда применяется заливка, это не похоже на линейную заливку. Такое ощущение, что цвет заливки прыгает. Есть ли хороший способ заполнить внутреннюю часть пути вдоль длины пути следующим образом - https://codepen.io/smpao1/pen/ZEGxjxM, используя предпочтительно CSS, а не SMIL?
Заранее спасибо.