<div style="text-align:center">
<svg width="800" height="450" id="svgCochon" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="800" height="450" fill="#efefef"/>
<rect x="0" y="0" width="800" height="210" fill="royalblue"/>
<defs>
<path id="sapin" d="M 26,1 C 26,1 40,22 40,22 40,22 34,22 34,22 34,22 45,37 45,37 45,37 40,37 40,37 40,37 50,53 50,53 50,53 29,53 29,53 29,53 29,60 29,60 29,60 21,60 21,60 21,60 21,53 21,53 21,53 1,53 1,53 1,53 10,37 10,37 10,37 5,37 5,37 5,37 15,22 15,22 15,22 10,22 10,22 10,22 24,1 24,1 24,1 26,1 26,1 Z"/>
<g id="pig">
<rect id="shadow" x="15" y="92" width="125" height="15" rx="5" ry="5" fill="black" opacity="0.1"/>
<path stroke="pink" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" d="m20,30l-12,0l0,18l6,0l0,-10l-10,0l0,10" id="tail"/>
<g id="leg3">
<rect x="75" y="60" width="20" height="40" rx="5" ry="5" fill="pink" stroke="black" stroke-opacity="0.1"/>
<rect x="75" y="60" width="20" height="40" rx="5" ry="5" fill="black" opacity="0.15"/>
<rect x="75" y="60" width="10" height="40" rx="5" ry="5" fill="black" opacity="0.1"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 82 65;-20 82 65;0 82 65;20 82 65;0 82 65" dur="1s" repeatCount="indefinite"/>
</g>
<g id="leg4">
<rect x="105" y="60" width="20" height="40" rx="5" ry="5" fill="pink" stroke="black" stroke-opacity="0.1"/>
<rect x="105" y="60" width="20" height="40" rx="5" ry="5" fill="black" opacity="0.15"/>
<rect x="105" y="60" width="10" height="40" rx="5" ry="5" fill="black" opacity="0.1"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="-20 112 65;0 112 65;20 112 65;0 112 65;-20 112 65" dur="1s" repeatCount="indefinite"/>
</g>
<g id="ear2">
<rect x="115" y="15" width="20" height="30" rx="5" ry="5" fill="pink" stroke="black" stroke-opacity="0.1"/>
<rect x="115" y="15" width="20" height="30" rx="5" ry="5" fill="black" opacity="0.1"/>
<rect x="115" y="15" width="15" height="30" rx="5" ry="5" fill="black" opacity="0.1"/>
</g>
<g id="body">
<rect x="20" y="20" width="120" height="60" rx="5" ry="5" fill="pink" stroke="black" stroke-opacity="0.1"/>
<rect x="20" y="20" width="70" height="60" rx="5" ry="5" fill="black" opacity="0.1"/>
<animateMotion dur="1s" begin="0s" path="m0 0l0 -1z" repeatcount="indefinite"/>
</g>
<g id="leg1">
<rect x="25" y="60" width="20" height="40" rx="5" ry="5" fill="pink" stroke="black" stroke-opacity="0.1"/>
<rect x="25" y="60" width="10" height="40" rx="5" ry="5" fill="black" opacity="0.1"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 37 65;-20 37 65;0 37 65;20 37 65;0 37 65" dur="1s" repeatCount="indefinite"/>
</g>
<g id="leg2">
<rect x="55" y="60" width="20" height="40" rx="5" ry="5" fill="pink" stroke="black" stroke-opacity="0.1"/>
<rect x="55" y="60" width="10" height="40" rx="5" ry="5" fill="black" opacity="0.1"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="-20 67 65;0 67 65;20 67 65;0 67 65;-20 67 65" dur="1s" repeatCount="indefinite"/>
</g>
<g id="eye1">
<rect x="100" y="30" width="5" height="20" rx="5" ry="5" fill="black" opacity="0.6"/>
<rect x="102" y="31" width="2" height="10" rx="5" ry="5" fill="white" opacity="0.8"/>
</g>
<g id="eye2">
<rect x="125" y="30" width="5" height="20" rx="5" ry="5" fill="black" opacity="0.6"/>
<rect x="127" y="31" width="2" height="10" rx="5" ry="5" fill="white" opacity="0.8"/>
</g>
<g id="snout">
<rect x="100" y="52" width="35" height="20" rx="2" ry="2" fill="pink" stroke="black" stroke-opacity="0.1"/>
<rect x="100" y="52" width="10" height="20" rx="2" ry="2" fill="black" opacity="0.1"/>
<rect x="114" y="56" width="5" height="12" rx="2" ry="2" fill="black" opacity="0.2"/>
<rect x="126" y="56" width="5" height="12" rx="2" ry="2" fill="black" opacity="0.2"/>
</g>
<g id="ear1">
<rect x="65" y="15" width="20" height="30" rx="5" ry="5" fill="pink" stroke="black" stroke-opacity="0.1"/>
<rect x="65" y="15" width="15" height="30" rx="5" ry="5" fill="black" opacity="0.1"/>
</g>
</g>
</defs>
<use href="#sapin" transform="translate(020 150)" fill="green"/>
<use href="#sapin" transform="translate(080 150)" fill="#66CD00"/>
<use href="#sapin" transform="translate(140 150)" fill="green"/>
<use href="#sapin" transform="translate(200 150)" fill="#66CD00"/>
<use href="#sapin" transform="translate(260 150)" fill="green"/>
<use href="#sapin" transform="translate(320 150)" fill="#66CD00"/>
<use href="#sapin" transform="translate(380 150)" fill="green"/>
<use href="#sapin" transform="translate(440 150)" fill="#66CD00"/>
<use href="#sapin" transform="translate(500 150)" fill="green"/>
<use href="#sapin" transform="translate(560 150)" fill="#66CD00"/>
<use href="#sapin" transform="translate(620 150)" fill="green"/>
<use href="#sapin" transform="translate(680 150)" fill="#66CD00"/>
<use href="#sapin" transform="translate(740 150)" fill="green"/>
<g>
<use href="#pig" transform="scale(1)">
<animateMotion dur="24s" begin="0s" path="m-200 150l2000 0" repeatcount="indefinite"/>
</g>
<g transform="translate(-150 12)">
<use href="#pig" transform="scale(0.9)">
<animateMotion dur="22s" begin="0s" path="m-200 150l2000 0" repeatcount="indefinite"/>
</g>
<g transform="translate(-280 21)">
<use href="#pig" transform="scale(0.8)">
<animateMotion dur="20s" begin="0s" path="m-200 150l2000 0" repeatcount="indefinite"/>
</g>
<g transform="translate(-400 31)">
<use href="#pig" transform="scale(0.7)">
<animateMotion dur="18s" begin="0s" path="m-200 150l2000 0" repeatcount="indefinite"/>
</g>
<g transform="translate(-500 61)">
<use href="#pig" transform="scale(0.4)">
<animateMotion dur="32s" begin="0s" path="m-900 150l2900 0" repeatcount="indefinite"/>
</g>
</svg>
</div>
<script>
function myFunctionC() {
for (var i = 0; i < 300; i++) {
var cx = Math.floor(800*Math.random());
var cy = Math.floor(450*Math.random());
var r = Math.floor(2*Math.random())+2;
var d = Math.floor(6*Math.random())+6;
var o = Math.random();
var circle1 = document.createElementNS(svgCochon.namespaceURI, 'circle');
circle1.setAttributeNS(null, 'cx', cx);
circle1.setAttributeNS(null, 'cy', cy);
circle1.setAttributeNS(null, 'r', r);
circle1.setAttributeNS(null, 'fill', '#ffffff');
circle1.setAttributeNS(null, 'opacity', o);
var animateMotion1 = document.createElementNS(svgCochon.namespaceURI, 'animateMotion');
animateMotion1.setAttribute('path', 'm0 -450L0 450');
animateMotion1.setAttribute('begin', '0s');
animateMotion1.setAttribute('dur', d);
animateMotion1.setAttribute('repeatCount', 'indefinite');
circle1.appendChild(animateMotion1);
svgCochon.appendChild(circle1);
}}
myFunctionC()
</script>
