<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<symbol id="conf11" opacity="0">
<circle cx="120" cy="171" r="4" id="svg_3"/>
<circle cx="277.25" cy="272.91666" r="4.12311" id="svg_4"/>
<circle cx="327.25" cy="152.91666" r="10.19804" id="svg_5"/>
<circle cx="395.25" cy="190.91666" r="3.60555" id="svg_6"/>
<circle cx="367.25" cy="245.91666" r="6.40312" id="svg_7"/>
<circle cx="164.25" cy="294.91666" r="2" id="svg_8"/>
<circle cx="112.25" cy="324.91666" r="3.16228" id="svg_9"/>
<circle cx="319.25" cy="406.91666" r="12.20656" id="svg_10"/>
<circle cx="445.25" cy="342.91666" r="4" id="svg_11"/>
<circle cx="221.25" cy="107.91666" r="1" id="svg_12"/>
<circle cx="364.25" cy="80.91666" r="10.77033" id="svg_13"/>
<circle cx="425.25" cy="78.91666" r="5.38516" id="svg_14"/>
<circle cx="64.25" cy="78.91666" r="13.45362" id="svg_15"/>
<circle cx="169.25" cy="88.91666" r="13" id="svg_16"/>
<circle cx="124.25" cy="246.91666" r="13.34167" id="svg_17"/>
<circle cx="51.25" cy="265.91666" r="8.06226" id="svg_18"/>
<circle cx="65.25" cy="359.91666" r="3.60555" id="svg_19"/>
<circle cx="35.25" cy="446.91666" r="20.24846" id="svg_20"/>
<circle cx="187.25" cy="342.91666" r="7.2111" id="svg_21"/>
<circle cx="245.25" cy="437.91666" r="13.60147" id="svg_22"/>
<circle cx="266.25" cy="351.91666" r="2" id="svg_23"/>
<circle cx="236.25" cy="195.91666" r="6.7082" id="svg_24"/>
<circle cx="275.25" cy="91.91666" r="2.82843" id="svg_25"/>
<circle cx="396.25" cy="125.91666" r="8" id="svg_26"/>
<circle cx="443.25" cy="238.91666" r="1.41421" id="svg_27"/>
<circle cx="449.25" cy="263.91666" r="2.82843" id="svg_28"/>
<circle cx="460.25" cy="248.91666" r="2.23607" id="svg_29"/>
<circle cx="396.25" cy="338.91666" r="10.19804" id="svg_30"/>
<circle cx="390.25" cy="356.91666" r="4.12311" id="svg_31"/>
<circle cx="403.25" cy="361.91666" r="1" id="svg_32"/>
<circle cx="471.25" cy="45.91666" r="13.60147" id="svg_33"/>
<circle cx="252.25" cy="173.91666" r="1" id="svg_34"/>
<circle cx="416.25" cy="90.91666" r="6.08276" id="svg_35"/>
<circle cx="431.25" cy="89.91666" r="5" id="svg_36"/>
<circle cx="262.25" cy="36.91666" r="2" id="svg_37"/>
<circle cx="283.25" cy="36.91666" r="2.23607" id="svg_38"/>
<circle cx="266.25" cy="51.91666" r="11.40175" id="svg_39"/>
<circle cx="48.25" cy="279.91666" r="4.12311" id="svg_40"/>
<circle cx="78.25" cy="375.91666" r="7.81025" id="svg_41"/>
<circle cx="448.24999" cy="396.91664" r="4.3847" id="svg_42"/>
<circle cx="34.25" cy="91.91666" r="6.7082" id="svg_43"/>
<circle cx="49.25" cy="99.91666" r="5" id="svg_44"/>
<circle cx="342.25" cy="278.91666" r="10.19804" id="svg_45"/>
<circle cx="236.25" cy="233.91666" r="1" id="wsvg_46"/>
<circle cx="379.25" cy="206.91666" r="10.77032" id="svg_47"/>
<circle cx="298.25" cy="255.91666" r="5.38516" id="svg_48"/>
<circle cx="79.25" cy="204.91666" r="13.45362" id="svg_49"/>
<circle cx="142.25" cy="75.91666" r="5" id="svg_50"/>
<circle cx="290.25" cy="217.91666" r="2.82843" id="svg_51"/>
<circle cx="431.25" cy="216.91666" r="6.08276" id="svg_52"/>
<circle cx="446.25" cy="215.91666" r="5" id="svg_53"/>
<circle cx="216.25" cy="307.91666" r="11.40175" id="svg_54"/>
<circle cx="49.25" cy="217.91666" r="6.7082" id="svg_55"/>
<circle cx="64.25" cy="225.91666" r="5" id="svg_56"/>
<animate attributename="fill" values="#078C03;#FCDD09;#FB5E76;#FC9E38;#F21905" dur="10s" begin="0s" repeatcount="indefinite"/>
<animate attributename="opacity" values="0;1;1;1;1;1;1;1;0" dur="40s" begin="button1.mousedown" fill="freeze"/>
<animate attributename="stroke-width" values="0;10;0" dur="30s" begin="0s" repeatcount="indefinite"/>
<animate attributename="stroke" values="#FFFFFF;#000000;#FFFFFF" dur="10s" begin="0s" repeatcount="indefinite"/>
</symbol>
<title>Variables colorées</title>
<rect id="svg_1" height="500" width="500" y="0" x="0" stroke-width="0" stroke="#000000" fill="#000000"/>
<g>
<use xlink:href="#conf11">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 300 300; 360 300 300" dur="40s" repeatCount="indefinite"/>
<animate attributename="opacity" values="0;1;0" dur="2s" begin="0s" repeatcount="indefinite"/>
</use>
<use xlink:href="#conf11">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 350 300; 360 350 300" dur="20s" repeatCount="indefinite"/>
<animate attributename="opacity" values="1;0;1" dur="2s" begin="0s" repeatcount="indefinite"/>
</use>
<use xlink:href="#conf11">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="360 260 300; 0 300 300" dur="40s" repeatCount="indefinite"/>
<animate attributename="opacity" values="0;1;0" dur="2s" begin="0s" repeatcount="indefinite"/>
</use>
<use xlink:href="#conf11">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="360 350 300; 0 350 300" dur="20s" repeatCount="indefinite"/>
<animate attributename="opacity" values="1;0;1" dur="2s" begin="0s" repeatcount="indefinite"/>
</use>
<use xlink:href="#conf11">
<animate attributename="x" values="-600;600" dur="60s" begin="0s" repeatcount="indefinite"/>
<animate attributename="opacity" values="1;0;1" dur="3s" begin="0s" repeatcount="indefinite"/>
</use>
<use xlink:href="#conf11">
<animate attributename="x" values="600;-600" dur="60s" begin="0s" repeatcount="indefinite"/>
<animate attributename="opacity" values="1;0;1" dur="4s" begin="0s" repeatcount="indefinite"/>
</use>
<animateTransform attributeName="transform" type="scale" values="1;2;1" dur="20s" begin="0s" repeatCount="indefinite"/>
<animateMotion values="0,0;-600,-600;0,0" begin="0s" dur="20s" repeatcount="indefinite"></animateMotion>
</g>
<g>
<use xlink:href="#conf11">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 300 300; 360 300 300" dur="40s" repeatCount="indefinite"/>
<animate attributename="opacity" values="0;1;0" dur="2s" begin="0s" repeatcount="indefinite"/>
</use>
<use xlink:href="#conf11">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 350 300; 360 350 300" dur="20s" repeatCount="indefinite"/>
<animate attributename="opacity" values="1;0;1" dur="2s" begin="0s" repeatcount="indefinite"/>
</use>
<use xlink:href="#conf11">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="360 260 300; 0 300 300" dur="40s" repeatCount="indefinite"/>
<animate attributename="opacity" values="0;1;0" dur="2s" begin="0s" repeatcount="indefinite"/>
</use>
<use xlink:href="#conf11">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="360 350 300; 0 350 300" dur="20s" repeatCount="indefinite"/>
<animate attributename="opacity" values="1;0;1" dur="2s" begin="0s" repeatcount="indefinite"/>
</use>
<use xlink:href="#conf11">
<animate attributename="x" values="-600;600" dur="60s" begin="0s" repeatcount="indefinite"/>
<animate attributename="opacity" values="1;0;1" dur="3s" begin="0s" repeatcount="indefinite"/>
</use>
<use xlink:href="#conf11">
<animate attributename="x" values="600;-600" dur="60s" begin="0s" repeatcount="indefinite"/>
<animate attributename="opacity" values="1;0;1" dur="4s" begin="0s" repeatcount="indefinite"/>
</use>
</g>
<rect id="button1" height="10" width="10" y="240" x="240" stroke-width="0" fill="#ffffff">
<animate attributename="opacity" values="1;0;0;0;0;0;0;0;1" dur="40s" begin="button1.mousedown" fill="freeze">
</rect>
<rect id="blacksq" height="500" width="500" y="0" x="0" stroke-width="0" stroke="#000000" fill="#000000">
<animate attributename="opacity" values="1;0" dur="1s" begin="blacksq.mousedown" id="fade"/>
<animate attributename="x" values="-500" begin="fade.end"/>
</rect>
</svg>
