samedi 14 octobre 2017

Javascript skeleton




<center>
<svg id="svgSkel" xmlns="http://www.w3.org/2000/svg" width="500" height="777"></svg>
<br>
<button onclick="myFunction1()">Click me</button> <button onclick="myFunction2()">Delete</button>
</center>

<script>

function myFunction1() {
var svgns = "http://www.w3.org/2000/svg";
var angle1 = Math.floor(Math.random() * 90);
var angle2 = Math.floor(Math.random()*460) - 360;
var angle3 = -angle1;
var angle4 = -angle2;
var angle5 = Math.floor(Math.random() * 90);
var angle6 = Math.floor(Math.random() * 180);
var angle7 = -angle6;
var angle8 = -angle5;
var anglea = Math.floor(Math.random() * 45);
var angleb = -anglea;

var dur = Math.floor(Math.random() * 3)+3;

//corps:
    var image0 = document.createElementNS(svgns, 'image');
    image0.setAttributeNS(null, 'x', 0);
    image0.setAttributeNS(null, 'y', 0);
    image0.setAttributeNS(null, 'width', 500);
    image0.setAttributeNS(null, 'height', 777);
    image0.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'https://lh3.googleusercontent.com/Jh9Do8OXL9vmmZH4NRwbKqMLTrqR95RtYhls9nE5uFI_3BaaO1F4Az7WWtIv09kBMcVc0G6GDcvrTFmTwLBY-t5aYeIQQR8qMYlEcmKEU06cm7ixUXNx8-0jc3_k5-BqK8iAfWbpeBKFq6Hw-SnF8nBq6j9MTUwWyawXTsDLHovjCL5s3zlIM4UrVgMzlzQMSKFEK1cu2vaKjECVnQFqn3NOra4w1mKg8HbW_l_w9nXBPDIyQx0HAaeh37-pGnK_07VeK2phsKPr9tNJEak_zBnEPO_kFWWu9FTqCVL5oPt55xRf2fNkEQD177SEc26Ab-wyR04Z8JuL4XwvsLhVFbQ-FSe9Q50xtFttPJnDNCzDAwXIzpKtxM8dmj33PFw2BVbzRbXAeuO5uzN4p-BPND6X3oF9fsakgW8-HcPvygasGeG0UDaXFJg_Ls12ejyvkY_SZKVaQB5upFbcJSrLjkJipyHQHcKQjkuuk8Tn6DRUiUgbxaij-EWVawB8_kQXCzL_thfAVZEKBMiWeSrK2DntiGOjGsLpMldWhDR8X13wiN9MbOM4b0f2As1wjEkzKMjAheWq6nV-1wsM4B-iTWKWikokbrd2LmoPQLRuDh0SsvVRT0lefhQ-B0ca2H00AF3bvbpzIKyEQyrYRTjNcucHeXIWCvWdgfc=w500-h777-no');

//humerus gauche:
    var image1 = document.createElementNS(svgns, 'image');
    image1.setAttributeNS(null, 'x', 0);
    image1.setAttributeNS(null, 'y', 0);
    image1.setAttributeNS(null, 'width', 500);
    image1.setAttributeNS(null, 'height', 777);
    image1.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'https://lh3.googleusercontent.com/e0imC4TbSvdYapOxZaAaNc9pWnH7nGVAjMzbs2k29fohz20GTi59g5feblL5yOFlQlj6vCYGXkJ_XOVxh5K4__MUVPnJEJ360f7kcsy4pfcDi1JLoJK-ZW6ziVKxOw1pqYBh60s7D4mE7gAZ3zdlT4PIoEP0pOkgUoehEIGgdT_L29Q5rN6AKbdGlraBGQEyjeDGRGcbKv3rleNA0RCDuwPveQTj1c6FZaEEQH4v9dv_QKG1Y52YihpLpOOwl9Yry1dNIhwqcDcVMtXOvyc1qDFCz7a3q0Gzy1BMpX9YXxPy3JsixJagHz-4keM1DN_G-cqtzsHrR2xin84m7-ERrbJ59XArHCOXOdvfsOBImCR2TBRfikb0KIZvjAbe-EzESpdzDZLkeao_T3-NIzuIIgUqkxE8O5O8Vear-cijgFP8Dd-0_WbIt0hOvm88fZUuJG42QXdpGCn37sOweVY_TZzLGWc3qg2K9Qpoh5ehr6RZPzyyiCWnR1IApVot4rQGrCcSBRo5MvU7ur709URPC0mHOM7CQ9xlhNuuMiMKHlLotz9mVDdd0japar5l_sSkgB3bNmF9YJeUy3g5PIRR-yIFwhihHUKYVY0IHQhP-X1lPyW59VYGTJOQ-UGTFCe6MWBqLelsH1iXxCz5nfCPH0htQGgKemkzwbI=w500-h777-no');

