Search code examples
websvgsafariwebkitsvg-animate

SVG weird lines in safari

Does anyone know why does this SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 412" fill="none">
<path id="path1" d="M0 130L192 89L384 64L576 57L768 125L960 37L1152 99L1344 0L1536 124L1728 131L1920 36V412H1728H1536H1344H1152H960H768H576H384H192H0V130Z" fill="url(#paint0_linear_1186_28)" fill-opacity="0.4"/>
<path id="path2" d="M0 142L192 131L384 122L576 162L768 116L960 102L1152 176L1344 123L1536 186L1728 76L1920 103V412H1728H1536H1344H1152H960H768H576H384H192H0V142Z" fill="url(#paint0_linear_1186_28)" fill-opacity="0.4"/>
<path id="path3" d="M0 234L192 194L384 265L576 253L768 252L960 209L1152 218L1344 263L1536 200L1728 260L1920 223V412H1728H1536H1344H1152H960H768H576H384H192H0V234Z" fill="url(#paint0_linear_1186_28)" fill-opacity="0.4"/>
<path id="path4" d="M0 274L192 331L384 325L576 303L768 269L960 330L1152 310L1344 297L1536 308L1728 331L1920 320V412H1728H1536H1344H1152H960H768H576H384H192H0V274Z" fill="url(#paint0_linear_1186_28)"/>
<defs>
    <linearGradient id="paint0_linear_1186_28" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#FF00E5"/>
        <stop offset="1" stop-color="#00E0FF"/>
    </linearGradient>
</defs>
</svg>

Render with this line around the middle in safari?enter image description here

Also when i tried to add morphing animation to it there were multiple lines appearing seemingly randomly and a lot. I'd appreciate any help regarding this. Thanks in advance.

Solution

  • The issue was resolved by updating safari from version 16.2 to 16.3. So the problem wasn't with the SVG but rather with webkit/safari.