mercredi 17 mai 2017
Random lion tooth
<div style="text-align:center"/>
<svg id="svgbras" xmlns="http://www.w3.org/2000/svg" width="400" height="400"></svg>
<script>
function myFunctionbras() {
for (var i = 0; i < 8; i++) {
var svgbras = document.getElementById('svgbras');
var x1 = 200;
var y1 = 200;
var x2 = 300;
var y2 = 200;
var dur = Math.floor(Math.random() * 9)+3;
var angle1 = Math.floor(Math.random() * 360);
var angle2 = Math.floor(Math.random() * 360);
var line = document.createElementNS(svgbras.namespaceURI, 'line');
line.setAttribute('x1', x1);
line.setAttribute('y1', y1);
line.setAttribute('x2', x2);
line.setAttribute('y2', y2);
line.setAttribute('stroke-width', 8);
line.setAttribute('stroke-linecap', 'round');
line.setAttributeNS(null, 'stroke', '#'+Math.round(0xFFFFFF * Math.random()).toString(16));
var animation = document.createElementNS(svgbras.namespaceURI, 'animateTransform');
animation.setAttribute('attributeName', 'transform');
animation.setAttribute('attributeType', 'xml');
animation.setAttribute('type', 'rotate');
animation.setAttribute('values', ''+angle1+' 200 200; '+angle2+' 200 200; '+angle1+' 200 200');
animation.setAttribute('dur', dur);
animation.setAttribute('repeatCount', 'indefinite');
var animation2 = document.createElementNS(svgbras.namespaceURI, 'animate');
animation2.setAttribute('attributeName', 'stroke-width');
animation2.setAttribute('values', '8;32;8');
animation2.setAttribute('dur', dur);
animation2.setAttribute('repeatCount', 'indefinite');
line.appendChild(animation);
line.appendChild(animation2);
svgbras.appendChild(line);
}}
</script>
<br/>
<button onclick="myFunctionbras()">Click me</button>
</div>
<br />
-
Animation attribute (width, opacity, etc.) <animate attributeName="?" begin="0s" dur="6s" repeatCount...
-
Generate