//cubitus gauche:
    var image2 = document.createElementNS(svgns, 'image');
    image2.setAttributeNS(null, 'x', 0);
    image2.setAttributeNS(null, 'y', 0);
    image2.setAttributeNS(null, 'width', 500);
    image2.setAttributeNS(null, 'height', 777);
    image2.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'https://lh3.googleusercontent.com/5tiBsvn9-s7QruIH8KdZONwzCcKOx8ik43mPAxus7W_qmIr-aGAT1bXgL5yHVv9Za9qIhJUi8njPOw-niWk8MRL6AwwKRVzpPY4C6_C2fqGiB8VvN-e5OgfaG_9X11AC_vFtqPPKUBdmhGlMrpmpmt6a9kC68VFd1nGy1reoaBOFAglp6s8XsfZe6kYp2YePVs3Qmhm1CulJzMRIIIyOiT-j_54KypaNHm5NmYepNx-jq6Lzcyz8hO1tnpz21IJWyTPvo39fF9dkutNB1m7yeTyrDT93v41VCtOiJNgaVtWe1zy-ewBwP5o4d4yJVL-8L95xg64GAvhg4euLdJj4CoSl4uQVelAwvkbwp5UdDBtqajv34UCNdWX37cDQ2AEYG7jC7l0rqCUOigNDz6HBozpQ6tXbKNmTh0VUhy5S2XkQYTYuvDREJXta2p98my0edHnlxzItkD24m8JwCN2972dKUCm84W7q3OVXL5m1fe800tN5hn9h6ueJNPa0JaJwZtFFxRbzEu_HcoBPyrXqJcN-8-T2h54xZRmbT-2Jsr7JOnwy3afbLTIPfGEbOy1YUe1xxdxguvRI_KEnm9esUSIkKilfhvfpqSxfKvFIEly5EII9NkYqtT2j0DSijJ2NV1UPi1DDW7d4BlY5HjBTggAQ2ZmsKBYdhH8=w500-h777-no');

//humerus droit:
    var image3 = document.createElementNS(svgns, 'image');
    image3.setAttributeNS(null, 'x', 0);
    image3.setAttributeNS(null, 'y', 0);
    image3.setAttributeNS(null, 'width', 500);
    image3.setAttributeNS(null, 'height', 777);
    image3.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'https://lh3.googleusercontent.com/WlSnUErGPltkdlwy91mYG6HzFOG14mskeIFmsNfr26fysX8HtJmdC8ZtEJ7jMI8pR8baXFjRBcrmsqrLBySlY78r6j33CBxJezhIIB-TIJPMHzrnO_VVuOrjGatKyeIkgCEc_VNZs72lyp65PkxKRvijhWhcwaR7cvW7psdqRyZ7l_3THXWmsq8N_NUDfxFYZA_ghzyO7OlcBiIy-20kMk-8ZP5ehMifuwpL_r9M0QQqNGEylWMNgJUkgVL6DBfGzdKzcLjEQTi3toO_WkrvYQItD4ynTkTxWeh28ljqErf55VqbUOLDPjBRwAST3cHUwpi5i6rqo1BVXXmqwT-ld7PJSM3getMfCGX7BnEEpmrEu8HJI5NL4UkWhli8ij6-aYDNy9d5AITpfcyn9OdMuurVYacUkH-hvREkvPJNd4-AxnJ0swY0KqKgpJRYL5dJo8vO2zlPyodRWFK7KrgjR5DCzrGQEh91zv36BELW-MQBGLV2jgbl2_WGY6cIdawnLzf_ZR-zMJi6yGELOxisZDqK7tphmioM8yKUj7RbNUeiCOGN4NYV9gQkDejZZ1djnq_QTNc509zBBFGs6xbeKK5Osb-QuvhsBnaDEZDP4Uygzd3HzJosA5xoUGQbKA9y3f_WgfBMOTh5JUGOr9wJFwM7BHSAibVbDVA=w500-h777-no');

