Svg path width from 0 to 100% - CSS

Question

I have a SVG of wires. I wanna animate the wires width from "0 to 100%", but it's not happening. I can easily do this if it is div, but it's SVG image.

Here is my code:

svg path {
  animation: fadeRight 1s ease-in-out forwards;
}
@keyframes fadeRight {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 694.3" style="enable-background:new 0 0 1000 694.3;" xml:space="preserve"><g><g><g id="Layer_1_1_" class="st6"><g><path class="st5" d="M1273.1,68.1c-0.1-0.3-0.3-0.4-0.5-0.3c-20.7,6.9-78.4,22-149.1,29.4c-51.9,5.4-103.3,6.2-152.7,2.2C909,94.4,850.2,82,795.9,62.6c-0.1,0-0.1,0-0.2,0c-0.1,0-0.3,0-0.3,0.1c-32.4,38-68.9,67.5-108.4,87.4c-31.5,15.9-65.1,25.9-99.8,29.6c-47.2,5.1-87.1-3.1-101.6-8.1c0,0-0.1,0-0.1,0c0.1-0.2,0-0.4-0.2-0.5c-0.1-0.1-0.4,0-0.5,0.2c-23.4,43.8-50.1,78.2-79.6,102.1c-23.6,19.2-48.9,31.7-75.3,37.3c-43.3,9.3-75.4-3.6-77.9-4.6c0-0.1-0.1-0.1-0.2-0.2c-0.3-0.3-0.7-0.2-0.9,0.1c-39,54.5-83.7,99-133,132.3c-39.4,26.6-81.9,46.1-126.1,58c-75.4,20.2-130.5,11.1-131.1,11c-0.3-0.1-0.6,0.2-0.7,0.5c-0.1,0.3,0.2,0.6,0.5,0.7c0.3,0.1,13,2.2,34.4,2.2c23.6,0,57.6-2.5,97.2-13.1c44.4-11.9,86.9-31.5,126.4-58.1c49.5-33.4,94.4-78,133.4-132.6c2.7,1.1,20.6,7.9,46.7,7.9c9.5,0,20.1-0.9,31.5-3.4c26.5-5.6,51.9-18.2,75.6-37.4c29.5-23.9,56.1-58.1,79.5-101.8c0,0,0.1,0.1,0.1,0.1c0.4,0.1,28.9,9.8,71.8,9.8c9.4,0,19.6-0.5,30.1-1.5c34.7-3.7,68.4-13.7,100.1-29.7c39.6-19.9,76.1-49.3,108.6-87.5c54.2,19.4,113.1,31.7,174.8,36.7c20.8,1.7,42,2.5,63.4,2.5c29.5,0,59.4-1.6,89.4-4.6c70.9-7.4,128.6-22.5,149.3-29.4C1273.1,68.5,1273.2,68.3,1273.1,68.1z" style="
"></path></g></g></g></g></svg>

If you wanna see live web of full wires, then this is the url: http://green-light.infinitweb.co/

Note: I know path cannot have width attribute, I have tried a lot of things, but didn't find any solution. That's why i am putting question here. Suggest me any other animation or something i can animate it.

Animation: I need a 0 to 100% animation, scale and translate can't do that, like have you seen a loading progress bar going from 0 to 100% smoothly? Just like that, the difference is that this wire is curved and the loader is straight. Please help me, I am stuck.

Answer 1

• You could clip it and change the clip. I've shown this below.

• Alternatively you could use stroke-dasharray to make it seem like the line is being drawn. There are plenty of examples of that already e.g. this one

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 1000 694.3" xml:space="preserve">
  <g id="Layer_1_1_" class="st6">
    <g>
      <path class="st5" d="M1273.1,68.1c-0.1-0.3-0.3-0.4-0.5-0.3c-20.7,6.9-78.4,22-149.1,29.4c-51.9,5.4-103.3,6.2-152.7,2.2C909,94.4,850.2,82,795.9,62.6c-0.1,0-0.1,0-0.2,0c-0.1,0-0.3,0-0.3,0.1c-32.4,38-68.9,67.5-108.4,87.4c-31.5,15.9-65.1,25.9-99.8,29.6c-47.2,5.1-87.1-3.1-101.6-8.1c0,0-0.1,0-0.1,0c0.1-0.2,0-0.4-0.2-0.5c-0.1-0.1-0.4,0-0.5,0.2c-23.4,43.8-50.1,78.2-79.6,102.1c-23.6,19.2-48.9,31.7-75.3,37.3c-43.3,9.3-75.4-3.6-77.9-4.6c0-0.1-0.1-0.1-0.2-0.2c-0.3-0.3-0.7-0.2-0.9,0.1c-39,54.5-83.7,99-133,132.3c-39.4,26.6-81.9,46.1-126.1,58c-75.4,20.2-130.5,11.1-131.1,11c-0.3-0.1-0.6,0.2-0.7,0.5c-0.1,0.3,0.2,0.6,0.5,0.7c0.3,0.1,13,2.2,34.4,2.2c23.6,0,57.6-2.5,97.2-13.1c44.4-11.9,86.9-31.5,126.4-58.1c49.5-33.4,94.4-78,133.4-132.6c2.7,1.1,20.6,7.9,46.7,7.9c9.5,0,20.1-0.9,31.5-3.4c26.5-5.6,51.9-18.2,75.6-37.4c29.5-23.9,56.1-58.1,79.5-101.8c0,0,0.1,0.1,0.1,0.1c0.4,0.1,28.9,9.8,71.8,9.8c9.4,0,19.6-0.5,30.1-1.5c34.7-3.7,68.4-13.7,100.1-29.7c39.6-19.9,76.1-49.3,108.6-87.5c54.2,19.4,113.1,31.7,174.8,36.7c20.8,1.7,42,2.5,63.4,2.5c29.5,0,59.4-1.6,89.4-4.6c70.9-7.4,128.6-22.5,149.3-29.4C1273.1,68.5,1273.2,68.3,1273.1,68.1z" clip-path="url(#c)" />
      <clipPath id="c">
        <rect height="100%" width="0%" fill="black">
          <animate attributeName="width" dur="1s" from="0" to="100%" fill="freeze" />
        </rect>
      </clipPath>
    </g>
  </g>
</svg>

Answer 2

SVG paths don't have a width attribute, and aren't style-able using the CSS width property. Instead use a scale transform.

svg path {
  animation: fadeRight 1s ease-in-out forwards;
}
@keyframes fadeRight {
  from {
    transform: scaleX(0)
  }
  to {
    transform: scaleX(1)
  }
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 694.3" style="enable-background:new 0 0 1000 694.3;" xml:space="preserve"><g><g><g id="Layer_1_1_" class="st6"><g><path class="st5" d="M1273.1,68.1c-0.1-0.3-0.3-0.4-0.5-0.3c-20.7,6.9-78.4,22-149.1,29.4c-51.9,5.4-103.3,6.2-152.7,2.2C909,94.4,850.2,82,795.9,62.6c-0.1,0-0.1,0-0.2,0c-0.1,0-0.3,0-0.3,0.1c-32.4,38-68.9,67.5-108.4,87.4c-31.5,15.9-65.1,25.9-99.8,29.6c-47.2,5.1-87.1-3.1-101.6-8.1c0,0-0.1,0-0.1,0c0.1-0.2,0-0.4-0.2-0.5c-0.1-0.1-0.4,0-0.5,0.2c-23.4,43.8-50.1,78.2-79.6,102.1c-23.6,19.2-48.9,31.7-75.3,37.3c-43.3,9.3-75.4-3.6-77.9-4.6c0-0.1-0.1-0.1-0.2-0.2c-0.3-0.3-0.7-0.2-0.9,0.1c-39,54.5-83.7,99-133,132.3c-39.4,26.6-81.9,46.1-126.1,58c-75.4,20.2-130.5,11.1-131.1,11c-0.3-0.1-0.6,0.2-0.7,0.5c-0.1,0.3,0.2,0.6,0.5,0.7c0.3,0.1,13,2.2,34.4,2.2c23.6,0,57.6-2.5,97.2-13.1c44.4-11.9,86.9-31.5,126.4-58.1c49.5-33.4,94.4-78,133.4-132.6c2.7,1.1,20.6,7.9,46.7,7.9c9.5,0,20.1-0.9,31.5-3.4c26.5-5.6,51.9-18.2,75.6-37.4c29.5-23.9,56.1-58.1,79.5-101.8c0,0,0.1,0.1,0.1,0.1c0.4,0.1,28.9,9.8,71.8,9.8c9.4,0,19.6-0.5,30.1-1.5c34.7-3.7,68.4-13.7,100.1-29.7c39.6-19.9,76.1-49.3,108.6-87.5c54.2,19.4,113.1,31.7,174.8,36.7c20.8,1.7,42,2.5,63.4,2.5c29.5,0,59.4-1.6,89.4-4.6c70.9-7.4,128.6-22.5,149.3-29.4C1273.1,68.5,1273.2,68.3,1273.1,68.1z" style="
"></path></g></g></g></g></svg>

Answer 3

you can change the width like this:

path{stroke-width:15}