以上3个path帮我做宽度从小到大的动画

要实现以上三个 path 元素宽度从小到大的动画，可以使用 CSS3 的 transition 属性和 JavaScript 来实现。

首先，在 CSS 中设置 path 元素的初始宽度和过渡效果的时间：

path {
  stroke-width: 0;
  transition: stroke-width 0.5s ease-out;
}

接着，在 JavaScript 中获取 path 元素，并根据宽度变化来修改 path 的 stroke-width 属性。例如：

const paths = document.querySelectorAll('path');
const width = 5;

paths.forEach((path) => {
  path.style.strokeWidth = `${width}px`;
});

这段代码会将所有 path 元素的 stroke-width 属性设置为 5px，从而让它们的宽度变小。

接下来，通过 setTimeout 函数来延迟一段时间后，再次修改 path 元素的 stroke-width 属性，将它们的宽度变回初始值，从而触发过渡效果：

setTimeout(() => {
  paths.forEach((path) => {
    path.style.strokeWidth = '';
  });
}, 500);

这段代码会在 500 毫秒后将所有 path 元素的 stroke-width 属性置空，从而让它们的宽度回到初始值，并带有 0.5 秒的过渡动画。

注意，为了让过渡效果生效，必须在修改 path 的 stroke-width 属性之前，先让 path 元素处于渲染树中，比如通过设置 path 元素的 display、visibility 或者 opacity 属性来实现。