jeudi 12 janvier 2017

Bauhaus

Bauhaus Bauhaus
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<defs>
  <filter height="200%" width="200%" y="-50%" x="-50%" id="svg_3_blur">
   <feGaussianBlur stdDeviation="2" in="SourceGraphic"/>
  </filter>
<symbol id="quart">
  <line id="svg_1" y2="200" x2="400" y1="200" x1="200" stroke-width="5" stroke="#000000" fill="none">
     <animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 200 200; -90 200 200; 0 200 200" dur="4s" repeatCount="indefinite"/>
  </line>
  <line id="svg_2" y2="400" x2="200" y1="200" x1="200" stroke="#000000" fill="none">
     <animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 200 200; 90 200 200; 0 200 200" dur="4s" repeatCount="indefinite"/>
  </line>
</symbol>
<clipPath id="circ">
  <circle cx="200" cy="200">
    <animate attributename="r" begin="0s" repeatcount="indefinite" dur="4s" values="100;50;100"/>
  </circle>
</clipPath>


</defs>
<circle cx="200" cy="200" r="100" fill="firebrick" opacity="0.5"/>
<circle cx="200" cy="200" r="50" fill="firebrick" />
<g clip-path="url(#circ)">
<use xlink:href="#quart"/>
<use xlink:href="#quart" transform="translate(10 10)"/>
<use xlink:href="#quart" transform="translate(-10 -10)"/>
<use xlink:href="#quart" transform="translate(20 20)"/>
<use xlink:href="#quart" transform="translate(-20 -20)"/>
<animateTransform attributename="transform" attributetype="xml" type="rotate" begin="0s" dur="8s" repeatcount="indefinite" values="0 200 200; 360 200 200"/>
</g>


<g filter="url(#svg_3_blur)" transform="translate(2 2)" opacity="0.6">
<text x="140" y="350" font-family="Verdana" font-size="30" fill="#000000">
Bauhaus</text>
<line id="svg_1" y2="360" x2="270" y1="360" x1="140" stroke-width="3" stroke="#000000" fill="none">
</g>

<text x="140" y="350" font-family="Verdana" font-size="30" fill="firebrick">
Bauhaus</text>
<line id="svg_1" y2="360" x2="270" y1="360" x1="140" stroke-width="3" stroke="#000000" fill="none">

</svg>