lundi 23 octobre 2017

Random Monster




<center>
<svg id="svgFace" xmlns="http://www.w3.org/2000/svg" width="500" height="500"></svg>
<br>
<button onclick="myFunctionG()">Generate</button> <button onclick="myFunctionD()">Delete</button>
</center>

<script>

function myFunctionG() {
var svgns = "http://www.w3.org/2000/svg";
var angle0 = Math.floor(Math.random() * 4);
var dur = Math.floor(Math.random() * 2)+2;

    var randomString0 = new Array ();
    randomString0[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3sfSixn1njCqnRZC7Xrc8ECaVM2Cw9Vp0vsJn3i0oszcXMbwr5MJsScYly8VdtuGyo1Sw9EoFgPIh3wC0DlYX501N0EdY2__pkXuatl7NEez5KdTVsa3Vuvfgeug4UwZkm44RTKcWfQ/s500-no/";
    randomString0[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeL9U_OQV07oFFiHk1pQSMmGPBsp5zCSqxGqSNej7K1ourUEojAKzbfqR3MellDsFTQajnfDKKRYdODQIYE2ua6wWaQiez0JAUKatgcAmWDcYpcmK2ssjJgmh7cX7jiPczuyz6nYP-hQ/s500-no/";
    randomString0[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisuwby-8MmYyfV9gAJd6iXQsEZb0b4L3fVxusHCDHw1HspavGNldIVLPFCuO_oviIewArAso_wGbs08AJMfTlnOSApQhSwgJ86w6hV5xpHul0Kke_yJ-3WxNvrbDdF4SVJQjBDxMd3qw/s500-no/";
    randomString0[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDvNw7LOfXIylnE5IAk4jzQhSB93p_2fIkMjlRjgELJMcV73G1MmJy9_MN59ZLxB9PY48oP3hyjm8iHeH9vjxrHc-z8KIgjL9PA1KZF06dxjhgwUI2bUSHs6wMCM9bnc0vKXtVm5htyQ/s500-no/";
    randomString0[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjz-ghI3yRBFta9naxwZ7LUijy_Hkyjpbg9Vdf1WjhZjLwXlKx4HTOOAPzZuglHtVcQHd71nFNEV2s1_Kpx4goI22YJx97xAypIBT4C-XduzEZBQZvGyjrTGo51V-rrA5kNdarsWr8bA/s500-no/";
    randomString0[5] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieLXoW9A-hf-tbwL_KF3mBCgpxkeKUYNnZ4EYiORD7CM8ecVRI05EmLT44cJzEuJiqEOQP-rBJTLYnWXhBYEnTn8YxBh22zVpMwrrC6KB-p9zXCBzMf0XnQDhZ69PJnYy3fCF6eghpRQ/s500-no/";
    randomString0[6] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjPA_sNkdJckUqWVCoSHhtJhgnGiycRgotvak2UEAb_GuCEsOl_FAcgWQiPdm4UROPomOh23ZlVWxn4GLC5jMDPLlIXB2HeNlAFC45GiNv5D6DCy5vuhb0bxrQ3gDO6fwjnT1mCzKZOA/s500-no/";
    randomString0[7] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlizhAvmMD4RWZ0r-qXalBE2N6cM_KAE338Z3tVypGpHxnoBNMpMjd1kFtSrE4hZMiBDRVLEkvt5AuXC1oU2YwPtMZ9csrsiLbsraY2_6qEabfN3IyyetZk_ptS87tMtD1tIGfquXIDQ/s500-no/";
    randomString0[8] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvTcDgN8DrzEpZZTBhEbLI7jkHkmaChtI4yjGZaHYgs9RIK2WoQaX6pbdnTNYeCvhjK_ACJqLgG_Lzb1OHhye37Y0OZsNAh-7HsMfnoWkWsU4XdPQ3eTgtL3WaNdivFAEdXd4HF7h2fw/s500-no/";
    var d = Math.floor(9*Math.random());

var randomString1 = new Array ();
    randomString1[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit4EuadZ0n6uKoRJcYE5gfq6I6zlG3fmNnqcukTnYJyQgrOqMmu059nRQEYkxg5Wrfer_JTtdaWdPZQWhLGFksSdlAt7Ux59E3yfJD2yzuImL_GIZOkUGaVS2mXzrlU0CcB1QJ3Y8_qw/s500-no/";
    randomString1[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-2YEc2kOLLXfGwqf2rVCJ7FVS2GR_Zwpmc3fP7JkgMgCsncCPObl1UiEcy7QtrebdPueobL1Jl3SoEB4SJ-u-q0mtkAJRcOsnOSV49ubjgdx5F-QF84YTHA02UiSU7iJ9YxtqaAqA-w/s500-no/";
    randomString1[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRFm83WUTDw54lzKZ6KvowmAcaa5s_T188qmeLyYFalEIF241aLr9Mz3riy8IOEkWSP_V05bTc2hCun6BBANj1RZ6s070cr6DcEdXQKq28Gxo8iqN56E0LXx7IXm3IkLZZWBQrqN8bzw/s500-no/";
    randomString1[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrS1KZ_k-OFBFVLuHQFgCsrw59OJU-CHRRvkLG5Z2TGRCImvggi71nlq6we3xUckBiwzOsX7M0j9WqE1hAMnj3275IW0veYctl0aIWhFQ9IhzdNrzGwT7fbAVPLuPrLV3gSK3FP0YZnQ/s500-no/";
    randomString1[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpkrCHDTpRiY6OuEVbRW8VPQsYZIJ_np6C_TgGO-64m9hEmWMb3wZalJtuXL5B330qJwISLkImqnfseQbH6J_Sh0We3olaZApa57v9vP7SZfRlRTB2kegkD4Mx3YFf2xoGFWfUsr6fug/s500-no/";
    randomString1[5] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg9LwZEVvNFARd3CJsKBjmkGWVAHTPshpP3-K0Y8l6bBEe396szw5RLDzboY_pDHEnq2BfUwjctECnGL5IbLCQFp3tRc4AUwRoNYUDvPkcxVJt6XWXVUMz1RYsgfLtdZlShQ5hfXA-Eg/s500-no/";
    randomString1[6] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc__xNehNOgBpzZZNcHp3IIfmSNbP_4yGxvky5t2I6meGehhd4TOCd-RTqa6698HLzpZvCpdjDUJPKNf2hBWxeXsUkTm5lrJ8EkWJAKHXsHeyP2OnLFPYlSqoblbHOa8HsFKQ87lK0xA/s500-no/";
    randomString1[7] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsjnvGCjO3heDtAp9h506OxhbHBxOqgyZtw7PkCXQypxo5Wq3CIbVbbnX-0W5hgHs6KJop3yLTyNPh08qJnDLlCCoQgDbqj1X-tUyc1Mxd9Vg_MJQQjO1MFvYmnPvO8hYCR4hgRAuQ1g/s500-no/";
    randomString1[8] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcRsih1udZhOqJu3RGRhVPfLFsuSqY1FvOZ9MwBhq-IcOV3dnjv4iNbtczELuNhFRWbt8aRH6Ozf2rw0EwCfgNus1diJCE0PpyI-wChqu0Kmru7U4Kzzer_N-usGVQSbZOzeiHLXtpZw/s500-no/";
    var b = Math.floor(9*Math.random());

var randomString2 = new Array ();
    randomString2[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9uFlJCA2Kq6onP4-Bff2Jv0p6FbZU_QrvX574aaP7FNNx1T-fYH7tKrWY3JvQr9jG6_wEVZ7gJNbIWA4mzpC3bRe0XQIyUGaK9M5u7VGUR-ly9gLg6H8C6bWm1XCu7m4T_k8LRw0g8Q/s500-no/";
    randomString2[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrnxm9O3Gl3AfySrceZgEehJLcZlGdY2iOoxizg0lScl1AhWzxMz0FZakW55rZJB6V5ShEHoVFTtbTxnsMOjfsgQ-Lm0sM39OQvqEE8aYaJu0wORei7l1vGYtQ9fqlvv0eJnqqgebjLA/s500-no/";
    randomString2[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBHZCTZCKx3xj0tgLDlLO8ledlpJg6r7ivXhfvI1BeSTgCeR3yC7nWTLCg-rclOfqrIfKDVEPGPBnjn769gOorie696qnLejMIdiMHmXQ8WIGyCNEHcISQ2SRU3GDJSoQflqoBPKk10g/s500-no/";
    randomString2[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjomXvy5ixQf_VBRDf_Nu51SWgiWoBA0gg6SZmhGLrbLGMNnEm6bPMPf2Qao3p_KDp9oJ809uq2Yw6CssOi8fT96tQJTOJQgpxSaq30kvyBKaF_nxq4i9sPoxq_0UF7xVrkzqRZKsAcwA/s500-no/";
    randomString2[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaaPIPaH0g9DMOPUJrXDq557CXh1VGFy1XuSvL2H2JNSUwh8_IUUK0u0gxCwvfqhUtQOYCjXvBiV3NUVkcE7e5qA-ADmzcnJkIP29kOCiBcpGXMELD8eTBfzJ4RqBSrEM7VrNj44qqlA/s500-no/";
    randomString2[5] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJZRVqzxtC5l5f0pb6ELcCy0B43mSI4YyYnmasTdle7xuQlQlDmR2GatI5ix-_BfhnYZALydrcNb_W1X5WdnqV8jHDYOVGoo4PRBe72JACsMYGry1D74URiMp7cD5r7-VU47yzU7U0JQ/s500-no/";
    randomString2[6] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLyP-bjVV7Tb1PJv0UyiraOsWu9yhVjZk04-9v5Od6y9d8tFaa0Qs4a1-WsSzPlD3bqMGOeDDBiFNm2_g4wikvfB8DVgrpqVWCO6jxVYxB9VOdwx5Z1RGyMmzHJhyphenhyphensgSFM7k5G3rmK5w/s500-no/";
    randomString2[7] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxc8KjOYIXf9ZZ6vV8lI_46UriKY10PSmNtGrcE9oPlwfCFAx7ChBF-QvMMBrXEg0AfCk_DzMA1_1F5ezb_upe9XM5bImSl_VGRSX8gxGW0VjYmd3dshlpZ4wETO-hJk9iy1MBFAs_8A/s500-no/";
    randomString2[8] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlmWooK8pNn5kMs6eILV1EQ_op0KOiYiEyj2Ek0TiUPiFrr22530d3IDNh3N588NJVjVMeeU7AxvZAyENV0K2XHa3uENny6pEkeB43IqMhkw1M6tTD3G2Z5OIONvbaN3KOCxqEnIX4sw/s500-no/";
    var m = Math.floor(9*Math.random());

var randomString3 = new Array ();
    randomString3[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpSyLzD7BSRJL-WTJemGuMyrlHVEDK7H6lmkMauSdamV7ZJhkJX053puslgxUq3gaMtnJRMNoafQbG1QYcWmFsNyArdJZcVOXRtC6OFfuQ6Rzq4IU0YdHg9iDNs-Ju07WDZjGz1ae96w/s500-no/";
    randomString3[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUzLik1HmiqnVCgg1rpoEE71ICGODr3wDZ41qVLUkNPm8ciZ-BFEwXFBZz5v9VUKSN0JURwQxNdm3eOlBeDbUhU-Yh0F8hX3OxqaR6W53Bg7jahPxmxWVLNKn9QFaVt446sHg08xyKww/s500-no/";
    randomString3[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRCjOrNSSNeCk-Ow_m8c6ux4I2Q3RP6JmKN19ApV15Llm9rFXYbOWI6N70x5TokxRvBcvo6FgzVChnpoVaeuqH-pdEUZYn5mXGa5E1ClceATygCBAc9omtx4v9ZYH3rh1CrUHXvS0Xlw/s500-no/";
    randomString3[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztMa426OxghBuza7lrrgLCmNzr0vHPe1pUQ8VfXLWgTIPjo8wnCTXq9D2wPGex57LqVz5YTqSvMdwwTxSQkw31dlRkIWIYyBtfsJs8dHY6bY3oA6IUGkTYJmM5UaHM4lI5ewItImSTg/s500-no/";
    randomString3[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyDka_DTIz7u3R5IttX0X4ylAkoJfzISQw72BMz7op_RKl4pg6_4S_7iLPWnhUqtAn8oiNv92nJcA0rc-DBA_IK3LrN00Yf5_aQUabT346GTQzU5eel7i3rnRkVNHxrcxi1TdV13VnmA/s500-no/";
    randomString3[5] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghXq8XTLckABf3FvkFjwoI4xXkLC6ol6G_Bm9cKlWQj6ii4118-umgIVPkhDhaxsXD4UcPt9iFe6pxz_udlOmTHI3vSROAO_REGXjhHnPQawqWYp5YISqN_5IelO0NAjv1pmzTFbgMTA/s500-no/";
    randomString3[6] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIS33Oa0vzXcIRYooYfdONRQZ4ge9cMang1U-05jjEZwhyiIZ0s8LvCvjX6elhDN1MYIwuu91ZKbKTD28pJ3OH-BYVtHojJzDYG8Cl643sVIDMKy0nFDWVtEZvx-P3D7FTwBZ25kr37g/s500-no/";
    randomString3[7] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyLIjSPXCmJP7EMWRP5F2N-l_CsoqfHEWtzcstnvLPWJT5Mc-cRelpOSOsRz_vychBF4SWzCAIWyhEqID3ftxi8LEc-nl_-ZAJR1tjDghjx7fKJ-eh_3AygqexnrcravixKFP1cq8lzQ/s500-no/";
    randomString3[8] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrWu0j1aUkUGpkMGkZFteGCZn8OLcPNCvOHfRqXOOK8jSaoYtcqSp_UfeJZKdGAmUqth7ZqILBhJt8dSQYjzJ_SNVGdb1mECUtLjyzE0Kp9_sd8TatxFDxjGJD2WnF4IzTwoo_sLjvkA/s500-no/";
    var e = Math.floor(9*Math.random());


//décor:
    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', 500);
    image0.setAttributeNS('http://www.w3.org/1999/xlink', 'href', randomString0[d]);

//body:
    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', 500);
    image1.setAttributeNS('http://www.w3.org/1999/xlink', 'href', randomString1[b]);

//mouth:
    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', 500);
    image2.setAttributeNS('http://www.w3.org/1999/xlink', 'href', randomString2[m]);

//eyes:
    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', 500);
    image3.setAttributeNS('http://www.w3.org/1999/xlink', 'href', randomString3[e]);

    var g0 = document.createElementNS(svgFace.namespaceURI, 'g');
     g0.setAttributeNS(null, 'id', 'yay');

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

g0.appendChild(image1);
g0.appendChild(image2);
g0.appendChild(image3);
g0.appendChild(animation0);
svgFace.appendChild(image0);
svgFace.appendChild(g0);

}
function myFunctionD() {
svgFace.getElementById("yay").remove();
}


</script>