mercredi 21 décembre 2016
muscae captantur (fly catcher)
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<defs>
<clipPath id="myClip">
<rect stroke="#e21d1d" id="svg_13" height="31" width="110" y="355" x="190" fill="#ff0000">
<animate attributename="y" values="355;361;355" begin="0s" dur="2s" repeatcount="indefinite"/>
</rect>
</clipPath>
</defs>
<g id="fideo">
<title>Nouille</title>
<g id="svg_12">
<ellipse stroke="#007f00" ry="64" rx="148.5" id="svg_9" cy="316" cx="250" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="18" fill="#007f00"/>
<ellipse stroke="#007f00" ry="97" rx="52.5" id="svg_1" cy="214" cx="192" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="18" fill="#e8ffff"/>
<g stroke="null" id="lefteye">
<ellipse ry="40" rx="20" id="svg_2" cy="214" cx="169" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="18" fill="#000000"/>
<ellipse ry="17.5" rx="6" id="svg_3" cy="199" cx="163" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="18" fill="#ffffff"/>
<animateMotion path="M-5,0a27,54 0 1,0 54,0a27,54 0 1,0 -54,0" begin="0s" dur="2s" repeatcount="indefinite"/>
</g>
<ellipse stroke="#007f00" ry="97" rx="52.5" id="svg_1" cy="214" cx="192" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="18" fill="none"/>
<ellipse id="svg_5" stroke="#007f00" ry="97" rx="52.5" cy="214" cx="305" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="18" fill="#e8ffff"/>
<g id="righteye" stroke="null">
<ellipse id="svg_7" ry="41" rx="19.5" cy="214" cx="282" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="18" fill="#000000"/>
<ellipse id="svg_8" ry="17.5" rx="6" cy="198.5" cx="276" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="18" fill="#ffffff"/>
<animateMotion path="M-5,0a27,54 0 1,0 54,0a27,54 0 1,0 -54,0" begin="0s" dur="2s" repeatcount="indefinite"/>
</g>
<ellipse id="svg_5" stroke="#007f00" ry="97" rx="52.5" cy="214" cx="305" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="18" fill="none"/>
<ellipse fill="#990000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="250" cy="350" id="svg_10" rx="50" ry="25" stroke="#e21d1d" clip-path="url(#myClip)"/>
</g>
</g>
<rect x="221" y="366" width="60" rx="30" ry="30" height="0" fill="#ff0000">
<animate attributename="height" dur="0.2s" begin="fideo.mousedown" values="1;80;1"/>
</rect>
<g>
<ellipse cx="95" cy="89" rx="5" ry="10" fill="#ffffff" stroke="#000000">
<animatetransform attributename="transform" attributetype="xml" dur="0.2s" repeatcount="indefinite" type="rotate" values="0 100 95; -130 100 95"/>
</ellipse>
<ellipse cx="105" cy="89" rx="5" ry="10" fill="#ffffff" stroke="#000000">
<animatetransform attributename="transform" attributetype="xml" dur="0.2s" repeatcount="indefinite" type="rotate" values="0 100 95; 130 100 95"/>
</ellipse>
<circle fill="#000000" cx="100" cy="100" r="5"/>
<animateMotion path="M-56,150a210,200 0 1,0 420,0a210,200 0 1,0 -420,0" begin="0s" dur="2s" repeatcount="indefinite"/>
</g>
</svg>
-
Animation attribute (width, opacity, etc.) <animate attributeName="?" begin="0s" dur="6s" repeatCount...
-
Generate