//cubitus droit:
    var image4 = document.createElementNS(svgns, 'image');
    image4.setAttributeNS(null, 'x', 0);
    image4.setAttributeNS(null, 'y', 0);
    image4.setAttributeNS(null, 'width', 500);
    image4.setAttributeNS(null, 'height', 777);
    image4.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'https://lh3.googleusercontent.com/lxcMCMFTh3eY_yhkUuBy2j-jSmAo_3tQtpV3R7TiCPdahSFXSI8DzzXebuSL5iLflgfsiPuiDuAZMCmclAgMtKs2n4imacop9LCs_jYrSC9WX7dSGj-grMxI7k1XeGLYhMLBKbW8Vop4PKVSIfAHAxOVPhNgp77XH5gfDQbTcQULRSipSJe24TpetSlg3cJFyb26UD0VSKCP02OwvsYmUge-WSxItS6kptwJeJ1Dg5hbIKDd3M9fFUYSZIdRKrKEmmF5CZwRR7w3fmlHctdxbl9EPkvh1SIFY4umvGPflQzfvHiWrspIzjHvqKKxyV8rTHag0QEJvVjH6hXN4cRbn2NhFeRF5wr3N_JVLwBeHydCRYELb3uiMS4ovOEvdYA_9TbGk9dzUVQRsOnq15g6VShQS-uibCtHf-93ljmTMhz-RENsEXiGQ7CMluywswbHovTsWdMbMEGtyWIc8iLL7UJZlIn0r6mWcOYjAYhLgDql15gG43cC_gaNj7OowRzNNTv-ya1IoYGQe4KU0LVvSBBHuT-dcNaPe6Umch-ZBzNPD-mskxiR6sWhLxV27i3F4JVnD-3LXnTvLhevnpdffAwTj8XLHI0Nk9_cmtp2FHNhvi2bR0zpES-S4p2Sjz9sLv3FKwYLW4zu1sZQFGAepiYECXUp_Wvfo-I=w500-h777-no');

//fémur gauche:
    var image5 = document.createElementNS(svgns, 'image');
    image5.setAttributeNS(null, 'x', 0);
    image5.setAttributeNS(null, 'y', 0);
    image5.setAttributeNS(null, 'width', 500);
    image5.setAttributeNS(null, 'height', 777);
    image5.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'https://lh3.googleusercontent.com/0memmDq2_zq5vwGGM2xRWhTq4f8gKrhKW4Y5zs0zt5_jvr77CBD6E4Tyko1whQfRAQDOjqHqt34TgSw6fVifaC_-HRjCDSOgJvPdrJm9WXoHxYCIbgVCxGk4dJqbj7Ex_yAJXgthbODT9RYK-zluYtz59MgMibKYVdQTs4jempIRTLpfFP79psB65tHtXclRx4Nz18ioHEh9GARvGPmsYYeFkm6zshId9XaTvK82GXXDUapluWsXLrAdverbXJfYtM9k1Doomj0LpgiUPJ4xkCc2HXi4y3mMsyn0g_RInbba0zsMnPhVG8Z50xKTD28YZt-Z8taZgfUiQGQmU79e62eJnQNd4C0jxP__OnE2UNDP59WMgTHf1WdKknVVs-GRVhoOEetIufyCfI3-yaBDzs4s3Synj2Ba8cXO9bygNVaWvNcU9ZJiMvmV-HdPt3Ojw6RcvZOtEq2mKq9uzTaL13Uw1PFthK5wqzyvV-IspLcdNmwXkbzaX1t-nQuzacHxAY7bN3SABJF4YvriCv433J6z1a-4Kx4HvnxV4pbfBwOfKVnLBCvgUH7zDpfpAJvYgTYiMuuXsyBk4IBeeQQ2jSE5piZPCQGJ57OipHq4FqhocK2IvSuZJ6v4jTctDxTNFpolj4lTBtURX3cXGCHYB7Mk_yvQXIDf-wc=w500-h777-no');

