В Хроме и FF всё работает как надо, в Сафари не хочет работать анимация градиента. Исходник прилагаю
Ссылка на сам сайт:
https://del1t.me
<svg class="cog" width="350" height="350" viewBox="0 0 350 350" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g clip-path="url(#clip0_102_1064)">
<mask id="mask0_102_1064" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="19" y="18" width="314" height="314">
<path d="M275.146 53.2072C286.175 56.1547 294.785 64.7646 297.732 75.7936L331.004 200.289C333.951 211.318 330.789 223.09 322.707 231.172L231.484 322.396C223.402 330.477 211.629 333.64 200.6 330.692L76.1052 297.421C65.0762 294.473 56.4663 285.863 53.5188 274.834L20.2473 150.339C17.2998 139.31 20.4624 127.538 28.5439 119.456L119.768 28.2323C127.849 20.1508 139.622 16.9881 150.651 19.9357L275.146 53.2072Z" fill="black"/>
</mask>
<g mask="url(#mask0_102_1064)">
<rect x="19" y="19" width="313" height="313" fill="url(#pattern0)"/>
<mask id="mask1_102_1064" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="19" y="18" width="314" height="314">
<path d="M273.21 60.4529C281.647 62.7077 288.232 69.293 290.487 77.73L323.758 202.225C326.013 210.664 323.595 219.678 317.404 225.869L226.18 317.092C219.99 323.283 210.975 325.702 202.537 323.447L78.0416 290.175C69.6047 287.92 63.0193 281.335 60.7645 272.898L27.493 148.403C25.2378 139.964 27.6565 130.95 33.8472 124.759L125.071 33.5356C131.262 27.3449 140.276 24.9262 148.714 27.1814L273.21 60.4529Z" stroke="white" stroke-width="15"/>
</mask>
<g mask="url(#mask1_102_1064)">
<rect width="350" height="350" fill="url(#paint0_linear_102_1064)"/>
</g>
</g>
</g>
<defs>
<use xlink:href="#image0_102_1064" transform="scale(0.00123916)"/>
</pattern>
<linearGradient id="paint0_linear_102_1064" x1="115.278" y1="1.57324" x2="243.194" y2="345.563" gradientUnits="userSpaceOnUse">
<stop stop-color="#31BED6"/>
<stop offset="0.432292" stop-color="#5775FF"/>
<stop offset="0.697917" stop-color="#9834FF"/>
<stop offset="1" stop-color="#B533E4"/>
<animateTransform
attributeName="gradientTransform"
type="rotate"
from="0 19 19"
to="360 359 359"
dur="5s"
repeatCount="indefinite"/>
</linearGradient>
<clipPath id="clip0_102_1064">
<rect width="350" height="350" fill="white"/>
</clipPath>
<image id="image0_102_1064" width="807" height="807"/>
</defs>
</svg>