I would like to know how to set the appropiate value on dasharray to have the signature wrote from left to right and without overrun the SVG length… Is there a wasy aprt to check out different values?
/* take a bunch of the svg attributes and place them here for the sake of dryness */
path,
line {
fill: none;
stroke: #2a3745;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.stroke-ec {
stroke-dasharray: 330;
animation: write2 5s infinite linear;
}
/* keyframes */
@keyframes write2 {
0% {
stroke-dashoffset: 340;
}
100% {
stroke-dashoffset: 0;
}
}
<svg id="signature" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 280 100" xml:space="preserve">
<path class="stroke-ec" d="M112.1,46.8c-10.1,3.1-20.7,4.4-31.3,4c-5.3-0.2-10.6-0.9-15.9-2c-1.2-0.3-2.4-0.5-3.6-0.8 c-0.6-0.2-1.2-0.3-1.8-0.5c-0.1,0-0.7-0.1-0.9-0.2c-0.3,0-0.4-0.2-0.3-0.5c-0.1-0.4,0-0.7,0.4-0.8c2.1-1.4,4.6-2.3,6.9-3.3 c9.6-4.2,19.9-7.2,30.4-7.4c8.3-0.2,18.3,1.2,23.8,8.2c3.4,4.2,4.1,10.3,1.7,15.2c-2.2,4.7-7.1,7.8-12.2,8.1 c0.2,0.3,0.4,0.5,0.6,0.8c3.3-8.4,8-16.1,13.8-23.1c2.8-3.4,5.9-6.7,8.9-10c3.1-3.2,6.1-6.5,9.5-9.4c4-3.4,8.4-6.2,12.9-9 c-0.3-0.3-0.5-0.7-0.8-1c-8.6,9-17.2,18-25.9,27.1c-0.3,0.3-0.3,0.8,0.1,1c1.6,0.7,3,0.1,4.4-0.5c2.2-0.9,4.3-1.9,6.5-2.9 c4.3-1.9,8.5-3.7,12.8-5.6c0.7-0.3,0.2-1.3-0.5-1.1c-6.1,1.5-11.5,5.1-15.3,10.2c-0.3,0.4,0.1,0.9,0.5,0.9 c18.2,1.3,36.4,1.9,54.7,1.8c5.2,0,10.4-0.1,15.6-0.2c0.8,0,0.8-1.3,0-1.2c-18.2,0.5-36.5,0.3-54.7-0.6 c-5.2-0.3-10.4-0.6-15.6-0.9c0.2,0.3,0.4,0.6,0.5,0.9c3.5-4.8,8.7-8.2,14.5-9.6c-0.2-0.4-0.3-0.8-0.5-1.1c-3.7,1.6-7.3,3.2-11,4.8 c-1.8,0.8-3.6,1.6-5.4,2.4c-0.9,0.4-1.8,0.8-2.7,1.2c-1,0.4-2.3,1.2-3.4,0.6c0,0.3,0.1,0.7,0.1,1c8.6-9,17.2-18,25.9-27.1 c0.5-0.5-0.1-1.4-0.8-1c-3.9,2.4-7.7,4.9-11.3,7.7c-3.7,2.9-7,6.3-10.2,9.7c-6.3,6.7-12.5,13.5-17.4,21.3 c-2.7,4.3-4.9,8.8-6.7,13.5c-0.1,0.4,0.2,0.8,0.6,0.8c4.6-0.3,9-2.5,11.8-6.2c3-4,3.9-9.5,2.3-14.2c-2.9-9-12.9-12.5-21.5-13.3 c-11.6-1-23.3,1.8-34,6.2c-2.7,1.1-5.3,2.3-7.9,3.5c-1.2,0.6-4.5,2-3,3.9c0.6,0.8,1.9,0.9,2.8,1.1c1.5,0.4,3,0.8,4.5,1.1 c2.8,0.6,5.7,1.1,8.6,1.4c13.2,1.6,26.7,0.4,39.5-3.4C113.2,47.8,112.9,46.6,112.1,46.8L112.1,46.8z"/>
</svg>
The stroke must be filled once and then animation restarts from left
2
Answers
To set the appropriate value for the
stroke-dasharray
property in order to have the signature wrote from left to right without exceeding the SVG length, you need to consider the length of the path.In the provided SVG code snippet, the
stroke-dasharray
property is set to330
, and the animation is defined to write the signature over a duration of5s
. However, the length of the path is not known from the given code. To determine the exact length of the path, you can use JavaScript or external tools. Here’s an example of how you can calculate the length of the path using JavaScript:Once you have the length of the path, you can adjust the
stroke-dasharray
value accordingly to ensure the signature is written without exceeding the length of the path. Thestroke-dasharray
property defines the length of dashes and gaps in the stroke. To achieve the desired effect, you can experiment with different values until you find one that suits your needs.For example, if the calculated path length is
500
, you could setstroke-dasharray
to a value like500
or500 1000
to control the length of dashes and gaps in the stroke animation. Remember to update the CSS code in the SVG accordingly with the newstroke-dasharray
value:By adjusting the
stroke-dasharray
value and experimenting with different lengths, you can achieve the desired effect of writing the signature from left to right without exceeding the length of the SVG.Once you have the length of the path, you can adjust the stroke-dasharray value accordingly to ensure the signature is written without exceeding the length of the path. The stroke-dasharray property defines the length of dashes and gaps in the stroke. To achieve the desired effect, you can experiment with different values until you find one that suits your needs. For example, if the calculated path length is 500, you could set stroke-dasharray to a value like 500 or 500 1000 to control the length of dashes and gaps in the stroke animation. Remember to update the CSS code in the SVG accordingly with the new stroke-dasharray value:
By adjusting the stroke-dasharray value and experimenting with different lengths, you can achieve the desired effect of writing the signature from left to right without exceeding the length of the SVG.
Your
<path>
is an outline: so it contains inner and outer contoursSo your animation will appear to run twice.
You’ll need to draw a "inner/center" path for the stroke animation.
<pathLength>
: set relative/computed lengthFrom mdn docs
This way we can use relative
dash-array
values like soThe solid outline path can be used as a clip-path to emulate variable stroke widths.
For a perfect result you’ll need to tweak the animated "center" stroke to prevent undesired effects.
Further reading
See ccprog’s great tutorial on css-tricks "Animate Calligraphy with SVG"