<body>
<section class = "main">
<svg width="100%" height="100vh" viewBox="0 0 1280 720" fill="none" preserveAspectRatio="none" class = "main" >
<defs>
<polygon id="fig"
class="logo"
style="stroke: rgb(0, 0, 0); fill: rgb(235, 11, 11); background-color: black;"
transform="translate(-185,-163)"
points="190.492 149.86 186.232 156.783 195.951 174.49 155.412 174.823 160.204 182.811 209.797 182.744"
>
<animateTransform
attributeName="transform"
type="translate"
values = "-185,-163; -145, -150; -185,-163"
dur = "2s"
fill = "freeze"
/>
</polygon>
<mask id = "mask">
<rect x="0" y="0" width="100%" height="100%" fill="#fff" />
<path
d="M37.5 0L74.3061 63H0.69392L37.5 0Z"
fill-opacity="1"
fill = "red"
stroke="#17181c"
stroke-width="2"
transform-origin = "38px 40px"
transform = " translate(600, 360) scale(0)" // тут ошибка
>
<animateTransform
attributeName="transform"
type="scale"
from = "0"
to = "1"
dur = "25s"
repeatCount="1"
additive = "sum"
fill = "freeze"
begin = "0s"
/>
<animate
attributeName="d"
calMode="spline"
to = "M90.5 00L74.1231 63H0.69392L-20.5 0Z"
dur = "3s"
begin = "1s"
additive="sum"
repeatCount="1"
fill = "freeze"
/>
</path>
</mask>
</defs>
<rect width="100%" height="100%" fill-opacity="1" fill="black" x = "0" y = "0" mask="url(#mask)"/>
<g id = "my-mask" x='0' y='0' width='100' height='100' transform = "translate(638, 401)">
<use href="#fig"></use>
<use href="#fig" transform="rotate(-120)"></use>
<use href="#fig" transform="rotate(120)"></use>
<!-- <animateTransform
id = "rot"
attributeName="transform"
type="rotate"
values="0;250;0"
dur = "2s"
additive="sum"
/>
<animateTransform
attributeName="transform"
type="scale"
values = "1; 0,8; 25"
dur = "1s"
repeatCount="1"
additive="sum"
fill = "freeze"
begin = "rot.end"
/>
<animate
attributeName="d"
calMode="spline"
to = "M90.5 00L74.1231 63H0.69392L-20.5 0Z"
dur = "3s"
begin = "rot.end"
additive="sum"
repeatCount="1"
fill = "freeze"
/> -->
</g>
</svg>
</section>
</body>
Простой