//tibia gauche:
    var image6 = document.createElementNS(svgns, 'image');
    image6.setAttributeNS(null, 'x', 0);
    image6.setAttributeNS(null, 'y', 0);
    image6.setAttributeNS(null, 'width', 500);
    image6.setAttributeNS(null, 'height', 777);
    image6.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'https://lh3.googleusercontent.com/Erz6eVpsdIGRs65PVAZTrips41mCLuFkSOoFgXGyZ99Y_JMxn1x1nvuXCGzK_TLTKOpPGq_BmPg5hbNnxYwy5Pbexaew_PWVHx84GyodAxqr2LpqZxj5jFyXA8qPDHkT9TkRsZDd3NpRR852FyOjKBjECQwnFckk-gMpXzRj-IhaLwwheJjanHLu9xUIwPrCIIQmI6FzDuZFAglygfvJaHU9eV7v7IzJINhXH5teGLcUMnar3Aptk_-VlswZ1WxWzbpltt5x6NKu3MH9fS5ApE321ftdC8D0EGZmLGuAm4BF-L1Gq-aEjwHxsK1kZhtO9DuLCI7dN9fxvqec00sfZfs26RcbRiTP2Kn7LGXBJEONH9ClQFmHBurE5qKbJfQlx4ha5sqrb3xzdJzUg6tGprETqckfL9cD_ILYSs7KCKklKwQQFc1Wj7YHu9rkl06wS_zsx4hxbfyprCR0LKbHsqqULj41C6iaDtig9F_7zYf7PL0UvxyqLj0hJSLjEGOqXujwb0Dvf0xTejDpInMr4WJNfrhOnILMz_RRSNa2cDdi4HmmuyVM1OUXfguP7DfN7GNlH46tyZ4_CpeAZU74mtmgsct3Zw1X43uFvhR08WzKVSPyC6Z7uywjnf2BeUb8tbzA9ugqikIRJWo7ye8CmzWAl4LRkLGpY4w=w500-h777-no');

//fémur droit:
    var image7 = document.createElementNS(svgns, 'image');
    image7.setAttributeNS(null, 'x', 0);
    image7.setAttributeNS(null, 'y', 0);
    image7.setAttributeNS(null, 'width', 500);
    image7.setAttributeNS(null, 'height', 777);
    image7.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'https://lh3.googleusercontent.com/sQfkusv6FHlW8gx2m0Qetd3vryixjPVqN43b6C-IvKnY6Bqk-qrf_SvI7yvb9lx1M7sh1w-OXyNUyOGjqnH96yqxuYjTkcXj-W3nT8XsZN5U0U2KPCpnWNlP-hQhRrG_MBp9sPxPGhsHIpzF8kLYtjhSob0qdIme8k0lqwIdtQleDRGXGBt-PDuIpYbkRytZUZnYdWYi_bUIwSKf0Qn6RA4w5mbFVOu_NyHgfPKYGrD68J8tw73Vp473lhj4MXvHagqiTlmBrUfwS7Qm24-T9BlgSKjLSjFSCv_g24EH3_kp8d0gDMAhn9izf1qzn3vA4I7RLST6QEZWgNw2oXW0hmT58VdN4ThH1IG-8RJyrFU1pFlBeJYrE6gbi3YwVkIjKNzkVJpMR_42TaHSak33fZPEabAlAEvF4Zsw_P0Ff7Nk3bScVMPVORQZFuSMN1IGfUsyJOAZIUqddo0FDzTNe13YYx-fJ9T54U0sjz8l6THeZHgFrFYZwn9EOe89vpjpy3CUwsPjnP1G1C1rgW1ZTUqHX38Uh4srqaCrNskkSR1mTtqnf9fyz84U3MejqZbe5E2zkYMtJ3sC_53mvhm7okghXdHuhg6QuFgxPE8SH5pbV9emcovu0ASoyrSfvbshpkSepL9lQJeB7MVr44U26mpiBamU51OnDKg=w500-h777-no');

