mercredi 20 décembre 2017

Trop ?





<button onclick="myFunctionW()">Go</button></br></br>
<svg width="800" height="450" id="svgWalk" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="character" transform="scale(0.3)">
<ellipse cx="20" cy="230" rx="50" ry="10" fill="black" opacity="0.3"/>
<g>
<rect x="15" y="80" width="20" height="80" stroke="royalblue" rx="10" ry="10"/>
<rect x="15" y="80" width="20" height="80" fill="black" opacity="0.3" rx="10" ry="10"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="-20 25 80;0 25 80;20 25 80;0 25 80;-20 25 80" dur="1s" repeatCount="indefinite"/>
</g>
<g>
<rect x="15" y="150" width="20" height="80" stroke="royalblue" rx="10" ry="10"/>
<rect x="15" y="150" width="20" height="80" fill="black" opacity="0.3" rx="10" ry="10"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="20 25 150;0 25 150;-20 25 150;0 25 150;20 25 150" dur="1s" repeatCount="indefinite"/>
</g>
<rect x="20" y="50" width="10" height="20" stroke="royalblue"/>
<circle cx="25" cy="25" r="25" stroke="royalblue">
<animate attributename="cy" values="25;35;25" begin="0s" dur="1s" repeatCount="indefinite"/>
</circle>
<rect x="0" y="70" width="50" height="80" stroke="royalblue" rx="20" ry="20"/>
<rect x="15" y="150" width="20" height="80" stroke="royalblue" rx="10" ry="10">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="-20 25 150;0 25 150;20 25 150;0 25 150;-20 25 150" dur="1s" repeatCount="indefinite"/>
</rect>
<rect x="15" y="80" width="20" height="80" stroke="royalblue" rx="10" ry="10">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="20 25 80;0 25 80;-20 25 80;0 25 80;20 25 80" dur="1s" repeatCount="indefinite"/>
</rect>
</g>
</defs>
<rect  x="0" y="0" width="800" height="450" fill="royalblue"/>
</svg>

<script>
function myFunctionW() {

for (var i = 0; i < 20; i++) {

var a1 = Math.floor(800*Math.random());
var a2 = -a1;
var b = Math.floor(440*Math.random());
var c = Math.floor(100*Math.random())+800;
var d = Math.floor(440*Math.random());
var e = Math.floor(10*Math.random())+20;

var animateMotion1 = document.createElementNS(svgWalk.namespaceURI, 'animateMotion');
    animateMotion1.setAttributeNS(null, 'begin', '0s');
    animateMotion1.setAttributeNS(null, 'dur', e);
    animateMotion1.setAttributeNS(null, 'repeatCount', 'indefinite');
    animateMotion1.setAttributeNS(null, 'path', 'm'+a2+' '+b+'L'+c+' '+d+'');

var use1 = document.createElementNS(svgWalk.namespaceURI, 'use');
    use1.setAttributeNS(null, 'href', '#character');
    use1.setAttributeNS(null, 'fill', '#'+Math.round(0xFFFFFF * Math.random()).toString(16));

use1.appendChild(animateMotion1);
svgWalk.appendChild(use1);

}}

</script>