nothing: Quadrisquare

samedi 5 décembre 2015

Quadrisquare

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">

<title>Calque 1</title>
<circle fill="#ff0000" cx="40" cy="40" r="10" id="boutonrouge"/>
<circle fill="#00ff00" cx="40" cy="80" r="10" id="boutonvert"/>
<circle fill="#0000ff" cx="40" cy="120" r="10" id="boutonbleu"/>
<circle fill="#ff7f00" cx="40" cy="160" r="10" id="boutonorange"/>
<rect fill="#000000" height="20" width="20" y="190" x="30" id="carrenoir">
<animate attributename="x" values="30; -21" begin="carrenoir.mousedown" dur="0.1ms" fill="freeze"/>
<animate attributename="x" values="-21; 30" begin="carreblanc.mousedown" dur="0.1ms" fill="freeze"/>
</rect>
<rect fill="#ffffff" stroke-width="1" stroke="#000000" height="20" width="20" y="190" x="-30" id="carreblanc">
<animate attributename="x" values="-21; 30" begin="carrenoir.mousedown" dur="0.1ms" fill="freeze"/>
<animate attributename="x" values="30; -21" begin="carreblanc.mousedown" dur="0.1ms" fill="freeze"/>
</rect>
<g>
<rect id="svg_1" height="80" width="20" y="230" x="230" stroke-width="0" rx="10" ry="10" fill="#ff0000">
<animate attributeName="fill" values="red; black" begin="carrenoir.mousedown" dur="4s" fill="freeze"/>
<animate attributeName="fill" values="black; red" begin="carreblanc.mousedown" dur="2s" fill="freeze"/>
</rect>
<g>
<rect height="80" width="20" y="290" x="230" stroke-width="0" rx="10" ry="10" fill="#00ff00" id="svg_3">
<animate attributeName="fill" values="green; black" begin="carrenoir.mousedown" dur="4s" fill="freeze"/>
<animate attributeName="fill" values="black; green" begin="carreblanc.mousedown" dur="2s" fill="freeze"/>
</rect>
<g>
<rect height="80" width="20" y="350" x="230" stroke-width="0" rx="10" ry="10" fill="#0000ff" id="svg_4">
<animate attributeName="fill" values="blue; black" begin="carrenoir.mousedown" dur="4s" fill="freeze"/>
<animate attributeName="fill" values="black; blue" begin="carreblanc.mousedown" dur="2s" fill="freeze"/>
</rect>
<rect height="80" width="20" y="410" x="230" stroke-width="0" rx="10" ry="10" fill="#ff7f00" id="svg_8">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 240 420; 90 240 420; 0 240 420; -90 240 420; 0 240 420" begin="boutonorange.mousedown" dur="4s" fill="freeze" repeatCount="2"/>
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 240 420; 90 240 420" begin="carrenoir.mousedown" dur="4s" fill="freeze" repeatCount="1"/>
<animate attributeName="fill" values="orange; black" begin="carrenoir.mousedown" dur="4s" fill="freeze"/>
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="90 240 420; 0 240 420" begin="carreblanc.mousedown" dur="2s" fill="freeze" repeatCount="1"/>
<animate attributeName="fill" values="black; orange" begin="carreblanc.mousedown" dur="2s" fill="freeze"/>
</rect>
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 240 360; 90 240 360; 0 240 360; -90 240 360; 0 240 360" begin="boutonbleu.mousedown" dur="4s" fill="freeze" repeatCount="2"/>
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 240 360; 90 240 360" begin="carrenoir.mousedown" dur="4s" fill="freeze" repeatCount="1"/>
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 240 360; 90 240 360" begin="carrenoir.mousedown" dur="4s" fill="freeze" repeatCount="1"/>
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="90 240 360; 0 240 360" begin="carreblanc.mousedown" dur="2s" fill="freeze" repeatCount="1"/>
</g>
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 240 300; 90 240 300; 0 240 300; -90 240 300; 0 240 300" begin="boutonvert.mousedown" dur="4s" fill="freeze" repeatCount="2"/>
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 240 300; 90 240 300" begin="carrenoir.mousedown" dur="4s" fill="freeze" repeatCount="1"/>
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="90 240 300; 0 240 300" begin="carreblanc.mousedown" dur="2s" fill="freeze" repeatCount="1"/>
</g>
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 240 240; 360 240 240" begin="boutonrouge.mousedown" dur="10s" fill="freeze" repeatCount="1"/>
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 240 240; 90 240 240" begin="carrenoir.mousedown" dur="4s" fill="freeze" repeatCount="1"/>
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="90 240 240; 0 240 240" begin="carreblanc.mousedown" dur="2s" fill="freeze" repeatCount="1"/>
</g>
<rect fill="#000000" opacity="0" height="80" width="80" y="170" x="170" id="carrefond">
<animate attributeName="opacity" values="0; 0; 0; 0; 0; 0; 0; 0; 0; 1" begin="carrenoir.mousedown" dur="5s" fill="freeze"/>
<animate attributeName="opacity" values="1; 0; 0; 0; 0" begin="carreblanc.mousedown" dur="0.5s" fill="freeze"/>
</rect>
</svg>