//tibia droit:
    var image8 = document.createElementNS(svgns, 'image');
    image8.setAttributeNS(null, 'x', 0);
    image8.setAttributeNS(null, 'y', 0);
    image8.setAttributeNS(null, 'width', 500);
    image8.setAttributeNS(null, 'height', 777);
    image8.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'https://lh3.googleusercontent.com/VCCgm_WLJVZJmtPeVoZdux5769ixWbgInOdrcM_3DzXqmt0fWPNX0WC-a2C52epDGTG6f-bB9_dtPuZD3mDr4A8Bkq5mVm1gMoxT8dMgtS6cz3n_LpIyqERZ8NpqXdSAJKFvYmqP0sCT6cBYxl-HsE0OyC6FrB4fpoHD4-W_VejoE8q1wfAl6vX9hJN-RyrkdkZdPXPzbKLkm6de74t89CBTT6WhWFP5bFPGT0XZcFN2X9Cq1hoyvKRKeg-KDSC8bs5y8695SPgDGuIvRlGiKRynWb8UK5lp8uG6_rgoI0FAw1tt-sXX8uHvS-fI3xaVyIpV2oa8UMfBDKNanHa8kisaTKj7lH_1w7y9prG5IxXTtiz-90U0702ChfzzXtihZf71NBvA7IXMX-_SgLRLQjjbINZez_xBIf44ihqT0NTvcKf124cPnp2tJGn83v9j-ax6yyieIfLIs48rUtYGRXHf02kw5D9Aq1OtCuQOQPTc6MEPzgy4JOhHDFCbtknqrP603I34JaqueIwWDLTem5uM0KxJOPbH_dda5XROZkRQ8f-fNuGXszN7mVYoZYDdnV3T38ABXVt_d1_YMUO1KZiip-ZRaDJbis3QBeGRpFzcbsvZL49d-ZSpvYv8QvF-FR8f6-Zu1p8pJirNlKVR9Vre__1ebkYjV4s=w500-h777-no');

    var g0 = document.createElementNS(svgSkel.namespaceURI, 'g');
    g0.setAttributeNS(null, 'id', 'yay');
