Un passager discret

Zip Star

Comprendre SVG viewBox et viewport

https://la-cascade.io/comprendre-svg-viewbox-et-viewport/

En cours

<svg width="400" height="400">
<defs>
<mask id="erup">
<circle r="30" fill="beige" cx="200" cy="250">
<animate attributename="r" begin="0s" dur="6s" repeatcount="indefinite" values="0;350;0"/>
</circle>
</mask>
</defs>
<rect width="400" height="400" fill="firebrick"/>
<g style="mask:url(#erup)">
<line x1="150" y1="250" x2="0" y2="0" stroke-width="5" stroke-dasharray="20" stroke="red">
<animate attributename="stroke-dashoffset" begin="0s" dur="6s" repeatcount="indefinite" values="0;-200"/>
</line>
<line x1="250" y1="250" x2="400" y2="0" stroke-width="5" stroke-dasharray="20" stroke="red">
<animate attributename="stroke-dashoffset" begin="0s" dur="6s" repeatcount="indefinite" values="0;-200"/>
</line>
<line x1="160" y1="250" x2="40" y2="0" stroke-width="5" stroke-dasharray="20" stroke="red">
<animate attributename="stroke-dashoffset" begin="0s" dur="6s" repeatcount="indefinite" values="0;-200"/>
</line>
<line x1="240" y1="250" x2="360" y2="0" stroke-width="5" stroke-dasharray="20" stroke="red">
<animate attributename="stroke-dashoffset" begin="0s" dur="6s" repeatcount="indefinite" values="0;-200"/>
</line>
<line x1="170" y1="250" x2="80" y2="0" stroke-width="5" stroke-dasharray="20" stroke="red">
<animate attributename="stroke-dashoffset" begin="0s" dur="6s" repeatcount="indefinite" values="0;-200"/>
</line>
<line x1="230" y1="250" x2="320" y2="0" stroke-width="5" stroke-dasharray="20" stroke="red">
<animate attributename="stroke-dashoffset" begin="0s" dur="6s" repeatcount="indefinite" values="0;-200"/>
</line>
<line x1="180" y1="250" x2="120" y2="0" stroke-width="5" stroke-dasharray="20" stroke="red">
<animate attributename="stroke-dashoffset" begin="0s" dur="6s" repeatcount="indefinite" values="0;-200"/>
</line>
<line x1="220" y1="250" x2="280" y2="0" stroke-width="5" stroke-dasharray="20" stroke="red">
<animate attributename="stroke-dashoffset" begin="0s" dur="6s" repeatcount="indefinite" values="0;-200"/>
</line>
</g>
<path fill="black" d="m0 400,150 -150,100 0,150 150z">
<animate attributename="d" begin="0s" dur="6s" repeatcount="indefinite" values="
m0 400,150 0000,100 000,150 000z;
m0 400,150 -150,100 000,150 150z;
m0 400,150 0000,100 000,150 000z"/>
</path>
</svg>

Try

Atom

Origami Aka

MR. STRONG