How to do draw animation effect fill SVG?

Question

I am trying to animate the SVG logo like drawing fill path without stroke. my logo is looking like that.

Is it possible to create fill drawing instead of strokes? I saw many solutions about that but all are used by strokes. I also found This solution is pretty similar to my problem. but my SVG path is a bit complicated and can't create a fake path with stroke-like they created. I want it growing from nothing and drawing animation effect with fill.

My full SVG code here

 <svg
    class="logo-white"
    xmlns="http://www.w3.org/2000/svg"
    width="184"
    height="90"
    viewBox="0 0 184 90.733"
  >
    <path
      class="draw-logo"
      id="logo-path"
      data-name="Path 1"
      d="M84.763,300a45.529,45.529,0,0,0-31.688,12.921l-.009-.009L37.2,328.748,9.482,356.417s-1.207,1.2-1.813,1.81c-.006.006-.012.012-.018.017A18.987,18.987,0,0,1-5.69,363.663c-10.664.118-18.855-7.748-18.965-18.213A18.247,18.247,0,0,1-6.319,326.813c10.148-.112,18.136,6.911,19.128,16.466L33.934,322.07C25.866,308.538,10.8,299.807-6.977,300c-25.612.282-45.29,20.283-45.021,45.763.272,25.694,20.383,45.254,46.566,44.963A46.86,46.86,0,0,0,26.933,377.55c.088-.085.178-.166.265-.252l.285-.285,15.235-15.206c6.542,17.268,22.741,29.1,43.1,28.875,26.209-.291,46.458-20.232,46.175-45.838-.285-25.679-20.775-45.133-47.233-44.842m1.288,63.661c-10.664.118-18.855-7.748-18.965-18.213a18.247,18.247,0,0,1,18.336-18.638c10.776-.119,19.122,7.8,19.237,18.263.115,10.429-7.934,18.469-18.608,18.587"
      fill="#f7f7f7"
      transform="translate(52 -300)"
    />
  </svg>

Answer 1

Your figure is drawn in double stroke

Therefore, it is impossible to animate its filling with color using stroke-dasharray
Consider creating a single outline that runs in the middle of the shape.

Set the width of this line 25px and we will animate its appearance by changing the attributes ofstroke-dasharray

Animation CSS

.container {
padding:10px;
background-color:#151515;
width:50%;
}
.draw-logo {

fill:none;
stroke:#F7F7F7;
stroke-width:25;
stroke-dasharray:0,425; 
animation: draw 4s linear  forwards;
animation-iteration-count: 2;
}


@keyframes draw {
0% {stroke-dasharray: 0,425;}
100% {stroke-dasharray: 425,0;}
}

<div class="container">
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="logo-white" width="184" height="95" viewBox="0 0 184 90.7" version="1.1">
  
 
 <path class="draw-logo" d="m81.3 30.4c0 0-11.7-9.8-17.5-13-3.8-2.2-9.9-4.6-15.3-5-5.7-0.4-11.7 0.4-16.8 2.9-4.8 2.3-8.7 6.3-11.8 10.7-3.2 4.5-5.6 9.8-6.3 15.2-0.9 6.2-0.4 12.9 2.3 18.6 2.7 5.7 7.5 10.6 12.9 13.8 5.2 3.1 11.6 4.8 17.7 4.5 5.8-0.2 11.6-2.7 16.6-5.7 21.6-13.1 34.2-37.9 55.1-52.2 5.8-4 12.1-8.3 19-9.1 5.7-0.6 11.9 0.9 16.8 3.9 6.7 4.1 12.3 10.6 15.2 17.9 2.8 6.9 3.4 15.1 1.4 22.2-1.8 6.3-6 12.2-11.3 16.1-6.3 4.6-14.5 7.8-22.2 7C127.1 77.2 118.6 70.3 111.3 63.7 104.7 57.8 95.9 42 95.9 42" />
 
</svg>
</div>

Animation SVG

To start the animation click on the black rectangle

