tag:blogger.com,1999:blog-9122707409913584935Thu, 19 Dec 2024 03:32:43 +0000Groovy CodesJavascriptFunGameCreateEZ ShareIQ testShare ButtonsGroovy CodesA Collection of Awesome Codes you can see in Action https://groovycodes.blogspot.com/noreply@blogger.com (Bobbie)Blogger16125tag:blogger.com,1999:blog-9122707409913584935.post-8956978513480582685Tue, 27 Nov 2018 16:31:00 +00002018-11-27T08:31:05.629-08:00Play & Learn Flute<!DOCTYPE html> <html> <head> <title>Learn to Play Flute</title> <style> .box { position: relative; width : 350px; height: 600px; border: 0px solid #CCC;border-radius:0px; background: url("https://cosmomusic.ca/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/B/S/BSFLARM303BOS_1_7.jpg ");background-size: cover ; } button { width:65px; height:70px; border-width:4px; border-style: solid; border-color:black; background-color:#ff00ff; border-radius:100% 50%; text-align:center; font-size:20px; padding: 1px 1px;} </style></head> <body> <div class="box"> <h1 style="text-align: center">Learn to Play Flute</h1> <br> <audio id="play1" src="http://88.198.78.90/ct/files/mp3/flute/478.mp3 "></audio> <button onclick="playSound1()">A</button> <audio id="play2" src="http://88.198.78.90/ct/files/mp3/flute/486.mp3 "></audio> <button onclick="playSound2()">B</button> <audio id="play3" src="http://88.198.78.90/ct/files/mp3/flute/490.mp3 "></audio> <button onclick="playSound3()">C</button> <audio id="play4" src="http://88.198.78.90/ct/files/mp3/flute/498.mp3 "></audio> <button onclick="playSound4()">D</button> <audio id="play5" src="http://88.198.78.90/ct/files/mp3/flute/3.mp3 "></audio> <button onclick="playSound5()">E</button> <audio id="play6" src="http://88.198.78.90/ct/files/mp3/flute/510.mp3 "></audio> <button onclick="playSound6()">F</button> <audio id="play7" src="http://88.198.78.90/ct/files/mp3/flute/518.mp3 "></audio> <button onclick="playSound7()">G</button><br><br> Happy Birthday<br>A A B A D C<br>A A B A E D<br>A A G D C B A <br>G G F D E C<br><br>Row Row Row your Boat<br>C C C D E<br>E D E F G<br>G G G F F F D D D C C C <br>G F E D C <br><br></div> </body> <script> function playSound1 () { document.getElementById('play1').play(); } function playSound2 () { document.getElementById('play2').play(); } function playSound3 () { document.getElementById('play3').play(); } function playSound4 () { document.getElementById('play4').play(); } function playSound5 () { document.getElementById('play5').play(); } function playSound6 () { document.getElementById('play6').play(); } function playSound7 () { document.getElementById('play7').play(); } </script> </html> https://groovycodes.blogspot.com/2018/11/play-learn-flute.htmlnoreply@blogger.com (Bobbie)0tag:blogger.com,1999:blog-9122707409913584935.post-5357044161844229406Tue, 27 Nov 2018 12:42:00 +00002018-11-27T07:09:13.554-08:00Speed Test<h2 style="font-family: sans-serif;"> Speed Test is Running may take 30-60 seconds</h2> <h2 style="font-family: sans-serif;"> *Featured Code Created by&nbsp;<a href="https://www.sololearn.com/Profile/4354920/?ref=app">Calvin</a></h2> <div> <br /></div> <br /> <html> <head> <title>Page Title</title> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> </head> <body> <div id="main"> <h3> Dom Update Functions - Speed Testing (for 1 million text updates)</h3> <div id="test1"> Test is running. Please wait, this may take 30s to 60s to complete the test....</div> <div id="test2"> </div> <br /> <div class="test"> </div> <div id="jq1"> </div> <div id="notes"> </div> </div> <script> setTimeout(main, 10); function main() { var test, i, start, end; var count = 1000000; start = window.performance.now(); for(i=0; i<count; i++) { test = document.getElementById('test1'); test.innerText = 'Speed Testing...' } end = window.performance.now(); test.innerText = 'Speed of getElementById: ' + ((end - start)/1000).toFixed(2) + "sec."; start = window.performance.now(); for(i=0; i<count; i++) { test = document.getElementsByTagName('p')[0]; test.innerText = 'Speed Testing...' } end = window.performance.now(); test.innerText = 'Speed of getElementsByTagNames: ' + ((end - start)/1000).toFixed(2) + "sec."; start = window.performance.now(); for(i=0; i<count; i++) { test = document.getElementsByClassName('test')[0]; test.innerText = 'Speed Testing...' } end = window.performance.now(); test.innerText = 'Speed of getElementsByClassName: ' + ((end - start)/1000).toFixed(2) + "sec."; start = window.performance.now(); for(i=0; i<count; i++) { test = document.querySelector('#test2'); test.innerText = 'Speed Testing...' } end = window.performance.now(); test.innerText = 'Speed of querySelector: ' + ((end - start)/1000).toFixed(2) + "sec."; start = window.performance.now(); for(i=0; i<count; i++) { $( "#jq1" ).text( 'Speed Testing...' ); } end = window.performance.now(); $( "#jq1" ).text( 'Speed of jQuery: ' + ((end - start)/1000).toFixed(2) + "sec." ); document.getElementById('notes').innerHTML = '<br><br>Kindly copy & paste the output result to comment section, for comparison.<br/>Thank you for all the feedbacks, and also thanks for @Morpheus suggestion.' } </script> </body> </html> <br /> <br /> <h2> <a href="https://www.freecodeexamples.com/" target="_blank">Back to Free Code Examples</a></h2> https://groovycodes.blogspot.com/2018/11/page-title-dom-update-functions-speed.htmlnoreply@blogger.com (Bobbie)0tag:blogger.com,1999:blog-9122707409913584935.post-6566821474896791162Tue, 30 Oct 2018 19:56:00 +00002018-10-30T12:56:32.167-07:00Magic 8 Ball<!DOCTYPE html> <html> <head> <title>Magic 8 Ball</title> <style> button{ background-color:red; border-color:red; } #g{ height:300px; width:300px; } </style> </head> <body> <center> <h1>Magic 8 Ball</h1> <h4>Think hard on your question shake your device then tap the ball for answers</h4> <button onclick="newG()"><div id="g"><img src="https://www.horoscope.com/images-US/games/game-magic-8-ball-no-text.png"></div></button></center> <script> var g= ['<img src="https://cdn.britannica.com/82/191982-131-D3194343.jpg"height="300px" width="300px">','<img src="https://www.financialsamurai.com/wp-content/uploads/2015/12/magic8ball250.gif"height="300px" width="300px">','<img src="https://annstawski.files.wordpress.com/2015/12/magic-8-ball.jpg"height="300px" width="300px">', '<img src="https://i.etsystatic.com/12487653/r/il/e07ca5/1300693935/il_570xN.1300693935_3x9m.jpg"height="300px" width="300px">','<img src="https://hookertech.files.wordpress.com/2015/01/magic8ball.jpg"height="300px" width="300px">','<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoF7Q7KiJTgiYI68_uzTXYI-egXpDZ1-9Y5tQsd9AEnUiEN5GQ7QZ-6DAbhSg-aPJFE2V3v5NHei8PIke5-UQgs0MtDIWB74Ft9XC6KcFF-2fqPDj4fDhhXMxGUtAJK6_FJ96jLBq1Zhw/s1600/Picture1.jpg"height="300px" width="300px">','<img src="http://aharrisbooks.net/haio/book_5/chap_3/images/8ball4.png"height="300px" width="300px">','<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDmeCIFnfk4z-FATj0twkh4TTq6HiTOWbAzLv_TxQLRHn2EPfP94oV68Cufouvk7iOxxzmEkus7KnQGjp7f_iBRin6s9fO12IdT2kuCWdm4gYaeBQO3HVWCuT0qdaiyP0CYREBy4mvXEE/s1600/8+ball+-+most+likely.png"height="300px" width="300px">','<img src="https://www.w3.org/2004/Talks/17Dec-sparql/Results/conf_8ball_true3.png"height="300px" width="300px">'] function newG(){ var randomNumber=Math.floor(Math.random()*(5)); document.getElementById('g').innerHTML=g[randomNumber]; } </script> </body> </html>https://groovycodes.blogspot.com/2018/10/magic-8-ball.htmlnoreply@blogger.com (Bobbie)0tag:blogger.com,1999:blog-9122707409913584935.post-1815456283493022876Thu, 11 Oct 2018 16:25:00 +00002018-10-11T09:27:34.741-07:00CreateEZ ShareGroovy CodesJavascriptShare ButtonsEZ Share<html> <head> <center> <title>EZ Share</title> <style> body { font-size:18px; background-color:lightblue; } input{ font-size:16px; } </style> </center> </head> <body> <h2> EZ Share</h2> Just enter your information to create custom Share Buttons </body></html><br /> Page Name: <input id="pname" placeholder="My Website" type="text" /><br /> Page URL: <input id="purl" placeholder="https://yoursite.com" type="text" /><br /> Hashtag: <input id="hash" placeholder="awesome" type="text" /><br /> <br /> <button onclick="strReplace();" type="button">Create</button><br /> <br /> Click new code to Copy to Clipboard<br /> <br /> <div id="a" onclick="copyDivToClipboard()"> <div id="myText"> </div> </div> <script> function copyDivToClipboard() { var range = document.getSelection().getRangeAt(0); range.selectNode(document.getElementById("a")); window.getSelection().addRange(range); document.execCommand("copy") } </script> Example: <br /> <h3> Share with Friends</h3> <!-- Twitter --> <a href="https://twitter.com/share?url=https://freecodeexamples.blogspot.com&amp;text=Free%20Code%20Examples&amp;hashtags=Amazing" target="_blank"> <img alt="Twitter" src="https://simplesharebuttons.com/images/somacro/twitter.png" /> </a> <!-- Facebook --> <a href="http://www.facebook.com/sharer.php?u=https://freecodeexamples.blogspot.com" target="_blank"> <img alt="Facebook" src="https://simplesharebuttons.com/images/somacro/facebook.png" /> </a> <!-- Google+ --> <a href="https://plus.google.com/share?url=https://freecodeexamples.blogspot.com" target="_blank"> <img alt="Google" src="https://simplesharebuttons.com/images/somacro/google.png" /> </a> <!-- LinkedIn --> <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=https://freecodeexamples.blogspot.com" target="_blank"> <img alt="LinkedIn" src="https://simplesharebuttons.com/images/somacro/linkedin.png" /> </a> <!-- Email --> <a href="mailto:?Subject=Free%20Code%20Examples&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20%20https://freecodeexamples.blogspot.com"> <img alt="Email" src="https://simplesharebuttons.com/images/somacro/email.png" /> </a> <!-- Pinterest --> <a href="http://pinterest.com/pin/create/button/?url=https://freecodeexamples.blogspot.com&amp;media=https://freecodeexamples.blogspot.com&amp;description=Free%20Code%20Examples"> <img alt="Pinterest" src="https://simplesharebuttons.com/images/somacro/pinterest.png" /> </a> <!-- Reddit --> <a href="http://reddit.com/submit?url=https://freecodeexamples.blogspot.com&amp;title=Free%20Code%20Examples" target="_blank"> <img alt="Reddit" src="https://simplesharebuttons.com/images/somacro/reddit.png" /> </a> <!-- StumbleUpon--> <a href="http://www.stumbleupon.com/submit?url=https://freecodeexamples.blogspot.com&amp;title=Free%20Code%20Examples" target="_blank"> <img alt="StumbleUpon" src="https://simplesharebuttons.com/images/somacro/stumbleupon.png" /> </a> <!-- Tumblr--> <a href="http://www.tumblr.com/share/link?url=https://freecodeexamples.blogspot.com&amp;title=Free%20Code%20Examples" target="_blank"> <img alt="Tumblr" src="https://simplesharebuttons.com/images/somacro/tumblr.png" /> </a> <a data-action="share/whatsapp/share" href="https://api.whatsapp.com/send?text=https://freecodeexamples.blogspot.com"> <img border="0" height="70" src=" http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c543.png" width="70" /> </a> <script> function strReplace(){ var myStr = '&lt;h2&gt;Share with Friends&lt;/h2&gt;&lt;br&gt; &lt;!-- Twitter --&gt; &lt;a href=&quot;https://twitter.com/share?url=URL&amp;amp;text=NAME&amp;amp;hashtags=HASH&quot; target=&quot;_blank&quot;&gt; &lt;img src=&quot;https://simplesharebuttons.com/images/somacro/twitter.png&quot; alt=&quot;Twitter&quot; /&gt; &lt;/a&gt; &lt;!-- Facebook --&gt; &lt;a href=&quot;http://www.facebook.com/sharer.php?u=URL&quot; target=&quot;_blank&quot;&gt; &lt;img src=&quot;https://simplesharebuttons.com/images/somacro/facebook.png&quot; alt=&quot;Facebook&quot; /&gt; &lt;/a&gt; &lt;!-- Google+ --&gt; &lt;a href=&quot;https://plus.google.com/share?url=URL&quot; target=&quot;_blank&quot;&gt; &lt;img src=&quot;https://simplesharebuttons.com/images/somacro/google.png&quot; alt=&quot;Google&quot; /&gt; &lt;/a&gt; &lt;!-- LinkedIn --&gt; &lt;a href=&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=URL&quot; target=&quot;_blank&quot;&gt; &lt;img src=&quot;https://simplesharebuttons.com/images/somacro/linkedin.png&quot; alt=&quot;LinkedIn&quot; /&gt; &lt;/a&gt; &lt;!-- Email --&gt; &lt;a href=&quot;mailto:?Subject=NAME&amp;amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 URL&quot;&gt; &lt;img src=&quot;https://simplesharebuttons.com/images/somacro/email.png&quot; alt=&quot;Email&quot; /&gt; &lt;/a&gt; &lt;!-- Pinterest --&gt; &lt;a href=&quot;http://pinterest.com/pin/create/button/?url=URL&amp;media=URL&amp;description=NAME&quot;&gt; &lt;img src=&quot;https://simplesharebuttons.com/images/somacro/pinterest.png&quot; alt=&quot;Pinterest&quot; /&gt; &lt;/a&gt; &lt;!-- Reddit --&gt; &lt;a href=&quot;http://reddit.com/submit?url=URL&amp;amp;title=NAME&quot; target=&quot;_blank&quot;&gt; &lt;img src=&quot;https://simplesharebuttons.com/images/somacro/reddit.png&quot; alt=&quot;Reddit&quot; /&gt; &lt;/a&gt; &lt;!-- StumbleUpon--&gt; &lt;a href=&quot;http://www.stumbleupon.com/submit?url=URL&amp;amp;title=NAME&quot; target=&quot;_blank&quot;&gt; &lt;img src=&quot;https://simplesharebuttons.com/images/somacro/stumbleupon.png&quot; alt=&quot;StumbleUpon&quot; /&gt; &lt;/a&gt; &lt;!-- Tumblr--&gt; &lt;a href=&quot;http://www.tumblr.com/share/link?url=URL&amp;amp;title=NAME&quot; target=&quot;_blank&quot;&gt; &lt;img src=&quot;https://simplesharebuttons.com/images/somacro/tumblr.png&quot; alt=&quot;Tumblr&quot; /&gt; &lt;/a&gt;&lt;a href=&quot;https://api.whatsapp.com/send?text=URL&quot; data-action=&quot;share/whatsapp/share&quot;&gt; &lt;img border=&quot;0&quot; height=&quot;70&quot; src=&quot; http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c543.png&quot; width=&quot;70&quot; /&gt; &lt;/a&gt;'; var newStr = myStr.replace(new RegExp("URL", 'g'), document.getElementById("purl").value).replace(new RegExp("NAME", 'g'),document.getElementById("pname").value).replace(new RegExp("HASH",'g'),document.getElementById ("hash").value); document.getElementById("myText").innerHTML = newStr; } </script> <br><br><br> <script type="text/javascript"> amzn_assoc_placement = "adunit0"; amzn_assoc_search_bar = "true"; amzn_assoc_tracking_id = "bobbie0c-20"; amzn_assoc_ad_mode = "manual"; amzn_assoc_ad_type = "smart"; amzn_assoc_marketplace = "amazon"; amzn_assoc_region = "US"; amzn_assoc_title = "My Amazon Picks"; amzn_assoc_asins = "0321992784,B07B3WN3FM,B01NCOOFGO,B075LKSJZ7"; amzn_assoc_linkid = "0db457b7183c7173036528cbd6808a90"; </script> <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script> <br><br> <h2>Share with Friends</h2><br> <!-- Twitter --> <a href="https://twitter.com/share?url=https://groovy codes.blogspot.com&amp;text=Groovy Codes&amp;hashtags=Coded" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" /> </a> <!-- Facebook --> <a href="http://www.facebook.com/sharer.php?u=https://groovy codes.blogspot.com" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" /> </a> <!-- Google+ --> <a href="https://plus.google.com/share?url=https://groovy codes.blogspot.com" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/google.png" alt="Google" /> </a> <!-- LinkedIn --> <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=https://groovy codes.blogspot.com" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/linkedin.png" alt="LinkedIn" /> </a> <!-- Email --> <a href="mailto:?Subject=Groovy Codes&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://groovy codes.blogspot.com"> <img src="https://simplesharebuttons.com/images/somacro/email.png" alt="Email" /> </a> <!-- Pinterest --> <a href="http://pinterest.com/pin/create/button/?url=https://groovy codes.blogspot.com&media=https://groovy codes.blogspot.com&description=Groovy Codes"> <img src="https://simplesharebuttons.com/images/somacro/pinterest.png" alt="Pinterest" /> </a> <!-- Reddit --> <a href="http://reddit.com/submit?url=https://groovy codes.blogspot.com&amp;title=Groovy Codes" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/reddit.png" alt="Reddit" /> </a> <!-- StumbleUpon--> <a href="http://www.stumbleupon.com/submit?url=https://groovy codes.blogspot.com&amp;title=Groovy Codes" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/stumbleupon.png" alt="StumbleUpon" /> </a> <!-- Tumblr--> <a href="http://www.tumblr.com/share/link?url=https://groovy codes.blogspot.com&amp;title=Groovy Codes" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/tumblr.png" alt="Tumblr" /> </a><a href="https://api.whatsapp.com/send?text=https://groovy codes.blogspot.com" data-action="share/whatsapp/share"> <img border="0" height="70" src=" http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c543.png" width="70" /> </a> https://groovycodes.blogspot.com/2018/10/ez-share.htmlnoreply@blogger.com (Bobbie)0tag:blogger.com,1999:blog-9122707409913584935.post-809324334161577203Mon, 08 Oct 2018 03:33:00 +00002018-10-08T07:31:00.617-07:00FunGameGroovy CodesJavascriptHacker Terminal<!DOCTYPE html> <html> <head> <title>#Hackerterminal Challenge</title> <style> #bob { background-image:url(https://i.pinimg.com/originals/92/c5/b2/92c5b20f647f2b2d546ee54131f18148.gif); height:650px; width:550px; } button{ background-color:green; border-width:0; font-size:15px; } input{ background:none; color: green; border: 1px solid rgba(0,0,0,0.5); font-size: 20px; border-color:green; } #hack{ font-color: green; font-size: 20px; background-color:green; } </style> </head> <body> <h3>This is a really fun challenge code to create a Virtual Hacker Terminal simply tap the input box at the top make a selection and hit enter for awesome results</h3><br><br> <div id="bob"> <input id='list' onfocus="clearInput(this)" size="25" style="font-size:14pt;" list="suggestions"/> <datalist id="suggestions"> <option value="List"></option> <option value="Connect"></option> <option value="Engage"></option> <option value="Join Anonymous"></option> <option value="Reveal Anonymous"></option> <option value="Hack the White House"></option> <option value="Hack the Planet"></option> </datalist> <br><br> <button onclick='text()'>Enter</button><br><br> <txt id='hack'></txt> <br><br></div> </body> <script> var x = '' ; function text() { x = list.value ; if (x == 'List') { hack.innerHTML = 'Commands<br>List<br>Connect<br>Engage<br>Join Anonymous<br>Reveal Anonymous<br>Hack the White House<br>Hack the Planet'} else if (x == 'Connect') { hack.innerHTML = 'CONNECTING IN....<img src="https://media3.giphy.com/media/thNsW0HZ534DC/giphy.gif"height="350"width="350">'} else if (x == 'Engage') { hack.innerHTML = 'HACKING SYSTEM....<img src="https://media.giphy.com/media/zXmbOaTpbY6mA/giphy.gif"height="300"width="350">Mission Accomplished'} else if (x == 'Join Anonymous') { hack.innerHTML = 'Welcome to Anonymous....<img src="https://media2.giphy.com/media/lwAyIZrVNYfio/giphy.gif "height="300"width="350"><br>Sorry its not that easy'} else if (x == 'Reveal Anonymous') { hack.innerHTML = '<img src="https://www.gifpal.com/static/uimages/4f29a75b31158se_1440861110.gif "height="300"width="350">NEVER'} else if (x == 'Hack the White House') { hack.innerHTML = '<img src="http://78.media.tumblr.com/9cebcec899889b81f2adea7b5486fdbb/tumblr_ne8fbcYjVR1ru5h8co1_500.gif"height="330"width="350">Accomplished Миссия выполнена '} else if (x == 'Hack the Planet') { hack.innerHTML = '<img src="https://media.giphy.com/media/soV2cf4ylKhDG/giphy.gif"height="330"width="350">PLANET HACKED '} } function clearInput(element){ element.value=""; } </script> <br><br> <script type="text/javascript"> amzn_assoc_placement = "adunit0"; amzn_assoc_search_bar = "true"; amzn_assoc_tracking_id = "bobbie0c-20"; amzn_assoc_ad_mode = "manual"; amzn_assoc_ad_type = "smart"; amzn_assoc_marketplace = "amazon"; amzn_assoc_region = "US"; amzn_assoc_title = "My Amazon Picks"; amzn_assoc_linkid = "796af33f2eed68bc3bb059a432ede297"; amzn_assoc_asins = "1285454618,1788622057,0134772806,1119231507"; </script> <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script> </html> https://groovycodes.blogspot.com/2018/10/hacker-terminal.htmlnoreply@blogger.com (Bobbie)0tag:blogger.com,1999:blog-9122707409913584935.post-878779578801821407Wed, 26 Sep 2018 14:15:00 +00002018-10-07T20:40:52.558-07:00FunGameGroovy CodesJavascriptEncouraging Cube <!DOCTYPE html> <html> <head> <title>Art Cube 2</title> <style> body { color: #333; padding: 20px; text-align: center; font-family: Arial; } .separator { margin-top: 40px; } /* 3D Cube */ .space3d { perspective: 500px; width: 250px; height: 250px; text-align: center; display: inline-block; } ._3dbox { display: inline-block; transition: all 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-align: center; position: relative; width: 250px; height: 250px; transform-style: preserve-3d; transform: rotateX(-15deg) rotateY(15deg); } ._3dface { overflow: hidden; position: absolute; border: 1px solid #888; background: #FFF; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3); color: #333; line-height: 250px; opacity: 0.8; } ._3dface--front { width: 250px; height: 250px; transform: translate3d(0, 0, 125px); } ._3dface--top { width: 250px; height: 250px; transform: rotateX(90deg) translate3d(0, 0, 125px); } ._3dface--bottom { width: 250px; height: 250px; transform: rotateX(-90deg) translate3d(0, 0, 125px); } ._3dface--left { width: 250px; height: 250px; left: 50%; margin-left: -125px; transform: rotateY(-90deg) translate3d(0, 0, 125px); } ._3dface--right { width: 250px; height: 250px; left: 50%; margin-left: -125px; transform: rotateY(90deg) translate3d(0, 0, 125px); } ._3dface--back { width: 250px; height: 250px; transform: rotateY(180deg) translate3d(0, 0, 125px); } #radio-left:checked ~ .space3d ._3dbox { transform: rotateY(90deg); } #radio-right:checked ~ .space3d ._3dbox { transform: rotateY(-90deg); } #radio-bottom:checked ~ .space3d ._3dbox { transform: rotateX(90deg); } #radio-top:checked ~ .space3d ._3dbox { transform: rotateX(-90deg); } #radio-back:checked ~ .space3d ._3dbox { transform: rotateY(180deg); } ._3dface--front{ background: url(https://thumbs.dreamstime.com/z/vector-vintage-card-forest-night-sky-phrase-you-awesome-stylish-hipster-background-68782775.jpg);background-size: cover; } ._3dface--left { background: url(http://www.lovethispic.com/uploaded_images/244036-Today-Is-A-Good-Day-To-Have-A-Great-Day-Cute-Quote.jpg);background-size: cover; } ._3dface--right { background: url(https://i.pinimg.com/736x/3e/bf/68/3ebf689621c576a30abea72928f0e461.jpg);background-size: cover; } ._3dface--top { background: url(https://images-na.ssl-images-amazon.com/images/I/51VxVXfVc0L._SX258_BO1,204,203,200_.jpg); background-size: cover; } ._3dface--bottom { background: url(http://teamworkdefinition.com/wp-content/uploads/2013/03/QuoteTeamwork-288x300.jpg); background-size: cover; } ._3dface--back { background: url(https://previews.123rf.com/images/iqoncept/iqoncept1107/iqoncept110700086/10015112-The-words-Great-Job-surrounded-by-a-burst-of-colorful-stars-communicating-good-praise-for-a-project--Stock-Photo.jpg); background-size: cover; } #theme { margin-top: 10px; } </style> </head> <body> <form name="sel"> <input type="radio" checked id="radio-front" name="select-face"/> <input type="radio" id="radio-left" name="select-face"/> <input type="radio" id="radio-right" name="select-face"/> <input type="radio" id="radio-top" name="select-face"/> <input type="radio" id="radio-bottom" name="select-face"/> <input type="radio" id="radio-back" name="select-face"/> <div class="separator"></div> <div class="space3d"> <div class="_3dbox"> <div class="art-img _3dface _3dface--front"></div> <div class="art-img _3dface _3dface--top"></div> <div class="art-img _3dface _3dface--bottom"></div> <div class="art-img _3dface _3dface--left"></div> <div class="art-img _3dface _3dface--right"></div> <div class="art-img _3dface _3dface--back"></div> </div> </div> <div class="separator"></div><br> <div>Encouragements Have Great Day</a> <br> <p>Thanks again Calvin</p> <button id="next" onclick="return nextSel()">Next</button> <button id="prev" onclick="return prevSel()">Prev</button><br> <button id="theme" onclick="return changeTheme()">Change cube</button> </form> </div> <script> var images = [ [ 'https://i.pinimg.com/736x/46/2a/0f/462a0f5afdfda84ae955d6a32096aadf--notification-positive-motivational-quotes.jpg', 'https://i.pinimg.com/736x/8c/a8/fd/8ca8fdf1b73e32a32413b75367a10d3b--free-printable-quotes-free-printables.jpg', 'https://i.pinimg.com/236x/62/9a/e1/629ae1f6d9289f19d5562d12c18ad545--great-day-quotes-have-a-great-day.jpg', 'https://sd.keepcalm-o-matic.co.uk/i-w600/have-an-awesome-and-spectacular-day.jpg', 'https://i.pinimg.com/736x/08/f6/a5/08f6a5bd22b34d1700143fd9a1ad94e2--recovery-encouragement.jpg', 'https://i.pinimg.com/736x/fa/3b/7d/fa3b7df3a4f70b3e4e579fb26c82f538--happy-wishes-true-friendships.jpg' ], [ 'https://i.pinimg.com/736x/c2/38/33/c23833611cd9cc255cc9ae12b838740f--salon-quotes-have-a-beautiful-day.jpg', 'https://i.pinimg.com/736x/37/99/84/3799840c324fce9a845b92e1ef4ffef5--try-quotes-sign-quotes.jpg', 'https://i.pinimg.com/736x/ac/7a/60/ac7a602ca2e7f874953f6dff60222d3d--quotes-to-live-by-quote-posters.jpg', 'https://i.pinimg.com/736x/1b/9a/2c/1b9a2cc4ac456717fdd09f996077d731--quotes-of-encouragement-joy-quotes.jpg', 'https://i.pinimg.com/736x/38/ef/2c/38ef2c401eaaf0ce667509b15b1a7bb0.jpg', 'https://pbs.twimg.com/media/C6VVBEnUwAEerR_.jpg' ], [ 'https://www.hooverwebdesign.com/free-printables/greeting-cards/you-are-so-groovy-greeting-card.gif', 'https://pbs.twimg.com/media/Ccjdp7SUEAAKR5V.jpg', 'https://i.pinimg.com/236x/51/a7/04/51a7043e07d6751e99a8849162b8be27--you-are-amazing-amazing-people.jpg', 'https://i.pinimg.com/236x/d9/dc/2e/d9dc2eacc4a90e5a08f02b791a6f7d2a--quotes-encouragement-encouraging-quotes.jpg', 'https://i.pinimg.com/736x/16/9a/06/169a06a34fe3eea4dca1238586539281--quotes-of-way-to-go-quotes.jpg', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNZnfvqGt8rPh6GUw6zY8noXn7pUNdFnhfmWZnDKLJqKLa0_CnWPpMz3KEvyUF4RFqyvuiaTM4xKCySMC69-yX4O8iXa2GxNHIF3FWokShZygBIlqMSLUnRaTur2mAtmAWDCcEV60fJTU/s1600/Youre-the-best-compliment-graphic.gif' ] ]; var rad = 0; // set next radio var theme = 0; function nextSel() { rad = rad==5? 0:rad+1; sel[rad].checked = true; return false; } function prevSel() { rad = rad==0? 5:rad-1; sel[rad].checked = true; return false; } function changeTheme() { theme = theme==images.length-1? 0:theme+1; var artImgs = document.querySelectorAll('.art-img'); for(var i=0;i<6;i++) { artImgs[i].style.backgroundImage = 'url(' + images[theme][i] + ')'; } return false; } </script> </body> </html> <div id="amzn-assoc-ad-314c761e-37d0-400b-86fb-51bfa50a1366"></div><script async src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=314c761e-37d0-400b-86fb-51bfa50a1366"></script> <br><br> <script> (function(d){ var js, id = 'ayboll-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//cdn.ayboll.com/js/one.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> <script>(aybollads=window.aybollads||[]).push({id:"91017451-3"});</script> <ins id="aybollads-91017451-3"></ins>https://groovycodes.blogspot.com/2018/09/encouraging-cube.htmlnoreply@blogger.com (Bobbie)0tag:blogger.com,1999:blog-9122707409913584935.post-6394528898730301242Wed, 26 Sep 2018 14:13:00 +00002018-10-07T20:40:52.513-07:00FunGameGroovy CodesJavascriptRandom Joke Generator<!DOCTYPE html> <html> <head> <title>Joke Generator</title> </head> <body> <h1 style=color:blue>Random Joke Generator</h1> <div><span style="font-size:25px"> <div id="jokeDisplay"></span></div></div> <button onclick= "newJoke()">New Joke</button> <script scr="javascript.js"></script> </body> <script> var jokes= ['Guess the number of programmers it takes to change a light bulb? Zero its a hardware problem','There are only 10 kinds of people in this world: those who know binary and those who don’t.','Real programmers count from 0.', 'Why did the programmer quit his job? Because he didnt get arrays.', 'A foo walks into a bar takes a look around and says Hello World','0 is false 1 is true right? 1','Things arent always #000000 and #FFFFFF.','What is the most used language in programming? Profanity','!False its funny because its True','You had me at Hello World','2b||!2b','Yesterday I changed the name on my wifi to Hack if you can. Today I found it named Challenge Accepted','A programmer is a person who fixed a problem that you didnt know you had in a way you dont understand','How can you tell if a computer geek is an extrovert? They stare at your shoes when you talk instead of their own.','I would love to change the world but they wont give me the source code.','If at first you dont succedd call it version 1.0','Computers make very fast very accurate mistakes','I farted in the Apple store and everyone got mad at me. Not my fault they dont have Windows.','Knock Knock... Whos there? Art... Art Who? R2D2','Hilarious and amazingly true thing: if a pizza has a radius (z) and a depth (a) that pizzas volume can be defined Pi*z*z*a.'] function newJoke(){ var randomNumber=Math.floor(Math.random()*(20)); document.getElementById('jokeDisplay').innerHTML=jokes[randomNumber]; } </script> </html> <div id="amzn-assoc-ad-314c761e-37d0-400b-86fb-51bfa50a1366"></div><script async src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=314c761e-37d0-400b-86fb-51bfa50a1366"></script> <br><br> <script> (function(d){ var js, id = 'ayboll-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//cdn.ayboll.com/js/one.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> <script>(aybollads=window.aybollads||[]).push({id:"91017451-3"});</script> <ins id="aybollads-91017451-3"></ins> https://groovycodes.blogspot.com/2018/09/random-joke-generator.htmlnoreply@blogger.com (Bobbie)0tag:blogger.com,1999:blog-9122707409913584935.post-9161211354618310653Sat, 22 Sep 2018 15:25:00 +00002018-10-07T20:40:52.604-07:00FunGameGroovy CodesJavascriptJS Particles Crystal Ball<!DOCTYPE html> <html> <head> <title>Colorful Crystal Ball2</title> <!--What images appear to you in the colors or background?--> <style> @import "compass/css3"; #my-canvas { width: 450px; height: 450px; background: #005; border-radius: 50%; animation: colorchange 30s infinite; animation-iteration-count: infinite; animation-direction:infinite alternate; -webkit-animation: colorchange 20s infinite; } @keyframes colorchange { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 75% {background: green;} 100% {background: purple;} } @-webkit-keyframes colorchange { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 75% {background: green;} 100% {background: purple;} } </style> </head> <body bgcolor="pink"> <canvas id="my-canvas"></canvas> </body> <script> window.onload = function() { var canvas = document.getElementById( 'my-canvas' ); var ctx = canvas.getContext( '2d' ); var people = []; for( var i = 0; i < 9000; i ++ ) { people.push( Person() ); } setInterval( function(){update()}, 5 ); function update() { for( var i = 0; i < people.length; i ++ ) { var person = people[i]; person.x += person.speed; if( person.x > 600 ){ person.x = 0; } if(person.y > 200) { person.y = 0; } } render(); } function render() { ctx.clearRect(0,0,600,300); for( var i = 0 ; i < people.length; i ++ ) { var person = people[i] ctx.fillStyle = "rgb("+person.rgb+")"; ctx.fillRect(person.x,person.y,7,3); } } function Person() { var person = {}; person.name = 'name'; person.x = Math.random() * 600 - 300; person.y = Math.random() * 200; person.speed = Math.floor( Math.random() * 9 ) + 1; person.rgb = Math.floor((Math.random() * 256)).toString() + ',' + Math.floor((Math.random() * 256)).toString() + ',' + Math.floor((Math.random() * 256)).toString(); return person; } Person.prototype = { }; } //altered from https://codepen.io/thefivetoes </script> </html> <div id="amzn-assoc-ad-29b66b16-7cec-4fc8-a945-0a416422347d"></div><script async src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=29b66b16-7cec-4fc8-a945-0a416422347d"></script> <br><br> <script> (function(d){ var js, id = 'ayboll-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//cdn.ayboll.com/js/one.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> <script>(aybollads=window.aybollads||[]).push({id:"91017451-3"});</script> <ins id="aybollads-91017451-3"></ins>https://groovycodes.blogspot.com/2018/09/js-particles-crystal-ball.htmlnoreply@blogger.com (Bobbie)0tag:blogger.com,1999:blog-9122707409913584935.post-8833056902146947950Sat, 22 Sep 2018 14:27:00 +00002018-10-07T20:41:34.429-07:00FunGameGroovy CodesIQ testJavascriptFun IQ Test<!DOCTYPE html> <html> <head> <title>IQ test</title> </head> <body> <p style="color:blue;font-size:24px">Basic IQ Test</p> <form name="quiz"> <p style="color:green;font-size:20px"> 1. Which of these numbers does not belong: 1,3,5,6,7,9 ?</p> <ul style="margin-top: 3pt"> <li><input type="radio" name="q1" value="1">1</li> <li><input type="radio" name="q1" value="5">5</li> <li><input type="radio" name="q1" value="6">6</li> <li><input type="radio" name="q1" value="9">9</li> </ul> <p style="color:green;font-size:20px"> 2. Which one of the following things is the least like the others?</p> <ul style="margin-top: 3pt"> <li><input type="radio" name="q2" value="Pacific">Pacific</li> <li><input type="radio" name="q2" value="Erie">Erie</li> <li><input type="radio" name="q2" value="Atlantic">Atlantic</li> <li><input type="radio" name="q2" value="Artic">Arctic</li> </ul> <p style="color:green;font-size:20px"> 3. What number best completes the analogy: 28 : 14 as 16 : _ ? </p> <ul style="margin-top: 3pt"> <li><input type="radio" name="q3" value="8">8</li> <li><input type="radio" name="q3" value="12">12</li> <li><input type="radio" name="q3" value="6">6</li> <li><input type="radio" name="q3" value="14">14</li> </ul> <p style="color:green;font-size:20px"> 4. Which letter should appear next in the sequence: A,S,D,F,_ ?</p> <ul style="margin-top: 3pt"> <li><input type="radio" name="q4" value="B">B</li> <li><input type="radio" name="q4" value="P">P</li> <li><input type="radio" name="q4" value="M">M</li> <li><input type="radio" name="q4" value="G">G</li> </ul> <p style="color:green;font-size:20px"> 5. The day after the day after tomorrow is four days before Monday. What day is it today?</p> <ul style="margin-top: 3pt"> <li><input type="radio" name="q5" value="Monday">Monday</li> <li><input type="radio" name="q5" value="Wednesday">Wednesday</li> <li><input type="radio" name="q5" value="Friday">Friday</li> <li><input type="radio" name="q5" value="Sunday">Sunday</li> </ul> <p style="color:green;font-size:20px"> 6. Which number is next in the series: 29,27,24,20,15,__ ?</p> <ul style="margin-top: 3pt"> <li><input type="radio" name="q6" value="10">10</li> <li><input type="radio" name="q6" value="12">12</li> <li><input type="radio" name="q6" value="9">9</li> <li><input type="radio" name="q6" value="13">13</li> </ul> <p style="color:green;font-size:20px"> 7. 6121135 is to flame as 21215120 is to : ___ ?</p> <ul style="margin-top: 3pt"> <li><input type="radio" name="q7" value="banana">banana</li> <li><input type="radio" name="q7" value="float">float</li> <li><input type="radio" name="q7" value="fire">fire</li> <li><input type="radio" name="q7" value="bloat">bloat</li> </ul> <p style="color:green;font-size:20px"> 8. AWESOME is to EMOSEWA as 8724653 is to: ___ ?</p> <ul style="margin-top: 3pt"> <li><input type="radio" name="q8" value="8543675">8543575</li> <li><input type="radio" name="q8" value="3565378">3565378</li> <li><input type="radio" name="q8" value="7254376">7254376</li> <li><input type="radio" name="q8" value="3564278">3564278</li> </ul> <p style="color:green;font-size:20px"> 9. Which one does not belong: 1,1,2,3,4,5,8,13,21 ?</p> <ul style="margin-top: 3pt"> <li><input type="radio" name="q9" value="1">1</li> <li><input type="radio" name="q9" value="4">4</li> <li><input type="radio" name="q9" value="5">5</li> <li><input type="radio" name="q9" value="13">13</li> </ul> <p style="color:green;font-size:20px"> 10. Which does not belong?</p> <ul style="margin-top: 3pt"> <li><input type="radio" name="q10" value="Horse">Horse</li> <li><input type="radio" name="q10" value="Bird">Bird</li> <li><input type="radio" name="q10" value="Tiger">Tiger</li> <li><input type="radio" name="q10" value="Dog">Dog</li> </ul> <br> <br> <input type="button" value="Get your Score" onClick="getScore(this.form)"> <input type="reset" value="Clear Answers"> <p> Score = <strong><input class="bgclr" type="text" size="3" style="font-size:17pt;" name="percentage" disabled></strong><br><br> <p><h3>Intrepreting your score: </h3>Over 180- Amazingly Super Genius<br> 160 - 180 - Super Genius<br> 140 - 160 - Genius or near genius. <br>120 - 140 - Very superior intelligence.<br> 110 - 119 - Superior intelligence. <br>90 - 109 - Normal or average intelligence.</p> <br><br> If you like this code please let me know i will work on a more advanced version. Thanks🙂 </form> </body> <script> var nQ = 10; var nC = 4; var a = new Array(10); a[0] = "6"; a[1] = "Erie"; a[2] = "8"; a[3] = "G"; a[4] = "Monday"; a[5] = "9"; a[6] = "bloat"; a[7] = "3564278"; a[8] = "4"; a[9] = "Bird"; function getScore(form) { var score = 0; var cE; var cS; for (i=0; i<nQ; i++) { cE = i*nC; for (j=0; j<nC; j++) { cS = form.elements[cE + j]; if (cS.checked) { if (cS.value == a[i]) { score++; break; } } } } score = Math.round(score/nQ*200); form.percentage.value = score + " IQ"; var correctA = ""; for (i=1; i<=nQ; i++) { correctA += i + ". " + a[i-1] + "\r\n"; }} </script> </html> <div id="amzn-assoc-ad-5ca40fe3-66d9-4c78-b751-3d1feee762fd"></div><script async src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=5ca40fe3-66d9-4c78-b751-3d1feee762fd"></script> <br><br> <script> (function(d){ var js, id = 'ayboll-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//cdn.ayboll.com/js/one.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> <script>(aybollads=window.aybollads||[]).push({id:"91017451-3"});</script> <ins id="aybollads-91017451-3"></ins>https://groovycodes.blogspot.com/2018/09/fun-iq-test.htmlnoreply@blogger.com (Bobbie)2tag:blogger.com,1999:blog-9122707409913584935.post-3596675826909902248Fri, 21 Sep 2018 23:02:00 +00002018-10-07T20:40:52.468-07:00FunGameGroovy CodesJavascriptJavascript Particles Fishes <!DOCTYPE html> <!-- Author Paul Caron from a suggestion of curios basant --> <html> <head> <title>Collisions Particles</title> <style> html, body{ padding:none; margin:none; } div{ height:"500px"; width:"350px"; } #canvas{ background-image:url("https://i.gifer.com/Bs0W.gif"); background-size:cover; background-repeat:no-repeat ; height:500px; width:350px; } </style> </head> <H3>*Featured Code submitted and Created by <a href="https://www.sololearn.com/Profile/8518623/?ref=app">Paul</a></H3> <body onload="start();"> <div> <canvas id="canvas"width:"350"height:"500"></canvas></div> </body> <script> var particles = []; var canvas; var ctx; var collision =[] ; var colors = ["red","orange","yellow","green","blue","violet","white"];//rainbow attack var frameCount = 0; var color = "white"; var stop = false; var yGround = 0; var yCeil = 0; var walls = []; var plates = []; var shadows = []; var sound; var Particle = function(){} Particle.prototype = { xSpeed : 0, ySpeed : 0, xPos : 0, yPos : 0, width : 16, height : 16, finx:0, finy:0, finb :0, finby :0, color : "white", draw : function(){ //ctx.shadowBlur=20; //ctx.shadowColor=this.color; ctx.beginPath(); ctx.arc(this.xPos, this.yPos, this.width/2, 0, Math.PI*2); ctx.fillStyle = this.color; ctx.fill(); ctx.closePath(); ///fins and eye var direction = Math.acos(this.xSpeed/Math.sqrt(this.xSpeed*this.xSpeed+this.ySpeed*this.ySpeed)); if(this.ySpeed<0){ direction *=-1; } ctx.shadowBlur=0; //fins this.finx = this.xPos + Math.cos(direction+Math.PI/2)*this.width/2; this.finy = this.yPos + Math.sin(direction+Math.PI/2)* this.height/2; ctx.beginPath(); ctx.arc(this.finx, this.finy, this.width/5, 0, Math.PI*2); ctx.fillStyle = this.color; ctx.fill(); ctx.closePath(); this.finbx = this.xPos - Math.cos(direction+Math.PI/2)*this.width/2; this.finby = this.yPos - Math.sin(direction+Math.PI/2)* this.height/2; ctx.beginPath(); ctx.arc(this.finbx, this.finby, this.width/5, 0, Math.PI*2); ctx.fillStyle = this.color; ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.arc(this.xPos + Math.cos(direction+Math.PI/2)*this.width/4, this.yPos + Math.sin(direction+Math.PI/2)*this.width/4, this.width/4, 0, Math.PI*2); ctx.strokeStyle = "black"; ctx.fillStyle = "white"; ctx.fill(); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.arc(this.xPos + Math.cos(direction+Math.PI/2)*this.width/4, this.yPos + Math.sin(direction+Math.PI/2)*this.width/4 , this.width/8, 0, Math.PI*2); ctx.fillStyle = "black"; ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.arc(this.xPos - Math.cos(direction+Math.PI/2)*this.width/4, this.yPos - Math.sin(direction+Math.PI/2)*this.width/4, this.width/4, 0, Math.PI*2); ctx.strokeStyle = "black"; ctx.fillStyle = "white"; ctx.fill(); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.arc(this.xPos - Math.cos(direction+Math.PI/2)*this.width/4, this.yPos - Math.sin(direction+Math.PI/2)*this.width/4 , this.width/8, 0, Math.PI*2); ctx.fillStyle = "black"; ctx.fill(); ctx.closePath(); shadows.push([this.xPos,this.yPos,this.color]); }, getInfo : function(){ console.log("x:"+this.xPos+", y:"+this.yPos+", xspeed:"+this.xSpeed+", yspeed"+this.ySpeed+" SPEED: "+(Math.sqrt(this.xSpeed*this.xSpeed+this.ySpeed*this.ySpeed))); } } function start(){ canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; //ground init yGround = canvas.height -50; plates.push(yGround); //Ceiling init yCeil = 0; plates.push(yCeil); //walls init walls.push(0); walls.push(canvas.width); //sound sound = document.getElementById("sound"); //particles init ///let the fun begin, random particles for(let a = 0;a<30;a++){ particles.push(new Particle()); particles[particles.length-1].xPos = Math.random()*(canvas.width - particles[particles.length-1].width)+ particles[particles.length-1].width/2; particles[particles.length-1].yPos = Math.random()*(yGround - yCeil - particles[particles.length-1].height)+ particles[particles.length-1].height/2; particles[particles.length-1].ySpeed = Math.random()*5-2.5; particles[particles.length-1].xSpeed = Math.random()*5-2.5; particles[particles.length-1].color =colors[Math.floor(Math.random()*7)]; } loop(); } function loop(){ clearCanvas(); //draw ground; ctx.beginPath(); ctx.moveTo(0,yGround); ctx.lineTo(canvas.width,yGround) ctx.strokeStyle = "white"; ctx.stroke(); ctx.closePath(); //draw ceil; ctx.beginPath(); ctx.moveTo(0,yCeil ); ctx.lineTo(canvas.width,yCeil) ctx.strokeStyle = "white"; ctx.stroke(); ctx.closePath(); //draw wall ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(0,yGround) ctx.strokeStyle = "white"; ctx.stroke(); ctx.closePath(); //draw wall ctx.beginPath(); ctx.moveTo(canvas.width,0); ctx.lineTo(canvas.width,yGround) ctx.strokeStyle = "white"; ctx.stroke(); ctx.closePath(); frameCount ++; //draw particles if(shadows.length>200){ for(let a=0; a<(shadows.length-200);a++){ shadows.shift(); } } for(shadow in shadows){ drawShadow(shadows[shadow], shadow); } for(p in particles){ render(particles[p]); } //animation loop if(frameCount <0){ }else{ window.requestAnimationFrame(loop); } } function render(p){ p.xPos += p.xSpeed ; p.yPos += p.ySpeed; p.draw(); //check collision between particles for(part in particles){ // dist between part if(p===particles[part]){ }else{ var distX = p.xPos - particles[part].xPos; var distY = p.yPos - particles[part].yPos; var dist = Math.sqrt(distX*distX + distY*distY); ///////////// if(dist < p.width/2 + particles[part].width/2 ) { var direction_hitten = p.yPos>particles[part].yPos?-Math.acos(-distX/dist):Math.acos(-distX/dist); var direction_hitter = Math.acos(p.xSpeed/Math.sqrt(p.xSpeed*p.xSpeed+p.ySpeed*p.ySpeed)); var direction_hitter2 = Math.acos(particles[part].xSpeed/Math.sqrt(particles[part].xSpeed*particles[part].xSpeed+particles[part].ySpeed*particles[part].ySpeed)); if(p.ySpeed<0){ direction_hitter *=-1; } if(particles[part].ySpeed<0){ direction_hitter2 *=-1; } partsCollision(p,particles[part],direction_hitten,direction_hitter, direction_hitter2 ); } } // sound.play(); } //collision with walls for(w in walls){ if(p.xSpeed > 0 && walls[w] - p.xPos < p.width/2 && p.xPos < walls[w] ) { p.xSpeed *= -1;//reverse } if(p.xSpeed < 0 && p.xPos -walls[w] < p.width/2 && p.xPos > walls[w]) { p.xSpeed *= -1;//reverse } } //check collision with ceiling or ground for(plate in plates){ if(p.ySpeed > 0 && plates[plate] - p.yPos < p.height/2 && p.yPos < plates[plate] ) { p.ySpeed *= -1;//reverse } if(p.ySpeed < 0 && p.yPos -plates[plate] < p.height/2 && p.yPos > plates[plate]) { p.ySpeed *= -1;//reverse } } } function partsCollision(p1,p2,direction_hitten ,direction_hitter,direction_hitter2 ){ var speed1 = Math.sqrt(p1.xSpeed*p1.xSpeed + p1.ySpeed*p1.ySpeed); var speed2 = Math.sqrt(p2.xSpeed*p2.xSpeed + p2.ySpeed*p2.ySpeed); var invertY=1; var invertY2 = 1; /* if((p1.ySpeed > 0 && p2.ySpeed > 0 && p1.yPos < p2.yPos)||(p1.ySpeed < 0 && p2.ySpeed < 0 && p1.yPos > p2.yPos) ){ if(p1.ySpeed >p2.ySpeed){ invertY = -1; } }*/ ////// var sub; if(direction_hitter - direction_hitten > Math.PI/2){ sub = Math.PI-(direction_hitter -direction_hitten); }else if(direction_hitter-direction_hitten<-Math.PI/2){ sub = Math.PI+(direction_hitter -direction_hitten); }else{ sub =parseFloat(direction_hitter)-parseFloat(direction_hitten); } if(sub < Math.PI/2){ sub += Math.PI; } if(sub > Math.PI/2){ sub -= Math.PI; } var ratio = 1- (Math.abs(sub))/(Math.PI/2); var r1=1-ratio; var r2=ratio; //console.log(ratio+","+direction_hitter+","+direction_hitten); p2.xSpeed= Math.cos(direction_hitten) *speed1 *r2; p2.ySpeed= Math.sin(direction_hitten)*speed1*r2*invertY2; var ninety; ninety = Math.PI/2; if(direction_hitter >=0 && direction_hitten >=0 && direction_hitter >direction_hitten ) { ninety = Math.PI/2; }else if(direction_hitter <=0 && direction_hitten <=0 && direction_hitter > direction_hitten ){ ninety = Math.PI/2; }else if(direction_hitten >0 && direction_hitter <0 && direction_hitter <-Math.PI/2 ){ ninety = Math.PI/2; }else if(direction_hitten <0 && direction_hitter >0 && direction_hitten >-Math.PI/2 ){ ninety = Math.PI/2; }else{ ninety = -Math.PI/2; } p1.xSpeed=Math.cos(parseFloat(direction_hitten) + ninety)*speed1 *(r1); p1.ySpeed=Math.sin(parseFloat(direction_hitten) + ninety)*speed1 *(r1); // adding speed2 // console.log(direction_hitten ); if(direction_hitten <0){ direction_hitten = (parseFloat(direction_hitten)+Math.PI); }else{ direction_hitten = (parseFloat(direction_hitten)-Math.PI); } temp = direction_hitter ; //direction_hitten = (direction_hitten - Math.PI)%Math.PI ; direction_hitter = direction_hitter2 ; var sub=0.00000000; if(direction_hitter - direction_hitten > Math.PI/2){ sub = Math.PI-(direction_hitter -direction_hitten); }else if(direction_hitter-direction_hitten<-Math.PI/2){ sub = Math.PI+(direction_hitter -direction_hitten); }else{ sub =parseFloat(direction_hitter)-parseFloat(direction_hitten); } if(sub < Math.PI/2){ sub += Math.PI; } if(sub > Math.PI/2){ sub -= Math.PI; } var ratio = 1- ((Math.abs(parseFloat(sub)))/(Math.PI/2)); var r1=1-ratio; if(ratio <0){ // console.log(sub+"ratio sub"); } //console.log(ratio+","+direction_hitter+","+direction_hitten); var r2=ratio; var invX = 1; var invY = 1; sub = Math.abs(direction_hitter - temp); /* if(sub< (Math.PI) || (sub > (3*Math.PI/2))){ if(Math.abs(p2.xSpeed)>Math.abs(p2.ySpeed)){ invX =-1; } if(Math.abs(p2.ySpeed)>Math.abs(p2.xSpeed)){ invY =-1; } } */ p1.xSpeed+= Math.cos(parseFloat(direction_hitten)) *speed2 *r2*invX; p1.ySpeed+= Math.sin(parseFloat(direction_hitten))*speed2*r2*invY; var ninety; ninety = Math.PI/2; if(direction_hitter >=0 && direction_hitten >=0 && direction_hitter >direction_hitten ) { ninety = Math.PI/2; }else if(direction_hitter <=0 && direction_hitten <=0 && direction_hitter > direction_hitten ){ ninety = Math.PI/2; }else if(direction_hitten >0 && direction_hitter <0 && direction_hitter <-Math.PI/2 ){ ninety = Math.PI/2; }else if(direction_hitten <0 && direction_hitter >0 && direction_hitten >-Math.PI/2 ){ ninety = Math.PI/2; }else{ ninety = -Math.PI/2; } // console.log(sub); p2.xSpeed += Math.cos(parseFloat(direction_hitten) + ninety)*speed2 *(r1); p2.ySpeed+=Math.sin(parseFloat(direction_hitten) + ninety)*speed2 *(r1); //normalize var speedone = Math.sqrt(p1.xSpeed*p1.xSpeed + p1.ySpeed*p1.ySpeed); var speedtwo = Math.sqrt(p2.xSpeed*p2.xSpeed + p2.ySpeed*p2.ySpeed); var n=((speed1+speed2)/(speedone + speedtwo)) ; p1.xSpeed *= n; p1.ySpeed *= n; p2.xSpeed *= n; p2.ySpeed *= n; //console.log(n); // p1.getInfo(); // p2.getInfo(); //to avoid double collisions balls getting stuck for(let a=0;a<1;a++){ p2.xPos += p2.xSpeed; p2.yPos += p2.ySpeed; p1.xPos += p1.xSpeed; p1.yPos += p1.ySpeed; } // console.log("collision"); } function clearCanvas(){ ctx.clearRect(0,0,canvas.width,canvas.height); } function drawtext(y,text, size,font,color){ ctx.font = size+"px"+" "+font; ctx.fillStyle=color; ctx.textAlign="center"; ctx.fillText(text, canvas.width/2,y); } function drawShadow([x,y,color], index){ if(index<40){ index = 140-index; } ctx.shadowBlur=0; ctx.shadowColor=color; ctx.beginPath(); ctx.arc(x, y, index*0.04, 0, Math.PI*2); ctx.fillStyle = color; ctx.fill(); ctx.closePath(); } </script> </html> <div id="amzn-assoc-ad-300695b7-383b-4a28-be85-25ff5010d479"></div><script async src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=300695b7-383b-4a28-be85-25ff5010d479"></script> <br><br> <script> (function(d){ var js, id = 'ayboll-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//cdn.ayboll.com/js/one.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> <script>(aybollads=window.aybollads||[]).push({id:"91017451-3"});</script> <ins id="aybollads-91017451-3"></ins>https://groovycodes.blogspot.com/2018/09/javascript-particles-fishes.htmlnoreply@blogger.com (Bobbie)0tag:blogger.com,1999:blog-9122707409913584935.post-1484836968251051859Fri, 21 Sep 2018 15:19:00 +00002018-10-07T20:40:52.331-07:00FunGameGroovy CodesJavascriptHow many Stars?<!DOCTYPE html> <html> <head> <title>Star Illusion</title> </head> <body bgcolor="#ff00ff"> How Many Stars Do You See?<br><br> <svg width="340" height="400"> <polygon points="0 100, 130 80, 170 0" style="fill:red"/> <polygon points="130 80,170 70,170 0" style="fill:green"/> <polygon points="170 70,210 80,170 0" style="fill:silver"/> <polygon points="210 80,170 0,340 100" style="fill:red"/> <polygon points="0 100,170 70,130 150" style="fill:yellow"/> <polygon points="170 70,170 200,90 240" style="fill:blue"/> <polygon points="170 70,170 200,250 240" style="fill:yellow"/> <polygon points="170 70,210 150,340 100" style="fill:blue"/> <polygon points="0 100,130 150,90 240" style="fill:red"/> <polygon points="250 240, 210 150, 340 100" style="fill:red"/> <polygon points="0 100, 0 300, 60 200" style="fill:yellow"/> <polygon points="0 300, 60 200, 90 240" style="fill:silver"/> <polygon points="90 240,170 200,250 240" style="fill:red"/> <polygon points="250 240, 270 200, 340 300" style="fill:green"/> <polygon points="340 300, 270 200,340 100" style="fill:blue"/> <polygon points="0 300,110 280,90 240" style="fill:green"/> <polygon points="90 240, 170 240, 170 400" style="fill:blue"/> <polygon points="170 240,250 240,170 400" style="fill:yellow"/> <polygon points="230 280,250 240,340 300" style="fill:silver"/> <polygon points="0 300,110 280,170 400" style="fill:yellow"/> <polygon points="170 400,230 280,340 300" style="fill:blue"/> </svg> </body> </html> <div id="amzn-assoc-ad-314c761e-37d0-400b-86fb-51bfa50a1366"></div><script async src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=314c761e-37d0-400b-86fb-51bfa50a1366"></script> <br> <br> <script> (function(d){ var js, id = 'ayboll-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//cdn.ayboll.com/js/one.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> <script>(aybollads=window.aybollads||[]).push({id:"91017451-3"});</script> <ins id="aybollads-91017451-3"></ins>https://groovycodes.blogspot.com/2018/09/how-many-stars.htmlnoreply@blogger.com (Bobbie)0tag:blogger.com,1999:blog-9122707409913584935.post-3150332982574417108Thu, 20 Sep 2018 12:52:00 +00002018-10-07T20:40:52.422-07:00FunGameGroovy CodesJavascriptGuess the Number<html> <head> <title>Guess the Number 1.0!</title> <style> body { } #title { display: block; background-color: #00AAFF; text-align: center; padding-top: 5px; padding-bottom: 5px; border-radius: 35px; border: 5px solid #0088CC; } #box-text { background-color: #00AAFF; width: 30%; height: 50px; position: relative; left: 34%; margin-top: 30px; border: 5px solid #0088CC; border-radius: 20px; } #hidden-text { text-align: center; font-size: 30px; margin-top: 10px; font-weight: 500; } #title2 { text-align: center; } #numbers { background-color: #55EEFF; border: 3px solid #0077BB; border-radius: 10px; } .number { background-color: #00AAFF; display: inline-block; padding: 15px 18px 15px 18px; border: 3px solid #0077BB; margin: 3px 2px 3px 3px; border-radius: 10px; font-size: 30px; font-weight: 500; } #restart { padding: 8px 10px 8px 10px; background-color: #00AAFF; border: 3px solid #0077BB; text-align: center; width: 20%; position: relative; left: 36%; margin-top: 10px; border-radius: 15px; font-weight: 500; margin-bottom: 100px; } #credit { text-align: right; margin-top: 100px; } </style> </head> <body> <H3> *Featured Code submitted and Created by <a href="https://www.sololearn.com/Profile/9361557/?ref=app">Facu</a></h3><br><br> <h1 id="title"> Guess the Number 1.0</h1> <div id="box-text"> <div id="hidden-text"> ?</div> </div> <h2 id="title2" style="color: #ffaa00;"> Which number do you bet?</h2> <div id="numbers" style="display: block;"> <div class="number" onclick="bet(1)"> 1</div> <div class="number" onclick="bet(2)"> 2</div> <div class="number" onclick="bet(3)"> 3</div> <div class="number" onclick="bet(4)"> 4</div> <div class="number" onclick="bet(5)"> 5</div> <div class="number" onclick="bet(6)"> 6</div> <div class="number" onclick="bet(7)"> 7</div> <div class="number" onclick="bet(8)"> 8</div> <div class="number" onclick="bet(9)"> 9</div> <div class="number" onclick="bet(0)"> 0</div> </div> <div id="restart" onclick="rest()" style="display: none;"> Restart</div> <div id="credit"> <a href="https://www.sololearn.com/Profile/9361557#" target="_blank">Facu</a> 2018, all rights reserved.</div> </body> <script> function rest() { var u = document.getElementById("restart"); u.style.display = "none"; var x = document.getElementById("title2"); x.innerHTML = "Which number do you bet?"; x.style.color = "#FFAA00" var a = document.getElementById("hidden-text"); a.innerHTML = "?"; var d = document.getElementById("numbers"); d.style.display = "block"; } function bet(betnum) { var num = Math.floor(Math.random() * 10); if (num == betnum) { var e = document.getElementById("title2") e.innerHTML = "You win! Try again."; e.style.color = "#00FF00" } else { var e = document.getElementById("title2") e.innerHTML = "You lost... try again."; e.style.color = "#FF0000" } var l = document.getElementById("restart"); l.style.display = "block"; var b = document.getElementById("hidden-text"); b.innerHTML = num; var d = document.getElementById("numbers"); d.style.display = "none"; } </script> </html> <div id="amzn-assoc-ad-29b66b16-7cec-4fc8-a945-0a416422347d"></div><script async src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=29b66b16-7cec-4fc8-a945-0a416422347d"></script> <br><br> <script> (function(d){ var js, id = 'ayboll-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//cdn.ayboll.com/js/one.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> <script>(aybollads=window.aybollads||[]).push({id:"91017451-3"});</script> <ins id="aybollads-91017451-3"></ins>https://groovycodes.blogspot.com/2018/09/guess-number.htmlnoreply@blogger.com (Bobbie)0tag:blogger.com,1999:blog-9122707409913584935.post-2307373915709236492Thu, 20 Sep 2018 03:39:00 +00002018-10-07T20:40:52.399-07:00FunGameGroovy CodesJavascriptHTML SVG Starburst<!DOCTYPE html> <html> <head> <title>Extreme Star Burst</title> </head> <body bgcolor=black> <svg height="700" width="700"> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:purple"><animateMotion from= "0,0" to="200,20" dur="1s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:blue"><<animateMotion from= "0,0" to="300,320" dur="1s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:green"><<animateMotion from= "0,0" to="30,-220" dur="1s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:yellow"><<animateMotion from= "0,0" to="100,320" dur="1s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:pink"><<animateMotion from= "0,0" to="-40,350" dur="1s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:lightblue"><<animateMotion from= "0,0" to="-300,220" dur="1s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:orange"><<animateMotion from= "0,0" to="-200,300" dur="1s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#ff00ff"><animateMotion from= "0,0" to="-200,-20" dur="1s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#00ffff"><animateMotion from= "0,0" to="300,-220" dur="1s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#ffff00"><animateMotion from= "0,0" to="300,-120" dur="1s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#55ff00"><animateMotion from= "0,0" to="300,150" dur="1s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#5500aa"><animateMotion from= "0,0" to="-300,100" dur="1s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#aa00ff"><animateMotion from= "0,0" to="-300,-150" dur="1s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#ff0000"><animateMotion from= "0,0" to="-200,-250" dur="1s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#00cccc"><animateMotion from= "0,0" to="-80,-250" dur="1s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#ff0077"><animateMotion from= "0,0" to="180,-250" dur="1s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:purple"><animateMotion from= "0,0" to="200,20" dur="2s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:blue"><<animateMotion from= "0,0" to="300,320" dur="2s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:green"><<animateMotion from= "0,0" to="30,-220" dur="2s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:yellow"><<animateMotion from= "0,0" to="100,320" dur="2s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:pink"><<animateMotion from= "0,0" to="-40,350" dur="2s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:lightblue"><<animateMotion from= "0,0" to="-300,220" dur="2s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:orange"><<animateMotion from= "0,0" to="-200,300" dur="2s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#ff00ff"><animateMotion from= "0,0" to="-200,-20" dur="2s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#00ffff"><animateMotion from= "0,0" to="300,-220" dur="2s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#ffff00"><animateMotion from= "0,0" to="300,-120" dur="2s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#55ff00"><animateMotion from= "0,0" to="300,150" dur="2s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#5500aa"><animateMotion from= "0,0" to="-300,100" dur="2s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#aa00ff"><animateMotion from= "0,0" to="-300,-150" dur="2s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#ff0000"><animateMotion from= "0,0" to="-200,-250" dur="2s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#00cccc"><animateMotion from= "0,0" to="-80,-250" dur="2s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#ff0077"><animateMotion from= "0,0" to="180,-250" dur="2s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:purple"><animateMotion from= "0,0" to="200,20" dur="4s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:blue"><<animateMotion from= "0,0" to="300,320" dur="4s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:green"><<animateMotion from= "0,0" to="30,-220" dur="4s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:yellow"><<animateMotion from= "0,0" to="100,320" dur="4s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:pink"><<animateMotion from= "0,0" to="-40,350" dur="4s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:lightblue"><<animateMotion from= "0,0" to="-300,220" dur="4s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:orange"><<animateMotion from= "0,0" to="-200,300" dur="4s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#ff00ff"><animateMotion from= "0,0" to="-200,-20" dur="4s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#00ffff"><animateMotion from= "0,0" to="300,-220" dur="4s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#ffff00"><animateMotion from= "0,0" to="300,-120" dur="4s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#55ff00"><animateMotion from= "0,0" to="300,150" dur="4s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#5500aa"><animateMotion from= "0,0" to="-300,100" dur="4s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#aa00ff"><animateMotion from= "0,0" to="-300,-150" dur="4s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#ff0000"><animateMotion from= "0,0" to="-200,-250" dur="4s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#00cccc"><animateMotion from= "0,0" to="-80,-250" dur="4s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="130 250,160 170,190 250,110 200,210 200"style="fill:#ff0077"><animateMotion from= "0,0" to="180,-250" dur="4s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:red"><animateMotion from= "0,0" to="280,-300" dur="4.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:yellow"><animateMotion from= "0,0" to="280,-200" dur="3.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:green"><animateMotion from= "0,0" to="280,-100" dur="2.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#aaaa00"><animateMotion from= "0,0" to="280,-0" dur="3.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:blue"><animateMotion from= "0,0" to="280,100" dur="4.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:pink"><animateMotion from= "0,0" to="280,200" dur="2.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:orange"><animateMotion from= "0,0" to="280,300" dur="3.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#ff00ff"><animateMotion from= "0,0" to="280,400" dur="4.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#00ffff"><animateMotion from= "0,0" to="280,500" dur="2.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:red"><animateMotion from= "0,0" to="-280,-300" dur="4.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:yellow"><animateMotion from= "0,0" to="-280,-200" dur="3.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:green"><animateMotion from= "0,0" to="-280,-100" dur="2.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#aaaa00"><animateMotion from= "0,0" to="-280,-0" dur="3.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:blue"><animateMotion from= "0,0" to="-280,100" dur="4.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:pink"><animateMotion from= "0,0" to="-280,200" dur="2.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:orange"><animateMotion from= "0,0" to="-280,300" dur="3.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#ff00ff"><animateMotion from= "0,0" to="-280,400" dur="4.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#00ffff"><animateMotion from= "0,0" to="-280,500" dur="2.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:red"><animateMotion from= "0,0" to="0,400" dur="4.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:yellow"><animateMotion from= "0,0" to="100,400" dur="3.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:green"><animateMotion from= "0,0" to=" 200,400" dur="4.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#aaaa00"><animateMotion from= "0,0" to="300,400" dur="3.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:blue"><animateMotion from= "0,0" to="400,400" dur="2.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:pink"><animateMotion from= "0,0" to="500,400" dur="2.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:orange"><animateMotion from= "0,0" to="-100,400" dur="3.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#ff00ff"><animateMotion from= "0,0" to="-200,400" dur="4.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#00ffff"><animateMotion from= "0,0" to="-300,400" dur="2.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:red"><animateMotion from= "0,0" to="0,-400" dur="4.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:yellow"><animateMotion from= "0,0" to="100,-400" dur="3.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:green"><animateMotion from= "0,0" to=" 200,-400" dur="1.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#aaaa00"><animateMotion from= "0,0" to="300,-400" dur="3.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:blue"><animateMotion from= "0,0" to="400,-400" dur="4.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:pink"><animateMotion from= "0,0" to="500,-400" dur="2.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:orange"><animateMotion from= "0,0" to="-100,-400" dur="3.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#ff00ff"><animateMotion from= "0,0" to="-200,-400" dur="4.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#00ffff"><animateMotion from= "0,0" to="-300,-400" dur="1.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:blue"><animateMotion from= "0,0" to="-300,-350" dur="1.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:yellow"><animateMotion from= "0,0" to="-200,-350" dur=".5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:red"><animateMotion from= "0,0" to="-100,-350" dur="3.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:green"><animateMotion from= "0,0" to="0,-350" dur="2.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:pink"><animateMotion from= "0,0" to="100,-350" dur="1.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:#ff00ff"><animateMotion from= "0,0" to="200,-350" dur=".5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:lightblue"><animateMotion from= "0,0" to="300,-350" dur="1.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:orange"><animateMotion from= "0,0" to="400,-350" dur="2.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:#00ffff"><animateMotion from= "0,0" to="500,-350" dur=".5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:pink"><animateMotion from= "0,0" to="-300,350" dur="2.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:yellow"><animateMotion from= "0,0" to="-200,350" dur="1.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:orange"><animateMotion from= "0,0" to="-100,350" dur=".5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:blue"><animateMotion from= "0,0" to="0,350" dur="1.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:green"><animateMotion from= "0,0" to="100,350" dur="2.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:#ff00ff"><animateMotion from= "0,0" to="200,350" dur=".5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:purple"><animateMotion from= "0,0" to="300,350" dur="2.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:red"><animateMotion from= "0,0" to="400,350" dur="1.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:lightblue"><animateMotion from= "0,0" to="500,350" dur=".5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:red"><animateMotion from= "0,0" to="0,-200" dur="4.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:yellow"><animateMotion from= "0,0" to="100,-200" dur="3.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:green"><animateMotion from= "0,0" to=" 200,-200" dur="1.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#aaaa00"><animateMotion from= "0,0" to="300,-200" dur="3.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:blue"><animateMotion from= "0,0" to="400,-200" dur="4.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:pink"><animateMotion from= "0,0" to="500,-200" dur="2.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:orange"><animateMotion from= "0,0" to="-100,200" dur="3.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#ff00ff"><animateMotion from= "0,0" to="-200,200" dur="4.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#00ffff"><animateMotion from= "0,0" to="-300,200" dur="1.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:orange"><animateMotion from= "0,0" to="0,200" dur="4.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:yellow"><animateMotion from= "0,0" to="100,200" dur="2.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:green"><animateMotion from= "0,0" to=" 200,200" dur=".5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#aaaa00"><animateMotion from= "0,0" to="300,200" dur="1.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:blue"><animateMotion from= "0,0" to="400,200" dur=".5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:pink"><animateMotion from= "0,0" to="500,200" dur="2.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:red"><animateMotion from= "0,0" to="-100,200" dur="1.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#ff00ff"><animateMotion from= "0,0" to="-200,200" dur=".5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#00ffff"><animateMotion from= "0,0" to="-300,200" dur="1.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:red"><animateMotion from= "0,0" to="0,400" dur="2.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:yellow"><animateMotion from= "0,0" to="100,200" dur=".5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:green"><animateMotion from= "0,0" to=" 200,200" dur="1.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#aaaa00"><animateMotion from= "0,0" to="300,200" dur=".5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:blue"><animateMotion from= "0,0" to="400,200" dur="1.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:pink"><animateMotion from= "0,0" to="500,200" dur=".5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:orange"><animateMotion from= "0,0" to="-100,200" dur="2.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#ff00ff"><animateMotion from= "0,0" to="-200,200" dur="1.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#00ffff"><animateMotion from= "0,0" to="-300,200" dur=".5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:red"><animateMotion from= "0,0" to="0,-200" dur="1.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:yellow"><animateMotion from= "0,0" to="100,-200" dur="2.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:green"><animateMotion from= "0,0" to=" 200,-200" dur="1.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#aaaa00"><animateMotion from= "0,0" to="300,-200" dur=".5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:blue"><animateMotion from= "0,0" to="400,-200" dur="1.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:pink"><animateMotion from= "0,0" to="500,-200" dur="2.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:orange"><animateMotion from= "0,0" to="-100,-200" dur=".5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#ff00ff"><animateMotion from= "0,0" to="-200,-200" dur="2.5s" fill= "freeze" repeatCount="indefinite"> </polygon> <polygon points="160 213,180 213,165 225,170 205,175 225"style="fill:#00ffff"><animateMotion from= "0,0" to="-300,-200" dur=".5s" fill= "freeze" repeatCount="indefinite">v </polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:blue"><animateMotion from= "0,0" to="-300,-150" dur="1.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:yellow"><animateMotion from= "0,0" to="-200,-150" dur=".5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:red"><animateMotion from= "0,0" to="-100,-150" dur="3.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:green"><animateMotion from= "0,0" to="0,-150" dur="2.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:pink"><animateMotion from= "0,0" to="100,-150" dur="1.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:#ff00ff"><animateMotion from= "0,0" to="200,-150" dur=".5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:lightblue"><animateMotion from= "0,0" to="300,-150" dur="1.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:orange"><animateMotion from= "0,0" to="400,-150" dur="2.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:#00ffff"><animateMotion from= "0,0" to="500,-150" dur=".5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:pink"><animateMotion from= "0,0" to="-300,150" dur="2.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:yellow"><animateMotion from= "0,0" to="-200,150" dur="1.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:orange"><animateMotion from= "0,0" to="-100,150" dur=".5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:blue"><animateMotion from= "0,0" to="0,150" dur="1.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:green"><animateMotion from= "0,0" to="100,150" dur="2.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:#ff00ff"><animateMotion from= "0,0" to="200,150" dur=".5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:purple"><animateMotion from= "0,0" to="300,150" dur="2.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:red"><animateMotion from= "0,0" to="400,150" dur="1.5s" fill= "freeze" repeatCount="indefinite"></polygon> <polygon points="150 226,190 226,160 250,170 210,180 250"style="fill:lightblue"><animateMotion from= "0,0" to="500,150" dur=".5s" fill= "freeze" repeatCount="indefinite"></polygon> </body> </html> <div id="amzn-assoc-ad-5ca40fe3-66d9-4c78-b751-3d1feee762fd"></div><script async src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=5ca40fe3-66d9-4c78-b751-3d1feee762fd"></script> <br><br> <script> (function(d){ var js, id = 'ayboll-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//cdn.ayboll.com/js/one.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> <script>(aybollads=window.aybollads||[]).push({id:"91017451-3"});</script> <ins id="aybollads-91017451-3"></ins>https://groovycodes.blogspot.com/2018/09/html-svg-starburst.htmlnoreply@blogger.com (Bobbie)0tag:blogger.com,1999:blog-9122707409913584935.post-5979113666432567369Wed, 19 Sep 2018 20:48:00 +00002018-10-07T20:40:52.490-07:00FunGameGroovy CodesJavascriptFun with Rings<!DOCTYPE html> <html> <head> <title></title> <style> { transform-style: preserve-3d; } .one { width: 300px; height: 300px; border-radius: 500px; border: 30px solid #ff00ff; animation: spin 5s infinite linear; } .two { width: 260px; height: 260px; border-radius: 500px; border: 20px solid #0000ff; animation: spin 4s infinite linear; } .three { width: 220px; height: 220px; border-radius: 500px; border: 20px solid #ffff00; animation: spin 3s infinite linear; } .four { width: 180px; height: 180px; border-radius: 500px; border: 30px solid #ff0000; animation: spin 2s infinite linear; } .five { width: 140px; height: 140px; border-radius: 500px; border: 25px solid #550077; animation: spin 4.5s infinite linear; } .six { width: 100px; height: 100px; border-radius: 500px; border: 20px solid #00ff77; animation: spin 3.5s infinite linear; } .seven{ width: 60px; height: 60px; border-radius: 500px; border: 35px solid #Dd0073; animation: spin 2.5s infinite linear; } @keyframes spin { 0% {transform: rotateX(0deg) rotateY(0deg);} 25% {transform: rotateX(90deg) rotateY(90deg);} 50%{transform: rotateX(-180deg) rotateY(180deg);} 70%{transform: rotateX(60deg)rotateY(60deg);} 90% {transform: rotateX(0deg) rotateY(0deg);} } </style> </head> <body bgcolor="pink"> <div class="one"> <div class="two"> <div class="three"> <div class="four"> <div class="five"> <div class="six"> <div class="seven"></div> </div> </div> </div> </div> </div> </div> </body> </html> <div id="amzn-assoc-ad-300695b7-383b-4a28-be85-25ff5010d479"></div><script async src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=300695b7-383b-4a28-be85-25ff5010d479"></script> <br><br> <script> (function(d){ var js, id = 'ayboll-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//cdn.ayboll.com/js/one.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> <script>(aybollads=window.aybollads||[]).push({id:"91017451-3"});</script> <ins id="aybollads-91017451-3"></ins>https://groovycodes.blogspot.com/2018/09/fun-with-rings.htmlnoreply@blogger.com (Bobbie)0tag:blogger.com,1999:blog-9122707409913584935.post-1988471793250400274Wed, 19 Sep 2018 20:25:00 +00002018-10-07T20:40:52.376-07:00FunGameGroovy CodesJavascriptSVG Castle with Animation<!DOCTYPE html> <html> <head> <title></title> </head> <body> <body bgcolor="lightblue"> <svg width="600" height="600"> <rect width="80" height="200" x="20" y="160" fill="pink"/> <rect width="40" height="120" x="100" y="130" fill="purple"/> <rect width="70" height="120" x="140" y="110" fill="red"/> <rect width="40" height="150" x="210" y="100" fill="purple"/> <rect width="80" height="150" x="250" y="140" fill="pink"/> <rect width="40" height="110" x="20" y="240" fill="purple"/> <rect width="40"height="200" x="90" y="260" fill="red"/> <rect width="90" height="230" x="130" y="230" fill="blue"/> <rect width="40" height="200" x="220" y="260" fill="red"/> <rect width="40" height="140" x="290" y="210" fill="purple"/> <rect width="40" height="120" x="0" y="350" fill="blue"/> <rect width="50" height="170" x="40" y="290" fill="pink"/> <rect width="50" height="170" x="260" y="290" fill="pink"/> <rect width="40" height="120" x="310" y="350" fill="blue"/> <polygon points="20 160,60 100,100 160" fill="gold"/> <polygon points="100 130,120 70,140 130" fill="silver"/> <polygon points="140 110,175 20,210 110" fill="gold"/> <polygon points="210 100,230 50,250 100" fill="silver"/> <polygon points="250 140,290 70,330 140" fill="gold"/> <polygon points="10 240,40 190,70 240" fill="silver"/> <polygon points="80 260,110 210,140 260" fill="gold"/> <polygon points="210 260,240 210,270 260" fill="gold"/> <polygon points="280 230,310 160,340 230" fill="silver"/> <polygon points="0 350,20 310,40 350" fill="gold"/> <polygon points="310 350,330 310,350 350" fill="gold"/> <polygon points="40 280,50 280,50 290,60 290,60 280,70 280,70 290,80 290,80 280,90 280,90 300,40 300" fill="lightblue"/> <polygon points="260 280,270 280 270 290,280 290,280 280,290 280,290 290,300 290,300 280,310 280,310 300,260 300" fill="lightblue"/> <polygon points="130 220,140 220,140 230,150 230,150 220,160 220,160 230 170 230,170 220,180 220,180 230,190 230,190 220,200 220,200 230,210 230,210 220,220 220,220 240,130 240" fill="lightblue"/> <polygon points="150 460,150 400,200 400,200 460" fill="gold"/> <polygon points="0 10,10 20,30 20,30 0,50 20,60 20,70 25,60 30,50 30,30 50,30 30,10 30,0 40"style="fill:blue"> <animateMotion from= "0,0" to="500,0" dur="4s" fill= "freeze" repeatCount="indefinite"> </svg> </body> </html> <div id="amzn-assoc-ad-5ca40fe3-66d9-4c78-b751-3d1feee762fd"></div><script async src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=5ca40fe3-66d9-4c78-b751-3d1feee762fd"></script> <br> <br> <script> (function(d){ var js, id = 'ayboll-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//cdn.ayboll.com/js/one.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> <script>(aybollads=window.aybollads||[]).push({id:"91017451-3"});</script> <ins id="aybollads-91017451-3"></ins>https://groovycodes.blogspot.com/2018/09/svg-castle-with-animation.htmlnoreply@blogger.com (Bobbie)0tag:blogger.com,1999:blog-9122707409913584935.post-3541048591441417523Wed, 19 Sep 2018 20:14:00 +00002018-10-07T20:40:52.445-07:00FunGameGroovy CodesJavascriptTesseract Wobble<!DOCTYPE html> <html> <head> <title>Tesseract Wobble</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> body { background-color:#000000; padding-top: 0px; } #rotationDiv { width: 300px; height: 350px; margin: auto; animation: spin 10s linear infinite; } @keyframes spin { 100% { -webkit-transform: rotate(27000deg); } } </style> </head> <body> <p><font color="purple"><p align="center"><span style="font-size:30px">Tesseract Wobble</style> <body bgcolor="DD00DD"> <body> <p>Whats your favorite Duration?<br>Current Duration: <span id="duration_label"></span></p> <div> <button id="stop">Stop</button> <button id="play">Play</button> </div> <button id="decrease_duration">Faster</button> <button id="increase_duration">Slower</button> <div id="animated"></div> <div class= "img"> <div id="rotationDiv"> <svg height=300 width=300 viewbox="50, 50,200,200"> <polygon points="140 120,180 120,180 160,140 160" style:fill="#0000FF"fill-opacity="0.0"stroke="#FF00FF"stroke-width="4"/> <polygon points="140 120,180 120,160 140,120 140" style:fill="#0000FF" fill-opacity="0.0" stroke="#FF00FF"stroke-width="4"/> <polygon points="120 140,160 140,160 180,120 180" style:fill="#0000FF" fill-opacity="0.0" stroke="#FF00FF" stroke-width="4"/> <polygon points="160 140,180 120,180 160,160 180" style:fill="#0000FF" fill-opacity="0.0" stroke="#FF00FF" stroke-width="4"/> <polygon points="80 110,200 110,200 220,80 220" style:fill="#00FF00" fill-opacity="0.0" stroke="#0000FF" stroke-width="4"/> <polygon points="100 80,220 80,220 190,100 190" style:fill="#00FF00" fill-opacity="0.0" stroke="#0000FF" stroke-width="4"/> <line x1="140" y1="120" x2="100" y2="80" style="stroke:#FF0000;stroke-width:4"/> <line x1="120" y1="140" x2="80" y2="110" style="stroke:#FF0000;stroke-width:4"/> <line x1="160" y1="140" x2="200" y2="110" style="stroke:#FF0000;stroke-width:4"/> <line x1="180" y1="120" x2="220" y2="80" style="stroke:#FF0000;stroke-width:4"/> <line x1="100" y1="80" x2="80" y2="110" style="stroke:#0000FF;stroke-width:4"/> <line x1="220" y1="80" x2="200" y2="110" style="stroke:#0000FF;stroke-width:4"/> <line x1="220" y1="190" x2="200" y2="220" style="stroke:#0000FF;stroke-width:4"/> <line x1="100" y1="190" x2="80" y2="220" style="stroke:#0000FF;stroke-width:4"/> <line x1="140" y1="160" x2="100" y2="190" style="stroke:#FF0000;stroke-width:4"/> <line x1="120" y1="180" x2="80" y2="220" style="stroke:#FF0000;stroke-width:4"/> <line x1="140" y1="160" x2="120" y2="180" style="stroke:#FF00FF;stroke-width:4"/> <line x1="180" y1="160" x2="220" y2="190" style="stroke:#FF0000;stroke-width:4"/> <line x1="160" y1="180" x2="200" y2="220" style="stroke:#FF0000; stroke-width:4"/> <line x1="120" y1="140" x2="120" y2="180" style="stroke:#FF00FF; stroke-width:4"/> </div> </body> <script>$(document).ready(function(){ function init(){ $("#duration_label").html(getDuration()); $("#increase_duration").on("click", function(){ changeDuration(1); }); $("#decrease_duration").on("click", function(){ changeDuration(-1); }); //Wisdom from David C. aka my Button Wiz...Thanks again!!! //Bobbie... here is the new code to support stop and play logic. // Review how these are different from the increase / decrease button logic. $("#stop").on("click", function(){ setDuration(0); }); $("#play").on("click", function(){ setDuration(10); }); } function getDuration(as_int=false) { var duration = $('#rotationDiv').css('animation-duration'); return as_int ? parseInt(duration) : duration; } function setDuration(duration) { duration = typeof duration == "number" ? duration + "s" : duration; $("#duration_label").html(duration); $("#rotationDiv").css("animation-duration", duration); } function changeDuration(change){ var max_duration = 15; var current_duration = getDuration(true); var new_duration = current_duration + change; //Only proceed if the new_duration is between 1 and max_duration. if(new_duration >= 1 && new_duration <= max_duration) { setDuration(new_duration); } } init(); });</script> </html> <div id="amzn-assoc-ad-300695b7-383b-4a28-be85-25ff5010d479"></div><script async src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=300695b7-383b-4a28-be85-25ff5010d479"></script> <br><br> <script> (function(d){ var js, id = 'ayboll-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//cdn.ayboll.com/js/one.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> <script>(aybollads=window.aybollads||[]).push({id:"91017451-3"});</script> <ins id="aybollads-91017451-3"></ins>https://groovycodes.blogspot.com/2018/09/tesseract-wobble.htmlnoreply@blogger.com (Bobbie)0