I have the following SVG; it resembles the letter 'P.' I want to fill the entire 'P' with black, but gradually and following the flow of the drawing, as if it were being painted.
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g stroke="#000" stroke-width="1" fill="none">
<path d="M31.5294 14.2118C31.5294 18.8819 28.7623 22.9082 24.7793 24.7351C26.4612 23.3496 27.5322 21.248 27.5322 18.896C27.5322 14.7642 24.2259 11.4042 20.112 11.3205C20.0574 11.3167 20.0075 11.3167 19.9529 11.3167C19.8983 11.3167 19.8485 11.3167 19.7939 11.3205C18.2673 11.4033 17.0588 12.6663 17.0588 14.2108V28.6814C17.0588 33.4748 13.1699 37.3638 8.37646 37.3638V14.2118C8.37646 7.81928 13.5605 2.63528 19.9529 2.63528C26.3454 2.63528 31.5294 7.81928 31.5294 14.2118Z"/>
</g>
</svg>This is a visual idea of what I want to do (not exactly like that, you got the point!)
If I simply fill from bottom to top or from left to right, the solution of others similars questions, it won't follow the 'P' shape as it's being painted. Please, note: I don't have so much expertise on SVG.
I made an example of how to do this. I know it may not be precisely what you wanted but this exemplifies a path that can be followed. I recommend you make your adjustments so that it suits your purpose.
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
@keyframes clip-circle {
0% {
clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%, 0 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%);
}
25% {
clip-path: polygon(0 100%, 0 34%, 0 34%, 0 34%, 0 34%, 50% 34%, 50% 34%, 50% 34%, 50% 34%, 50% 100%);
}
50% {
clip-path: polygon(0 100%, 0 0, 50% 0, 50% 0, 50% 0, 50% 34%, 50% 34%, 50% 34%, 50% 34%, 50% 100%);
}
75% {
clip-path: polygon(0 100%, 0 0, 100% 0, 100% 0, 100% 0, 50% 34%, 50% 34%, 50% 34%, 50% 34%, 50% 100%);
}
100% {
clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%, 100% 100%, 50% 70%, 50% 34%, 50% 34%, 50% 34%, 50% 100%);
}
}
#path2 {
animation: clip-circle linear 2s infinite;
}
</style>
<g
stroke="#000000"
stroke-width="1"
fill="none"
id="g1">
<path
d="m 31.5294,14.2118 c 0,4.6701 -2.7671,8.6964 -6.7501,10.5233 1.6819,-1.3855 2.7529,-3.4871 2.7529,-5.8391 0,-4.1318 -3.3063,-7.4918 -7.4202,-7.5755 -0.0546,-0.0038 -0.1045,-0.0038 -0.1591,-0.0038 -0.0546,0 -0.1044,0 -0.159,0.0038 -1.5266,0.0828 -2.7351,1.3458 -2.7351,2.8903 v 14.4706 c 0,4.7934 -3.8889,8.6824 -8.68234,8.6824 v -23.152 c 0,-6.39252 5.18404,-11.57652 11.57644,-11.57652 6.3925,0 11.5765,5.184 11.5765,11.57652 z"
id="path1" />
</g>
<g
stroke="#000000"
stroke-width="1"
fill="none"
id="g2">
<path
d="m 31.5294,14.2118 c 0,4.6701 -2.7671,8.6964 -6.7501,10.5233 1.6819,-1.3855 2.7529,-3.4871 2.7529,-5.8391 0,-4.1318 -3.3063,-7.4918 -7.4202,-7.5755 -0.0546,-0.0038 -0.1045,-0.0038 -0.1591,-0.0038 -0.0546,0 -0.1044,0 -0.159,0.0038 -1.5266,0.0828 -2.7351,1.3458 -2.7351,2.8903 v 14.4706 c 0,4.7934 -3.8889,8.6824 -8.68234,8.6824 v -23.152 c 0,-6.39252 5.18404,-11.57652 11.57644,-11.57652 6.3925,0 11.5765,5.184 11.5765,11.57652 z"
id="path2"
style="fill:#000000;fill-opacity:1;stroke:none" />
</g>
</svg>Another alternative is the following
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
@keyframes clip-circle {
0% {
stroke-dashoffset: 60px;
}
100% {
stroke-dashoffset: -60px;
}
}
#path2 {
animation: clip-circle linear 2s infinite;
}
</style>
<clipPath id="clip">
<path
d="m 31.5294,14.2118 c 0,4.6701 -2.7671,8.6964 -6.7501,10.5233 1.6819,-1.3855 2.7529,-3.4871 2.7529,-5.8391 0,-4.1318 -3.3063,-7.4918 -7.4202,-7.5755 -0.0546,-0.0038 -0.1045,-0.0038 -0.1591,-0.0038 -0.0546,0 -0.1044,0 -0.159,0.0038 -1.5266,0.0828 -2.7351,1.3458 -2.7351,2.8903 v 14.4706 c 0,4.7934 -3.8889,8.6824 -8.68234,8.6824 v -23.152 c 0,-6.39252 5.18404,-11.57652 11.57644,-11.57652 6.3925,0 11.5765,5.184 11.5765,11.57652 z"
id="path1" />
</clipPath>
<path
style="stroke: black; stroke-width:15px; stroke-dasharray:60px"
clip-path="url(#clip)"
d="m 11.161548,36.849133 c 0,0 -0.454054,-20.678214 2.082777,-26.595461 C 15.781156,4.3364244 23.634802,2.390635 28.037383,9.7196265 32.439964,17.048618 25.420561,24.245661 25.420561,24.245661"
id="path2" />
</svg>