.container {
width:50%;
height:auto;
padding:1.5em;
background-color:#151515;
}
.draw-logo {

fill:none;
stroke:#F7F7F7;
stroke-width:25;
stroke-dasharray:0,425;
}

<div class="container">
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="logo-white" width="184" height="95" viewBox="0 0 184 90.7" version="1.1">
  
  <path class="draw-logo" d="m81.3 30.4c0 0-11.7-9.8-17.5-13-3.8-2.2-9.9-4.6-15.3-5-5.7-0.4-11.7 0.4-16.8 2.9-4.8 2.3-8.7 6.3-11.8 10.7-3.2 4.5-5.6 9.8-6.3 15.2-0.9 6.2-0.4 12.9 2.3 18.6 2.7 5.7 7.5 10.6 12.9 13.8 5.2 3.1 11.6 4.8 17.7 4.5 5.8-0.2 11.6-2.7 16.6-5.7 21.6-13.1 34.2-37.9 55.1-52.2 5.8-4 12.1-8.3 19-9.1 5.7-0.6 11.9 0.9 16.8 3.9 6.7 4.1 12.3 10.6 15.2 17.9 2.8 6.9 3.4 15.1 1.4 22.2-1.8 6.3-6 12.2-11.3 16.1-6.3 4.6-14.5 7.8-22.2 7C127.1 77.2 118.6 70.3 111.3 63.7 104.7 57.8 95.9 42 95.9 42" >
  <animate attributeName="stroke-dasharray" begin="svg1.click+0.5s" dur="4s" values="0,425;425,0" repeatCount="2" fill="freeze" /> 
  </path>
</svg>
</div>

An additional example of filling the logo from one point with two lines
To start the animation, click on any letter in the circle

.container {
width:40%;
height="40%";  
  
  background:black;
}

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 100 100">
  
  <path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10"  />  
       <!-- The midpoint of the beginning of the animation in the center of the figure. stroke-dashoffset="31.1" -->
 <path id="center" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="crimson" stroke-width="10" stroke-dashoffset="31.1" stroke-dasharray="0 128.5" >  
      <animate  attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_C.click" dur="4s" restart="whenNotActive" /> 
 </path> 
   <!-- Middle point on the left stroke-dashoffset="-159.5" -->
     <path id="Left" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="yellowgreen" stroke-width="10" stroke-dashoffset="-159.5" stroke-dasharray="0 128.5" >  
      <animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_L.click" dur="4s"  restart="whenNotActive" /> 
 </path>  
 
    <!-- Midpoint left top stroke-dashoffset="128.5" -->
     <path id="Top" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="gold" stroke-width="10" stroke-dashoffset="128.5" stroke-dasharray="0 128.5" >  
      <animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_T.click" dur="4s"  restart="whenNotActive" /> 
 </path> 
     <!-- Midpoint lower right  stroke-dashoffset="192.7" -->
  <path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="dodgerblue" stroke-width="10" stroke-dashoffset="192.7" stroke-dasharray="0 128.5" >  
      <animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_B.click" dur="4s"  restart="whenNotActive" /> 
 </path>   
 
        <!-- Middle point on the right   stroke-dashoffset="223.9" -->
  <path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="purple" stroke-width="10" stroke-dashoffset="223.9" stroke-dasharray="0 128.5" >  
      <animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_R.click" dur="4s"  restart="whenNotActive" /> 
 </path> 
 
 
 
 <g id="btn_L" transform="translate(-17 0)" >
      <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
      <text x="25" y="95" font-size="10" fill="green" >L</text>
    </g>  
 <g id="btn_C" transform="translate(3 0)">
      <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
      <text x="24" y="95" font-size="10" fill="crimson" >C</text>
    </g> 
    
     <g id="btn_T" transform="translate(23 0)">
      <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
      <text x="24" y="95" font-size="10" fill="orange" >T</text>
        </g>  
  <g id="btn_B" transform="translate(43 0)">
 <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
  <text x="25" y="95" font-size="10" fill="dodgerblue" >B</text>
  </g>   
      <g id="btn_R" transform="translate(63 0)">
     <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
       <text x="25" y="95" font-size="10" fill="purple" >R</text>
    </g> 
