Анимация градиента в зоне действия треугольного значка
Для адаптивности перенёс кнопку из css
в svg
. Обернул svg
контейнером <div class="container">
При такой схеме вёрстки кнопку с анимационными эффектами можно вставить в любое место страницы HTML и позиционировать, масштабировать по мере своей необходимости.
Анимация начинается по клику begin="svg1.click"
при желании можно сделать по наведению курсора begin="svg1.mouseover"
.container {
width:25%;
height:25%;
}
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 125">
<defs>
<linearGradient id="linear-gradient">
<stop offset="0%" stop-color="#FE20A4" />
<stop offset="33%" stop-color="#FE20A4" />
<stop offset="50%" stop-color="white" />
<stop offset="67%" stop-color="#FE20A4" />
<stop offset="100%" stop-color="#FE20A4" />
<animateTransform attributeName="gradientTransform"
type="translate"
from="-1 0"
to="1 0"
begin="svg1.click"
dur="0.8s"
repeatCount="1"
restartWhenNotActive
fill="freeze"/>
</linearGradient>
</defs>
<g id="btn" stroke="gray" fill="#FE20A4" >
<rect class="game_block__play" x="4" y="4" width="320" height="112" rx="15" fill="transparent" stroke-width="2" />
<text class="txt1" x="125" y="84" font-size="72px" font-family="Arial, sans-serif" >PLAY</text>
</g>
<g id="triangle" transform="translate(10 5)" stroke="gray" fill="url(#linear-gradient)" >
<path d="M55.5 2C26.3 2 2.7 25.7 2.7 54.8s23.7 52.8 52.8 52.8 52.8-23.7 52.8-52.8S84.7 2 55.5 2zM31 98.6c-21.4-9-16.1-84.1 2-87.1 0 0 43.3-9.7 71.3 39.4 12.9 22.6-57.4 54.4-73.3 47.7z"/>
<path d="M89.8 57.7l-48.1 27c-2.2 1.2-4.9-.3-4.9-2.7V27.8c0-2.5 2.7-4.1 4.9-2.7l48.2 27.1c2.1 1.2 2.1 4.2-.1 5.5z"/>
</g>
</svg>
</div>
Анимация градиента в зоне действия треугольного значка плюс буквы
Анимация в этом примере и в других, которые ниже начинается после клика на кнопке begin="svg1.click"
при желании можно сделать по наведению курсора begin="svg1.mouseover"
.container {
width:50%;
height:50%;
}
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 125" >
<defs>
<linearGradient id="linear-gradient" >
<stop offset="0%" stop-color="#FE20A4" />
<stop offset="30%" stop-color="#FE20A4" />
<stop offset="50%" stop-color="white" />
<stop offset="70%" stop-color="#FE20A4" />
<stop offset="100%" stop-color="#FE20A4" />
<animateTransform attributeName="gradientTransform"
type="translate"
values="-1 0;1 0"
fill="freeze"
begin="svg1.click"
dur="1s"
repeatCount="1"
restartWhenNotActive/>
</linearGradient>
</defs>
<g id="btn" stroke="gray" fill="url(#linear-gradient)">
<rect class="game_block__play" x="4" y="4" width="320" height="112" rx="15" fill="transparent" stroke-width="2" />
<text class="txt1" x="125" y="84" font-size="72px" font-family="Arial, sans-serif" >PLAY</text>
<g id="triangle" transform="translate(10 5)" stroke="gray" fill="url(#linear-gradient)" >
<path d="M55.5 2C26.3 2 2.7 25.7 2.7 54.8s23.7 52.8 52.8 52.8 52.8-23.7 52.8-52.8S84.7 2 55.5 2zM31 98.6c-21.4-9-16.1-84.1 2-87.1 0 0 43.3-9.7 71.3 39.4 12.9 22.6-57.4 54.4-73.3 47.7z"/>
<path d="M89.8 57.7l-48.1 27c-2.2 1.2-4.9-.3-4.9-2.7V27.8c0-2.5 2.7-4.1 4.9-2.7l48.2 27.1c2.1 1.2 2.1 4.2-.1 5.5z"/>
</g>
</g>
</svg>
</div>
Изменяем цветовую гамму, - чёрно-белый вариант, для этого меняем значения в атрибутах градиента stop-color
.container {
width:45%;
height:45%;
}
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 125">
<defs>
<linearGradient id="linear-gradient" >
<stop offset="0%" stop-color="black" />
<stop offset="30%" stop-color="black" />
<stop offset="50%" stop-color="white" />
<stop offset="70%" stop-color="black" />
<stop offset="100%" stop-color="black" />
<!-- <set attributeName="gradientTransform" type="translate" values="1 0;-1 0" begin="0s" dur="0.2s" fill="freeze"/> -->
<animateTransform attributeName="gradientTransform"
type="translate"
values="-1 0;1 0"
fill="freeze"
begin="svg1.click"
dur="1s"
repeatCount="1"
restartWhenNotActive/>
</linearGradient>
</defs>
<g id="btn" stroke="gray" fill="url(#linear-gradient)">
<rect class="game_block__play" x="4" y="4" width="320" height="112" rx="15" fill="transparent" stroke-width="2" />
<text class="txt1" x="125" y="84" font-size="72px" font-family="Arial, sans-serif" >PLAY</text>
<g id="triangle" transform="translate(10 5)" stroke="gray" fill="url(#linear-gradient)" >
<path d="M55.5 2C26.3 2 2.7 25.7 2.7 54.8s23.7 52.8 52.8 52.8 52.8-23.7 52.8-52.8S84.7 2 55.5 2zM31 98.6c-21.4-9-16.1-84.1 2-87.1 0 0 43.3-9.7 71.3 39.4 12.9 22.6-57.4 54.4-73.3 47.7z"/>
<path d="M89.8 57.7l-48.1 27c-2.2 1.2-4.9-.3-4.9-2.7V27.8c0-2.5 2.7-4.1 4.9-2.7l48.2 27.1c2.1 1.2 2.1 4.2-.1 5.5z"/>
</g>
</g>
</svg>
</div>
Чёрно-желтый вариант
.container {
width:45%;
height:45%;
}
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 125">
<defs>
<linearGradient id="linear-gradient" >
<stop offset="0%" stop-color="black" />
<stop offset="30%" stop-color="black" />
<stop offset="50%" stop-color="yellow" />
<stop offset="70%" stop-color="black" />
<stop offset="100%" stop-color="black" />
<!-- <set attributeName="gradientTransform" type="translate" values="1 0;-1 0" begin="0s" dur="0.2s" fill="freeze"/> -->
<animateTransform attributeName="gradientTransform"
type="translate"
values="-1 0;1 0"
fill="freeze"
begin="svg1.click"
dur="1s"
repeatCount="1"
restartWhenNotActive/>
</linearGradient>
</defs>
<g id="btn" stroke="gray" fill="url(#linear-gradient)">
<rect class="game_block__play" x="4" y="4" width="320" height="112" rx="15" fill="transparent" stroke-width="2" />
<text class="txt1" x="125" y="84" font-size="72px" font-family="Arial, sans-serif" >PLAY</text>
<g id="triangle" transform="translate(10 5)" stroke="gray" fill="url(#linear-gradient)" >
<path d="M55.5 2C26.3 2 2.7 25.7 2.7 54.8s23.7 52.8 52.8 52.8 52.8-23.7 52.8-52.8S84.7 2 55.5 2zM31 98.6c-21.4-9-16.1-84.1 2-87.1 0 0 43.3-9.7 71.3 39.4 12.9 22.6-57.4 54.4-73.3 47.7z"/>
<path d="M89.8 57.7l-48.1 27c-2.2 1.2-4.9-.3-4.9-2.7V27.8c0-2.5 2.7-4.1 4.9-2.7l48.2 27.1c2.1 1.2 2.1 4.2-.1 5.5z"/>
</g>
</g>
</svg>
</div>
Диагональный градиент
Для этого добавляем в определение градиента:
<linearGradient id="linear-gradient" x1="0" y1="0" x2="100%" y2="100%">
Анимация только значка
.container {
width:100%;
height:100%;
}
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 125" >
<defs>
<linearGradient id="linear-gradient" x1="0" y1="0" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FE20A4" />
<stop offset="43%" stop-color="#FE20A4" />
<stop offset="50%" stop-color="white" />
<stop offset="70%" stop-color="#FE20A4" />
<stop offset="100%" stop-color="#FE20A4" />
<animateTransform attributeName="gradientTransform"
type="translate"
values="-1 0;1 0"
fill="freeze"
begin="svg1.click"
dur="0.5s"
repeatCount="1"
restartWhenNotActive/>
</linearGradient>
</defs>
<g id="btn" stroke="gray" fill="#FE20A4" >
<rect class="game_block__play" x="4" y="4" width="320" height="112" rx="15" fill="transparent" stroke-width="2" />
<text class="txt1" x="125" y="84" font-size="72px" font-family="Arial, sans-serif" >PLAY</text>
</g>
<g id="triangle" transform="translate(10 5)" stroke="gray" fill="url(#linear-gradient)" >
<path d="M55.5 2C26.3 2 2.7 25.7 2.7 54.8s23.7 52.8 52.8 52.8 52.8-23.7 52.8-52.8S84.7 2 55.5 2zM31 98.6c-21.4-9-16.1-84.1 2-87.1 0 0 43.3-9.7 71.3 39.4 12.9 22.6-57.4 54.4-73.3 47.7z"/>
<path d="M89.8 57.7l-48.1 27c-2.2 1.2-4.9-.3-4.9-2.7V27.8c0-2.5 2.7-4.1 4.9-2.7l48.2 27.1c2.1 1.2 2.1 4.2-.1 5.5z"/>
</g>
</svg>
</div>
Анимация значка и букв
.container {
width:100%;
height:100%;
}
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 125" >
<defs>
<linearGradient id="linear-gradient" x1="0" y1="0" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FE20A4" />
<stop offset="43%" stop-color="#FE20A4" />
<stop offset="50%" stop-color="white" />
<stop offset="70%" stop-color="#FE20A4" />
<stop offset="100%" stop-color="#FE20A4" />
<animateTransform attributeName="gradientTransform"
type="translate"
values="-1 0;1 0"
fill="freeze"
begin="svg1.click"
dur="0.5s"
repeatCount="1"
restartWhenNotActive/>
</linearGradient>
</defs>
<g id="btn" stroke="gray" fill="url(#linear-gradient)" >
<rect class="game_block__play" x="4" y="4" width="320" height="112" rx="15" fill="transparent" stroke-width="2" />
<text class="txt1" x="125" y="84" font-size="72px" font-family="Arial, sans-serif" >PLAY</text>
<g id="triangle" transform="translate(10 5)" stroke="gray" >
<path d="M55.5 2C26.3 2 2.7 25.7 2.7 54.8s23.7 52.8 52.8 52.8 52.8-23.7 52.8-52.8S84.7 2 55.5 2zM31 98.6c-21.4-9-16.1-84.1 2-87.1 0 0 43.3-9.7 71.3 39.4 12.9 22.6-57.4 54.4-73.3 47.7z"/>
<path d="M89.8 57.7l-48.1 27c-2.2 1.2-4.9-.3-4.9-2.7V27.8c0-2.5 2.7-4.1 4.9-2.7l48.2 27.1c2.1 1.2 2.1 4.2-.1 5.5z"/>
</g>
</g>
</svg>
</div>