0

Я пытаюсь анимировать этот svg, чтобы получить анимацию криволинейных полос, как на изображении ниже:

Изображение:

Это то, что у меня есть на данный момент:

<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>

Однако я хочу, чтобы формы вместо прямых линий были изогнуты как на изображении

введите сюда описание изображения

Свободный перевод вопроса SVG Stripe Animation with curved shapes от участника @Oleksiy Chornobay.

1

1 ответ 1

0

Здесь я заменил две линии эллипсами. Это была моя первоначальная идея, но получить хорошую кривую и равное расстояние между цветами непросто. Как видите, оранжевого немного больше, чем двух других цветов.

<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>

Свободный перевод ответа от участника @chrwahl.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.