How can I select a specific letter on svg path

Viewed 26

I import svg code of my design from figma to my editor then I want to select all letters of a .svg file to animate them one by one . But if I use path::nth-child(), it selects all letters . So if it's possible, How can I do that ?

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js">

        <svg width="1440" height="1024" viewBox="0 0 1440 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="1440" height="1024" fill="#2E2E35"/>
  <g filter="url(#filter0_i_4_4)">
  <path d="M622.263 551.72L621.858 552.634L621.866 552.638L621.874 552.641L622.263 551.72ZM614.391 546.28L613.665 546.967L613.671 546.974L613.678 546.98L614.391 546.28ZM609.143 538.088L608.214 538.457L608.218 538.468L609.143 538.088ZM609.143 517.992L608.218 517.612L608.216 517.618L609.143 517.992ZM614.391 509.864L613.671 509.17L613.671 509.17L614.391 509.864ZM622.263 504.36L621.858 503.446L621.858 1.719 606.926 535.216 608.214 538.457L610.073 537.719ZM608.287 527.976C608.287 524.509 46.155 828.081 545.229L827.309 547.075Z" fill="#654343"/>
  </g>
  <ellipse cx="884" cy="548" rx="6" ry="5" fill="#6D071A"/>
  <defs>
  <filter id="filter0_i_4_4" x="607.287" y="502.376" width="253.496" height="55.264" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
  <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
  <feOffset dy="4"/>
  <feGaussianBlur stdDeviation="2"/>
  <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
  <feBlend mode="normal" in2="shape" result="effect1_innerShadow_4_4"/>
  </filter>
  </defs>
</svg>
</script>

0 Answers
Related