SVG Stripe Animation with curved shapes-CodePudding

I am trying to animate this svg to have the 'barbershop' stripe animation.

This is what I currently have:

<svg width="300" height="300" viewBox="0 0 120 120">
    <pattern id="diagonalHatch" width="30" height="10" 
     patternTransform="rotate(30)" patternUnits="userSpaceOnUse">
         <animate attributeName="x" from="0%" to="100%" dur="5s" repeatCount="indefinite"/>
         <rect width="100%" height="100%" fill="#FB5D2E"></rect>
         <line x1="5" x2="5" y2="10" style="stroke:#16B4F2; stroke-width:10" />
         <line x1="15" x2="15" y2="10" style="stroke:#19214D; stroke-width:10" />
    </pattern>
    <path d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" stroke="none" fill="url(#diagonalHatch)" stroke-width="10"/>
</svg>

However I want the shapes instead of straight lines to be curved like so:

image

Any help would be greatly appreciated

CodePudding user response：

Here I replaced the two lines with ellipses. That was my initial idea, but it is not easy to get both a good curve and equal space between the colors. You can see, there is a bit more orange than the two other colors.

<svg width="300" height="300" viewBox="0 0 120 120">
    <pattern id="diagonalHatch" width="20" height="50" y="-15" 
     patternTransform="rotate(30)" patternUnits="userSpaceOnUse">
         <animate attributeName="x" from="0%" to="100%" dur="5s" repeatCount="indefinite"/>
         <rect width="100%" height="100%" fill="#FB5D2E"></rect>
         <ellipse cx="0" cy="25" rx="15" ry="20" stroke="#19214D" fill="transparent" stroke-width="6"/>
         <ellipse cx="0" cy="25" rx="9" ry="15" stroke="#16B4F2" fill="transparent" stroke-width="6"/>
    </pattern>
    <path d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" stroke="none" fill="url(#diagonalHatch)" stroke-width="10"/>
</svg>