g0.setAttributeNS(null, 'opacity', 0.5);
    var g1 = document.createElementNS(svgSkel.namespaceURI, 'g');
    var g2 = document.createElementNS(svgSkel.namespaceURI, 'g');
    var g3 = document.createElementNS(svgSkel.namespaceURI, 'g');
    var g4 = document.createElementNS(svgSkel.namespaceURI, 'g');
    var g5 = document.createElementNS(svgSkel.namespaceURI, 'g');
    var g6 = document.createElementNS(svgSkel.namespaceURI, 'g');
    var g7 = document.createElementNS(svgSkel.namespaceURI, 'g');
    var g8 = document.createElementNS(svgSkel.namespaceURI, 'g');

    var animation0 = document.createElementNS(svgns, 'animateTransform');
    animation0.setAttribute('attributeName', 'transform');
    animation0.setAttribute('attributeType', 'xml');
    animation0.setAttribute('type', 'rotate');
    animation0.setAttribute('values', ''+anglea+' 250 350; '+angleb+' 250 350; '+anglea+' 250 350');
    animation0.setAttribute('dur', dur);
    animation0.setAttribute('repeatCount', 'indefinite');

    var animation1 = document.createElementNS(svgns, 'animateTransform');
    animation1.setAttribute('attributeName', 'transform');
    animation1.setAttribute('attributeType', 'xml');
    animation1.setAttribute('type', 'rotate');
    animation1.setAttribute('values', '0 188 234; '+angle1+' 188 234; 0 188 234');
    animation1.setAttribute('dur', dur);
    animation1.setAttribute('repeatCount', 'indefinite');

    var animation2 = document.createElementNS(svgns, 'animateTransform');
    animation2.setAttribute('attributeName', 'transform');
    animation2.setAttribute('attributeType', 'xml');
    animation2.setAttribute('type', 'rotate');
    animation2.setAttribute('values', '0 175 342; '+angle2+' 175 342; 0 175 342');
    animation2.setAttribute('dur', dur);
    animation2.setAttribute('repeatCount', 'indefinite');

    var animation3 = document.createElementNS(svgns, 'animateTransform');
    animation3.setAttribute('attributeName', 'transform');
    animation3.setAttribute('attributeType', 'xml');
    animation3.setAttribute('type', 'rotate');
    animation3.setAttribute('values', '0 309 230; '+angle3+' 309 230; 0 309 230');
    animation3.setAttribute('dur', dur);
    animation3.setAttribute('repeatCount', 'indefinite');

    var animation4 = document.createElementNS(svgns, 'animateTransform');
    animation4.setAttribute('attributeName', 'transform');
    animation4.setAttribute('attributeType', 'xml');
    animation4.setAttribute('type', 'rotate');
    animation4.setAttribute('values', '0 328 341; '+angle4+' 328 341; 0 328 341');
    animation4.setAttribute('dur', dur);
    animation4.setAttribute('repeatCount', 'indefinite');

    var animation5 = document.createElementNS(svgns, 'animateTransform');
    animation5.setAttribute('attributeName', 'transform');
    animation5.setAttribute('attributeType', 'xml');
    animation5.setAttribute('type', 'rotate');
    animation5.setAttribute('values', '0 217 376; '+angle5+' 217 376; 0 217 376');
    animation5.setAttribute('dur', dur);
    animation5.setAttribute('repeatCount', 'indefinite');

    var animation6 = document.createElementNS(svgns, 'animateTransform');
    animation6.setAttribute('attributeName', 'transform');
    animation6.setAttribute('attributeType', 'xml');
    animation6.setAttribute('type', 'rotate');
    animation6.setAttribute('values', '0 222 514; '+angle7+' 222 514; 0 222 514');
    animation6.setAttribute('dur', dur);
    animation6.setAttribute('repeatCount', 'indefinite');

    var animation7 = document.createElementNS(svgns, 'animateTransform');
    animation7.setAttribute('attributeName', 'transform');
    animation7.setAttribute('attributeType', 'xml');
    animation7.setAttribute('type', 'rotate');
    animation7.setAttribute('values', '0 285 377; '+angle8+' 285 377; 0 285 377');
    animation7.setAttribute('dur', dur);
    animation7.setAttribute('repeatCount', 'indefinite');

    var animation8 = document.createElementNS(svgns, 'animateTransform');
    animation8.setAttribute('attributeName', 'transform');
    animation8.setAttribute('attributeType', 'xml');
    animation8.setAttribute('type', 'rotate');
    animation8.setAttribute('values', '0 281 515; '+angle6+' 281 515; 0 281 515');
    animation8.setAttribute('dur', dur);
    animation8.setAttribute('repeatCount', 'indefinite');


g8.appendChild(image8);
g8.appendChild(animation8);

g7.appendChild(image7);
g7.appendChild(animation7);
g7.appendChild(g8);

g6.appendChild(image6);
g6.appendChild(animation6);

g5.appendChild(image5);
g5.appendChild(animation5);
g5.appendChild(g6);

g4.appendChild(image4);
g4.appendChild(animation4);

g3.appendChild(image3);
g3.appendChild(animation3);
g3.appendChild(g4);

g2.appendChild(image2);
g2.appendChild(animation2);

g1.appendChild(image1);
g1.appendChild(animation1);
g1.appendChild(g2);

g0.appendChild(image0);
g0.appendChild(animation0);
g0.appendChild(g7);
g0.appendChild(g5);
g0.appendChild(g3);
g0.appendChild(g1);
svgSkel.appendChild(g0);

}
function myFunction2() {
svgSkel.getElementById("yay").remove();
}

</script>