This is a technique where the signature path appears to be drawn live, as if by an invisible pen, starting at the beginning of the path and ending at the end.
It is a classic SVG signature animation technique.
What the CSS Is Doing (Step-by-Step)
1. stroke-dasharray: 2250.388671875;
This sets the dash pattern to one very long dash the same length as the path.
That means:
- The entire path stroke becomes one single dash
- If
stroke-dashoffsetshifts this dash out of view, the stroke becomes invisible - This value is normally equal to the path’s total length (often measured with JavaScript or design software)
So this is the first step in making the path hideable and animatable.
2. stroke-dashoffset: 2250.388671875;
This shifts the dash all the way off the path.
Result:
The signature starts completely invisible.
This sets the stage for the “writing” animation.
3. The animation
animation: sign 8s ease;
animation-fill-mode: forwards;This tells CSS:
- Run the
signanimation - For 8 seconds
- Using an ease timing curve
- And keep the final state visible when the animation ends
4. The @keyframes
@keyframes sign {
to {
stroke-dashoffset: 0;
}
}During the animation:
stroke-dashoffsetgoes from 2250.38867 → 0
This slowly pulls the long dash back into place, revealing the stroke from start to finish.
HTML Code
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700" height="700" viewBox="385,110,700,700"><g id="document" fill="#ffffff" fill-rule="nonzero" stroke="#000000" stroke-width="0" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><rect x="385" y="78.57143" transform="scale(1,1.4)" width="700" height="500" id="Shape 1 1" vector-effect="non-scaling-stroke"/></g><g fill-opacity="0" fill="#000000" fill-rule="nonzero" stroke="#000000" stroke-width="13" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g id="stage"><g id="layer1 1"><path id="signature" d="M553,231c-19.42774,50.61151 -46.70689,97.61646 -67.54055,147.61333c-6.65112,15.96144 -12.83864,32.09527 -18.65419,48.37906c-2.48147,6.94822 -4.90398,13.91842 -7.3018,20.89594c-0.61189,1.78057 -1.40297,4.10369 -2.04248,5.98494c-0.23785,0.69968 -1.22072,2.63618 -0.71295,2.09925c5.8255,-6.1601 9.92629,-15.15634 14.34182,-22.34278c7.02936,-11.44057 14.35768,-22.61101 22.65058,-33.18348c3.34496,-4.26444 6.82532,-8.42147 10.35064,-12.53724c0.03838,-0.04481 2.7386,-3.18187 2.77977,-3.19896c2.11725,-0.87884 4.89985,2.29641 5.70658,3.06877c3.23652,3.09862 4.57087,7.95882 5.23165,12.23423c2.47631,16.02231 -12.60572,41.15643 7.03411,49.62108c9.36851,4.03777 21.04136,-0.58962 29.12563,-5.47134c18.45495,-11.1441 35.40939,-29.98129 44.13485,-49.73849c0.67908,-1.86732 1.65539,-4.11265 1.59226,-6.14702c-0.56702,-18.27235 -21.91509,-10.12929 -29.95607,-2.9546c-13.64765,12.17732 -23.27029,34.92788 -20.77566,53.36955c2.21584,16.38075 16.70135,29.77529 33.78061,27.01728c31.31316,-5.05653 41.68698,-43.7701 53.56541,-67.83773c4.61879,-9.35842 9.6068,-18.48862 15.29655,-27.24645c19.41958,-29.89118 51.29056,-50.3092 66.70638,-82.7971c5.8444,-12.31672 17.6432,-42.74432 -6.38471,-42.3687c-1.91573,0.02995 -3.84236,0.28113 -5.69734,0.76067c-4.75179,1.2284 -8.77433,3.35601 -12.80453,6.11969c-5.29908,3.6338 -6.94167,5.84915 -11.56066,10.60226c-33.74119,41.37879 -41.61102,99.19958 -43.07636,151.08505c-0.48447,17.1542 -0.15274,46.48404 22.41192,49.66641c3.22815,0.45528 5.74002,0.2624 8.99113,-0.49295c22.78967,-5.29488 33.84958,-33.59502 39.00765,-53.90823c2.4717,-9.73389 3.65176,-19.60652 9.03526,-28.35785c6.78467,-11.02906 17.87881,-18.92601 27.02569,-27.83764c14.51832,-14.14492 27.5432,-29.73911 41.561,-44.3693c12.32806,-12.86664 27.39089,-25.38875 36.60873,-40.86605c4.53495,-10.23016 -3.3326,-19.52181 -13.59598,-20.60436c-8.04767,-0.84884 -16.38427,3.69541 -21.57961,9.62344c-14.29023,16.30555 -18.21868,41.03625 -23.24309,61.27081c-5.79888,23.35358 -13.69054,46.06739 -20.4375,69.1484c-3.02392,10.34468 -6.22634,20.6254 -9.35288,30.93837c-1.81431,5.98454 -3.88555,11.92853 -1.66466,18.07784c4.51069,12.48943 23.17453,8.66248 32.04929,4.63238c17.71836,-8.04605 30.05645,-24.22572 38.7484,-41.11918c2.82936,-5.49908 5.29389,-11.18723 7.56812,-16.93581c0.59784,-1.51117 1.52015,-3.94269 2.13838,-5.62146c0.25306,-0.68719 0.50258,-1.37568 0.75038,-2.06478c0.24906,-0.69259 1.36002,-2.47712 0.74018,-2.08026c-3.35314,2.1469 -5.48951,10.64409 -6.87829,14.1384c-4.60849,13.73086 -6.89365,27.81329 -6.1434,42.30254c0.27229,5.25868 0.62131,11.27069 3.63501,15.78781c4.53245,6.79352 13.13845,8.83705 20.83458,8.65453c15.54094,-0.36857 32.1971,-8.24282 43.08554,-19.22442c18.84998,-19.01127 27.29591,-51.13588 18.49759,-76.67944c-4.54783,-13.2034 -15.49649,-28.15076 -31.23902,-27.405c-7.57101,0.35866 -17.69994,3.4152 -22.17257,10.19648c-8.85998,13.43325 -4.89558,28.36213 10.99107,33.26687c29.34709,5.38092 51.51709,-25.06559 64.08469,-47.43261" id="Path 1"/></g></g></g></svg>
</body>CSS Code
#signature{
stroke-dasharray: 2250.388671875;
stroke-dashoffset: 2250.388671875;
animation: sign 8s ease;
animation-fill-mode: forwards;
}
@keyframes sign {
to {
stroke-dashoffset: 0;
}
}
Leave a Reply