</svg>
</div>

Answer 2

Because your SVG file is not in the same shape as my logo. can you please tell me how can I modify the path to achieve the exact same shape. I don't have much knowledge about the illustrator by the way.

Unfortunately I do not use the illustrator. Path painted in Inkscape

Open the file from the previous answer to edit the path form inInkscape

<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="logo-white" width="184" height="95" viewBox="0 0 184 90.7" version="1.1">
  
  <path class="draw-logo" fill="none" stroke="black" stroke-width="25" d="m81.3 30.4c0 0-11.7-9.8-17.5-13-3.8-2.2-9.9-4.6-15.3-5-5.7-0.4-11.7 0.4-16.8 2.9-4.8 2.3-8.7 6.3-11.8 10.7-3.2 4.5-5.6 9.8-6.3 15.2-0.9 6.2-0.4 12.9 2.3 18.6 2.7 5.7 7.5 10.6 12.9 13.8 5.2 3.1 11.6 4.8 17.7 4.5 5.8-0.2 11.6-2.7 16.6-5.7 21.6-13.1 34.2-37.9 55.1-52.2 5.8-4 12.1-8.3 19-9.1 5.7-0.6 11.9 0.9 16.8 3.9 6.7 4.1 12.3 10.6 15.2 17.9 2.8 6.9 3.4 15.1 1.4 22.2-1.8 6.3-6 12.2-11.3 16.1-6.3 4.6-14.5 7.8-22.2 7C127.1 77.2 118.6 70.3 111.3 63.7 104.7 57.8 95.9 42 95.9 42" />
  
</svg>

1. Select in the vector editor on the toolbar Edit contour nodes F2 (arrow red -1)

2. Edit the shape of the curve by dragging the nodal points and change the length and position of the control levers of the nodal points (arrow red -2)

3. Vector editor saves a lot of overhead information. To remove it, you need to optimize the saved file using SVG Editor

4. Replace the old path with the new one from the optimized file

.container {
width:50%;
height:auto;
padding:1.5em;
background-color:#151515;
}
.draw-logo {
fill:none;
stroke:#F7F7F7;
stroke-width:25;
stroke-dasharray:0,443; 
animation: draw 4s linear  forwards;
animation-iteration-count: 2;
}
@keyframes draw {
0% {stroke-dasharray: 0,443;}
100% {stroke-dasharray: 443,0;}
}

<div class="container">
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="logo-white" width="184" height="95" viewBox="0 0 184 90.7" version="1.1">
   <path class="draw-logo" d="m78 34.5c0 0-1.3-1.3-1.9-2.1C74.8 30.9 73.8 29.1 72.7 27.4 71.4 26.2 61.9 10.9 46.6 11.2c-5.1 0.1-10.4 1.5-14.9 4-4.7 2.5-8.8 6.3-11.8 10.7-2.6 3.9-4.3 8.5-4.9 13.1-0.9 6.7-0.5 13.9 2.1 20.2 2.4 5.7 6.5 11 11.6 14.3 5.1 3.3 11.6 4.8 17.7 4.5 5.8-0.2 11.6-2.7 16.6-5.7 21.6-13.1 34.1-38 55.1-52.2 5.4-3.7 11.4-7.3 17.9-8.2 6-0.8 12.6 0 17.9 2.9 6.8 3.9 12.3 10.6 15.2 17.9 2.8 6.9 3.4 15.1 1.4 22.2-1.8 6.3-6 12.2-11.3 16.1-6.3 4.6-14.5 8.1-22.2 7-9.7-1.3-20-7.4-24.5-16.1-2.7-5.3-4-10.1-4.4-15.4-0.4-4.7 0.5-11 1.6-14.1 1.9-5.2 8.5-12.4 8.5-12.4" />
 
</svg>
</div>