mardi 11 septembre 2018
Pig
<svg width="300" height="300">
<defs>
<filter height="200%" width="200%" y="-50%" x="-50%" id="blur">
<feGaussianBlur stdDeviation="8" in="SourceGraphic"/>
</filter>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#9f5148" />
<stop offset="100%" stop-color="salmon" />
</linearGradient>
</defs>
<rect fill="maroon" width="300" height="300"/>
<ellipse cx="150" cy="340" rx="70" ry="200" fill="#fa8072"/>
<g>
<g transform="rotate(-20 120 100)">
<ellipse fill="salmon" cx="190" cy="90" rx="20" ry="40" />
<ellipse fill="pink" cx="190" cy="90" rx="12" ry="30" />
<ellipse fill="salmon" cx="200" cy="84" rx="18" ry="30" transform="rotate(-40 190 80)"/>
</g>
<g transform="rotate(-20 120 100)">
<ellipse fill="salmon" cx="100" cy="80" rx="20" ry="40" />
<ellipse fill="pink" cx="100" cy="80" rx="12" ry="30" />
<ellipse fill="salmon" cx="90" cy="64" rx="18" ry="30" transform="rotate(40 90 60)"/>
</g>
<ellipse fill="black" cx="150" cy="160" rx="60" ry="70" filter="url(#blur)" opacity="0.5"/>
<circle fill="salmon" cx="150" cy="150" r="70"/>
<circle fill="white" cx="120" cy="120" r="25"/>
<circle fill="royalblue" cx="120" cy="120" r="6">
<animate attributeName="cx" begin="0s;right.end" dur="3s" fill="freeze" values="120;110;120"/>
<animate attributeName="cx" begin="left.end" dur="3s" fill="freeze" values="120;130;120"/>
</circle>
<circle fill="white" cx="180" cy="120" r="25"/>
<circle fill="royalblue" cx="180" cy="120" r="6">
<animate attributeName="cx" begin="0s;right.end" dur="3s" fill="freeze" values="180;170;180" id="left"/>
<animate attributeName="cx" begin="left.end" dur="3s" fill="freeze" values="180;190;180" id="right"/>
</circle>
<ellipse fill="pink" cx="150" cy="160" rx="40" ry="20" stroke="#e37467" stroke-width="3"/>
<ellipse fill="url(#grad1)" cx="130" cy="160" rx="5" ry="10"/>
<ellipse fill="url(#grad1)" cx="170" cy="160" rx="5" ry="10"/>
<ellipse fill="red" cx="150" cy="200" rx="14" ry="16"/>
<path d="m120 180 C 120 190 140 200 150 200 160 200 180 190 180 180" fill="salmon" stroke="#9f5148" stroke-width="4" stroke-linecap="round"/>
<animateTransform attributeName="transform" attributeType="xml" type="rotate" values="0 150 150; -10 150 150;0 150 150;10 150 150;0 150 150;" begin="0s" dur="6s" repeatCount="indefinite"/>
</g>
</svg>
-
Animation attribute (width, opacity, etc.) <animate attributeName="?" begin="0s" dur="6s" repeatCount...
-
Generate