mardi 5 juillet 2016

las lineas

Route
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<symbol id="LQD1">
  <line id="svg_4" x1="200" y1="0" x2="200" y2="0" fill="none">
  <animate attributename="x1" begin="0s" dur="2s" repeatcount="indefinite" values="200;0"/>
  <animate attributename="x2" begin="0s" dur="2s" repeatcount="indefinite" values="200;400"/>
  <animate attributename="y1" begin="0s" dur="2s" repeatcount="indefinite" values="0;200"/>
  <animate attributename="y2" begin="0s" dur="2s" repeatcount="indefinite" values="0;200"/>
  </line>
</symbol>
<symbol id="LQD2">
  <line id="svg_4" x1="200" y1="0" x2="400" y2="200" fill="none">
  <animate attributename="x2" begin="0s" dur="4s" repeatcount="indefinite" values="400;0;400"/>
  </line>
</symbol>
 <g>
  <title>Route</title>
  <line id="svg_1" x1="200" y1="0" x2="0" y2="200" stroke-width="0.5" stroke="#000000" fill="none"/>
  <line id="svg_2" x1="200" y1="0" x2="400" y2="200" stroke-width="0.5" stroke="#000000" fill="none"/>
  <line id="svg_3" x1="0" y1="200" x2="400" y2="200" stroke-width="0.5" stroke="#000000" fill="none"/>
 </g>
<use xlink:href="#LQD1" stroke-width="0.5" stroke="#000000"/>
<use xlink:href="#LQD2" stroke-width="0.5" stroke="#000000"/>

  <line id="svg_10" x1="200" y1="200" x2="200" y2="0" stroke-width="0.5" stroke="#000000" fill="none">
    <animate attributename="x2" begin="0s" dur="2s" repeatcount="indefinite" values="200;0"/>  
    <animate attributename="y2" begin="0s" dur="2s" repeatcount="indefinite" values="0;200"/>
  </line>

  <line id="svg_11" x1="200" y1="200" x2="200" y2="0" stroke-width="0.5" stroke="#000000" fill="none">
    <animate attributename="x2" begin="0s" dur="2s" repeatcount="indefinite" values="200;400"/>  
    <animate attributename="y2" begin="0s" dur="2s" repeatcount="indefinite" values="0;200"/>
  </line>
  <circle id="svg_12" r="100" cy="100" cx="200" stroke-width="0.5" stroke="#000000" fill="none"/>
  <circle id="svg_13" r="83" cy="117" cx="200" stroke-width="0.5" stroke="#000000" fill="none">
      <animate attributename="cy" begin="0s" dur="2s" repeatcount="indefinite" values="0;117"/>  
      <animate attributename="r" begin="0s" dur="2s" repeatcount="indefinite" values="0;83"/>  
  </circle>
</svg>