mercredi 23 mai 2018

hidden inside


<svg width="400" height="400">

<rect width="400" height="400" fill="peachpuff" stroke="black"/>
<g>
<rect width="12.5" height="12.5" x="194" y="300" fill="olive" opacity="1">
<animate attributename="y" begin="mo3.end" dur="0.75s" fill="freeze" values="150;137.5" id="mo4"/>
<animate attributename="y" begin="mo5.end" dur="1.5s" fill="freeze" values="137.5;300" id="mo6"/>
</rect>


<rect width="25" height="25" x="187.5" y="300" fill="firebrick" opacity="1">
<animate attributename="y" begin="mo2.end" dur="1.5s" fill="freeze" values="175;150"id="mo3" />
<animate attributename="y" begin="mo6.end" dur="1.5s" fill="freeze" values="150;300"id="mo7" />
</rect>

<rect width="50" height="50" x="175" y="300" fill="royalblue" opacity="1">
<animate attributename="y" begin="mo1.end" dur="3s" fill="freeze" values="225;175" id="mo2"/>
<animate attributename="y" begin="mo7.end" dur="1.5s" fill="freeze" values="175;300" id="mo8"/>
</rect>

<rect width="75" height="75" x="162.5" y="300" fill="darkorange" opacity="1">
<animate attributename="y" begin="rect1.mousedown;mo9.end" dur="6s" fill="freeze" values="300;225" id="mo1"/>
<animate attributename="y" begin="mo8.end" dur="1.5s" fill="freeze" values="225;300" id="mo9"/>
</rect>

<rect width="75" height="75" x="162.5" y="300" fill="darkorange" opacity="1">
<animate attributename="x" begin="rect1.mousedown;mo9.end" dur="6s" fill="freeze" values="150;75" id="mo1"/>
<animate attributename="x" begin="mo8.end" dur="1.5s" fill="freeze" values="75;150" id="mo9"/>
</rect>


<rect width="75" height="75" x="162.5" y="300" fill="darkorange" opacity="1">
<animate attributename="x" begin="rect1.mousedown;mo9.end" dur="6s" fill="freeze" values="175;250" id="mo1"/>
<animate attributename="x" begin="mo8.end" dur="1.5s" fill="freeze" values="250;175" id="mo9"/>
</rect>

<rect width="100" height="100" x="150" y="300" fill="black" id="rect1" opacity="0.5"/>

<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 200 200;360 200 200" begin="mo4.end" dur="12s" fill="freeze" id="mo5"/>

</g>
</svg>