mercredi 15 février 2017
Atom
<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/ -->
<g>
<rect id="svg_2" height="400" width="400" y="0" x="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#7f0000"/>
<ellipse ry="50" rx="50" id="svg_1" cy="200" cx="200" stroke-width="5" fill="#ffd800">
<animate attributename="opacity" begin="0s" dur="2s" repeatcount="indefinite" values="1;0.6;1"/>
</ellipse>
<ellipse ry="100" rx="100" id="svg_1" cy="200" cx="200" stroke-width="5" stroke="#ffd800" fill="none" stroke-dasharray="630">
<animate attributename="stroke-dashoffset" begin="0s" dur="2s" repeatcount="indefinite" values="-630;630"/>
<animate attributename="stroke-width" begin="0s" dur="2s" repeatcount="indefinite" values="0;5;0"/>
</ellipse>
<ellipse ry="200" rx="100" id="svg_1" cy="200" cx="200" stroke-width="5" stroke="#ffd800" fill="none" stroke-dasharray="630">
<animate attributename="stroke-dashoffset" begin="0s" dur="2s" repeatcount="indefinite" values="-630;630"/>
<animate attributename="stroke-width" begin="0s" dur="2s" repeatcount="indefinite" values="0;5;0"/>
<animateTransform attributeName="transform" begin="0s" attributetype="xml" type="rotate" values="-90 200 200; -270 200 200;" dur="8s"/>
</ellipse>
<ellipse ry="100" rx="200" id="svg_1" cy="200" cx="200" stroke-width="5" stroke="#ffd800" fill="none" stroke-dasharray="630">
<animate attributename="stroke-dashoffset" begin="0s" dur="2s" repeatcount="indefinite" values="-630;630"/>
<animate attributename="stroke-width" begin="0s" dur="2s" repeatcount="indefinite" values="0;5;0"/>
<animateTransform attributeName="transform" begin="0s" attributetype="xml" type="rotate" values="0 200 200; -360 200 200;" dur="8s" repeatCount="indefinite"/>
</ellipse>
</g>
</svg>
-
Animation attribute (width, opacity, etc.) <animate attributeName="?" begin="0s" dur="6s" repeatCount...
-
Generate