<!DOCTYPE html><!-- -------   NOTICE  -------- As of 1/5/24, I have resumed working on this game and I am currently implementing everything else from the original game. This will be done privately. If you have issues with your bugged saves(such as planters crashing, broken quests, etc), feel free to send me your save code and I'll manually fix it. The next version is set to be done by next Christmas, and will involve *everything* from the original game, along with Beesmas. -------------------------------------------------- After like over a year, it's done!! So here's ripoff Bee Swarm Simulator A bit of stuff is different but the gameplay is the same Supports fullscreen and data saving If you name a world with a certain secret passcode you can enable cheats and get infinite stuffs(dont beg) The game is also on github at Dddatt/bss and also on Replit --> <html> <head> <meta charset='utf-8'> <title>Bee Swarm Simulator</title> </head> <body onload='main()'> <canvas id='gl-canvas'></canvas> <canvas id='ui-canvas'></canvas> <canvas id='tex-canvas' width='2048' height='2048'></canvas> <style> body{ overflow:hidden; margin:0; font-family:comic sans ms; user-select:none; } input { height:24px; outline:none; background-color:rgb(255,255,255); border:none; border-bottom:4px solid black; transition-duration:0.4s; border-radius:5px; } input:hover { background-color:rgb(200,200,255); } input:focus { background-color:rgb(170,200,255); } button { width:60px; height:30px; transition-duration:0.4s; border-radius:8px; font-size:16px; background-color:rgb(255,255,255); } button:hover { cursor:pointer; border-radius:13px; background-color:rgb(150,255,205); } #purchaseButton { transition-duration:0s; border:none; } #purchaseButton:hover { outline:2px solid rgb(0,0,0,0.4); } #leftShopButton:hover,#rightShopButton:hover{ outline:2px solid rgb(0,0,0,0.4); } #gl-canvas,#tex-canvas{ display:none; } #ui-canvas{ position:fixed; left:0; top:0; z-index:-3; } div::-webkit-scrollbar{ width:5px; height:8px; background-color:rgb(0,0,0,0); } div::-webkit-scrollbar-thumb{ background:rgb(120,120,120); border-radius:10px; } #roboActiveUpgrades::-webkit-scrollbar{ width:5px; height:8px; background-color:rgb(0,0,0,0); } #roboActiveUpgrades::-webkit-scrollbar-thumb{ background:rgb(40,80,40); border-radius:10px; } #inventoryButton:hover,#questButton:hover,#beesButton:hover,#settingsButton:hover,#beequipButton:hover{ transition-duration:0.4s; background-color:rgba(0,0,0,0.2); cursor:pointer; } #feedThisAmount{ margin-top:50px; margin-left:5px; transition-duration:0s; border-radius:6px; position:fixed; background-color:rgb(0,200,0); border:none; color:rgb(255,255,255); font-size:17px; font-family:trebuchet ms; } #feedUntilGifted{ margin-top:100px; margin-left:160px; transition-duration:0s; border-radius:6px; position:fixed; background-color:rgb(255,200,0); border:none; color:rgb(255,255,255); font-size:16.5px; width:135px; font-family:trebuchet ms; } #feedThisAmount:hover{ background-color:rgb(0,170,0); } #feedAmount,#blenderCraftAmount,#shrineAmount{ margin-top:50px; margin-left:75px; transition-duration:0s; border-radius:6px; position:fixed; background-color:rgb(0,30,205); border:none; color:rgb(255,255,255); font-size:17px; font-family:arial; height:19px; width:200px; padding:5px; padding-left:10px; } #cancelFeeding{ margin-top:100px; margin-left:5px; transition-duration:0s; border-radius:6px; position:fixed; background-color:rgb(255,30,30); border:none; color:rgb(255,255,255); font-size:17px; width:70px; font-family:trebuchet ms; } #cancelFeeding:hover{ background-color:rgb(200,0,0); } #actionHoverDarken:hover{ background-color:rgb(0,0,0,0.3); } #blenderX{ background-color:rgb(255,0,0); transition-duration:0s; } #blenderX:hover{ background-color:rgb(200,0,0); } #leftBlenderButton,#rightBlenderButton{ background-color:rgb(30,90,255); } #blenderCraft{ background-color:rgb(0,170,0); transition-duration:0s; } #blenderCraft:hover{ background-color:rgb(0,100,0); } #leftBlenderButton:hover,#rightBlenderButton:hover{ background-color:rgb(19, 54, 150); } #blenderSpeed,#blenderEnd{ transition-duration:0s; } #shrineX:hover{ background-color:rgb(200,0,0); } #shrineX{ background-color:rgb(255,0,0); } #shrineDonate{ background-color:rgb(0,190,0); } #shrineDonate:hover{ cursor:pointer; background-color:rgb(0,140,0); } #shrineLeft:hover,#shrineRight:hover{ cursor:pointer; background:rgb(0,0,0,0.1); } </style> <div id='abilityUI' style='margin:5px;padding:0px;margin-top:35px;position:fixed'> <svg id='inspireCoconutsPassive' style='width:30px;height:30px;display:none;'> <circle cx='15' cy='15' r='14' fill='rgb(115,163,0)' stroke='rgb(0,0,0)' stroke-width='2'></circle> <circle cx='16' cy='14' r='8' fill='rgb(150,75,0)' stroke='rgb(0,0,0)' stroke-width='1'></circle> <circle cx='18' cy='15' r='1.5' fill='rgb(94, 51, 7)'></circle><circle cx='13' cy='12' r='1.5' fill='rgb(94, 51, 7)'></circle><circle cx='18' cy='11' r='1.5' fill='rgb(94, 51, 7)'></circle> <path d='M0.00000 3.00000L4.70228 6.47214L2.85317 0.92705L7.60845 -2.47214L1.76336 -2.42705L0.00000 -8.00000L-1.76336 -2.42705L-7.60845 -2.47214L-2.85317 0.92705L-4.70228 6.47214Z' transform='translate(12,19) scale(0.75,0.75)' fill='rgb(255,255,0)' stroke='rgb(200,200,0)'></path> <rect id='inspireCoconutsPassive_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <text id='inspireCoconutsPassive_amount' x='29' y='29' style='font-family:tahoma;font-size:12px;' text-anchor='end' fill='rgb(255,255,255)'></text> </svg> <svg id='emergencyCoconutShieldPassive' style='width:30px;height:30px;display:none;'> <circle cx='15' cy='15' r='14' fill='rgb(115,163,0)' stroke='rgb(0,0,0)' stroke-width='2'></circle> <circle cx='15' cy='15' r='11' fill='rgb(255,255,255,0.5)'></circle> <circle cx='15' cy='15' r='8' fill='rgb(150,75,0)' stroke='rgb(0,0,0)' stroke-width='1'></circle> <circle cx='17' cy='16' r='1.5' fill='rgb(94, 51, 7)'></circle><circle cx='12' cy='13' r='1.5' fill='rgb(94, 51, 7)'></circle><circle cx='17' cy='12' r='1.5' fill='rgb(94, 51, 7)'></circle> <rect id='emergencyCoconutShieldPassive_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <text id='emergencyCoconutShieldPassive_amount' x='29' y='29' style='font-family:tahoma;font-size:12px;' text-anchor='end' fill='rgb(255,255,255)'></text> </svg> <svg id='coconutHastePassive' style='width:30px;height:30px;display:none;'> <circle cx='15' cy='15' r='14' fill='rgb(115,163,0)' stroke='rgb(0,0,0)' stroke-width='2'></circle> <circle cx='15' cy='15' r='8' fill='rgb(150,75,0)' stroke='rgb(0,0,0)' stroke-width='1'></circle> <circle cx='17' cy='16' r='1.5' fill='rgb(94, 51, 7)'></circle><circle cx='12' cy='13' r='1.5' fill='rgb(94, 51, 7)'></circle><circle cx='17' cy='12' r='1.5' fill='rgb(94, 51, 7)'></circle> <g transform='translate(6,3) scale(0.75,0.75)'> <path d='M18 9L15 21M12 26L15 21M16 26L15 21M11 11L16 15M23 15L16 15' stroke='rgb(255,255,255)' stroke-width='2'></path> <path d='M5 7 L11 7M2 15L12 15M3 23L11 23' stroke='rgb(255,255,255)' stroke-width='1.5' opacity='0.5'></path> <circle cx='18' cy='9' r='4'fill='rgb(255,255,255)'></circle></g> <rect id='coconutHastePassive_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <text id='coconutHastePassive_amount' x='29' y='29' style='font-family:tahoma;font-size:12px;' text-anchor='end' fill='rgb(255,255,255)'></text> </svg> <svg id='xFlamePassive' style='width:30px;height:30px;display:none;'> <circle cx='15' cy='15' r='14' fill='rgb(115,163,0)' stroke='rgb(0,0,0)' stroke-width='2'></circle> <path stroke='rgb(255,0,0)' stroke-width='6' d='M8 8L22 22M22 8L8 22'></path> <path stroke='rgb(255,100,0)' stroke-width='5' d='M8 8L22 22M22 8L8 22'></path> <path stroke='rgb(255,200,0)' stroke-width='1.5' d='M8 8L22 22M22 8L8 22'></path> <rect id='xFlamePassive_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <text id='xFlamePassive_amount' x='29' y='29' style='font-family:tahoma;font-size:12px;' text-anchor='end' fill='rgb(255,255,255)'></text> </svg> <svg id='ignitePassive' style='width:30px;height:30px;display:none;'> <circle cx='15' cy='15' r='14' fill='rgb(115,163,0)' stroke='rgb(0,0,0)' stroke-width='2'></circle> <path d='M15 25C5 24 5 13 15 5M15 25C25 24 25 13 15 5' fill='rgb(255,150,20)'></path> <path d='M15 25C10 24 10 17 15 10M15 25C20 24 20 17 15 10' fill='rgb(255,0,0)'></path> <rect id='ignitePassive_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <text id='ignitePassive_amount' x='29' y='29' style='font-family:tahoma;font-size:12px;' text-anchor='end' fill='rgb(255,255,255)'></text> </svg> <svg id='bubbleBombsPassive' style='width:30px;height:30px;display:none;'> <circle cx='15' cy='15' r='14' fill='rgb(115,163,0)' stroke='rgb(0,0,0)' stroke-width='2'></circle> <circle cx='15' cy='18' r='7' fill='rgb(80,200,255)' ></circle> <circle cx='15' cy='31' r='3' fill='rgb(80,80,80)'  transform='scale(1,0.4)'></circle> <path stroke='rgb(222, 222, 149)' stroke-width='2' fill='rgb(0,0,0,0)' d='M15 12C15 10 15 6 18 8'></path> <circle cx='18' cy='7' r='2' fill='rgb(255,100,0)' ></circle> <rect id='bubbleBombsPassive_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <text id='bubbleBombsPassive_amount' x='29' y='29' style='font-family:tahoma;font-size:12px;' text-anchor='end' fill='rgb(255,255,255)'></text> </svg> <svg id='coinScatterPassive' style='width:30px;height:30px;display:none;'> <circle cx='15' cy='15' r='14' fill='rgb(115,163,0)' stroke='rgb(0,0,0)' stroke-width='2'></circle> <circle cx='15' cy='15' r='9' fill='rgb(230, 208, 14)' ></circle> <path fill='rgb(217, 184, 52)' stroke='rgb(0,0,0)' stroke-width='1' d='M13 10C16 10 24 17 15 20C8 12 18 15 13 10Z'></path> <rect id='coinScatterPassive_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <text id='coinScatterPassive_amount' x='29' y='29' style='font-family:tahoma;font-size:12px;' text-anchor='end' fill='rgb(255,255,255)'></text> </svg> <svg id='diamondDrainPassive' style='width:30px;height:30px;display:none;'> <circle cx='15' cy='15' r='14' fill='rgb(115,163,0)' stroke='rgb(0,0,0)' stroke-width='2'></circle> <path fill='rgb(100,200,255)' d='M-2 0L2 0L4 2L0 6L-4 2Z' transform='translate(18,9) scale(1.9,2.15)' stroke='rgb(0,0,0)' stroke-width='0.6'></path> <path fill='rgb(242, 199, 29)' d='M13 10C16 10 24 17 15 20C8 12 18 15 13 10Z' transform='translate(-8,-4) scale(1.2,1.2)' stroke='rgb(0,0,0)' stroke-width='0.7'></path> <rect id='diamondDrainPassive_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <text id='diamondDrainPassive_amount' x='29' y='29' style='font-family:tahoma;font-size:12px;' text-anchor='end' fill='rgb(255,255,255)'></text> </svg> <svg id='gummyMorphPassive' style='width:30px;height:30px;display:none;'> <circle cx='15' cy='15' r='14' fill='rgb(115,163,0)' stroke='rgb(0,0,0)' stroke-width='2'></circle> <rect x='9' y='10' width='12' height='12' fill='rgb(255,50,255,0.75)'></rect> <path fill='rgb(25,255,126,0.75)' d='M9 21 C11 10 14 10 14 19C13 20 13 20 16 19C16 10 19 10 21 21'></path> <circle cx='10' cy='10' r='3' fill='rgb(25,255,126,0.75)'></circle><circle cx='20' cy='10' r='3' fill='rgb(25,255,126,0.75)'></circle> <circle cx='13' cy='15' r='0.7' fill='rgb(0,0,0)'></circle><circle cx='17' cy='15' r='0.7' fill='rgb(0,0,0)'></circle> <rect id='gummyMorphPassive_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <text id='gummyMorphPassive_amount' x='29' y='29' style='font-family:tahoma;font-size:12px;' text-anchor='end' fill='rgb(255,255,255)'></text> </svg> <svg id='focusPulserPassive' style='width:30px;height:30px;display:none;'> <circle cx='15' cy='15' r='14' fill='rgb(115,163,0)' stroke='rgb(0,0,0)' stroke-width='2'></circle> <path fill='rgb(255,255,255)' d='M15 25L7 18L12 15L 8 11C6 6 15 5 19 13L 20 15L13 20Z' transform='translate(2,0)' stroke='rgb(255,0,0)' stroke-width='2'></path> <rect id='focusPulserPassive_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <text id='focusPulserPassive_amount' x='29' y='29' style='font-family:tahoma;font-size:12px;' text-anchor='end' fill='rgb(255,255,255)'></text> </svg> <svg id='hastePulserPassive' style='width:30px;height:30px;display:none;'> <circle cx='15' cy='15' r='14' fill='rgb(115,163,0)' stroke='rgb(0,0,0)' stroke-width='2'></circle> <path fill='rgb(255,255,255)' d='M15 25L7 18L12 15L 8 11C6 6 15 5 19 13L 20 15L13 20Z' transform='translate(2,0)' stroke='rgb(0,0,255)' stroke-width='2'></path> <rect id='hastePulserPassive_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <text id='hastePulserPassive_amount' x='29' y='29' style='font-family:tahoma;font-size:12px;' text-anchor='end' fill='rgb(255,255,255)'></text> </svg> <svg id='petalStormPassive' style='width:30px;height:30px;display:none'> <circle cx='15' cy='15' r='14' fill='rgb(115,163,0)' stroke='rgb(0,0,0)' stroke-width='2'></circle> <g transform='translate(15,15) rotate(48)'> <path fill='rgb(255,255,255,0.25)' d='M 0 0C 7 -20 14 5 0 0' ></path> <path fill='rgb(255,255,255,0.25)' d='M 0 0C 7 -20 14 5 0 0' transform='rotate(122)'></path> <path fill='rgb(255,255,255,0.25)' d='M 0 0C 7 -20 14 5 0 0' transform='rotate(249)'></path> </g> <g transform='translate(15,15) rotate(26)'> <path fill='rgb(255,255,255,0.5)' d='M 0 0C 7 -20 14 5 0 0' ></path> <path fill='rgb(255,255,255,0.5)' d='M 0 0C 7 -20 14 5 0 0' transform='rotate(122)'></path> <path fill='rgb(255,255,255,0.5)' d='M 0 0C 7 -20 14 5 0 0' transform='rotate(249)'></path> </g> <path fill='rgb(255,255,255)' d='M 0 0C 7 -20 14 5 0 0' transform='translate(15,15)'></path> <path fill='rgb(255,255,255)' d='M 0 0C 7 -20 14 5 0 0' transform='translate(15,15) rotate(122)'></path> <path fill='rgb(255,255,255)' d='M 0 0C 7 -20 14 5 0 0' transform='translate(15,15) rotate(249)'></path> <circle fill='rgb(255, 255, 120)' cx='15' cy='15' r='3'></circle> <rect id='petalStormPassive_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <text id='petalStormPassive_amount' x='29' y='29' style='font-family:tahoma;font-size:12px;' text-anchor='end' fill='rgb(255,255,255)'></text> </svg> <svg id='popStarPassive' style='width:30px;height:30px;display:none;'> <circle cx='15' cy='15' r='14' fill='rgb(115,163,0)' stroke='rgb(0,0,0)' stroke-width='2'></circle> <circle cx='8' cy='8' r='2' fill='rgb(30,110,205)' stroke='rgb(0,0,0,0.4)'></circle><circle cx='22' cy='10' r='3' fill='rgb(30,110,205)' stroke='rgb(0,0,0,0.4)'></circle><circle cx='15' cy='22' r='3' fill='rgb(30,110,205)' stroke='rgb(0,0,0,0.4)'></circle> <path d='M0.00000 3.00000L4.70228 6.47214L2.85317 0.92705L7.60845 -2.47214L1.76336 -2.42705L0.00000 -8.00000L-1.76336 -2.42705L-7.60845 -2.47214L-2.85317 0.92705L-4.70228 6.47214Z' transform='translate(15,15) scale(1.3,1.3)' fill='rgb(60,170,255)' stroke='rgb(10,80,200)'></path> <rect id='popStarPassive_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <text id='popStarPassive_amount' x='29' y='29' style='font-family:tahoma;font-size:12px;' text-anchor='end' fill='rgb(255,255,255)'></text> </svg> <svg id='scorchingStarPassive' style='width:30px;height:30px;display:none;'> <circle cx='15' cy='15' r='14' fill='rgb(115,163,0)' stroke='rgb(0,0,0)' stroke-width='2'></circle> <path d='M8 12 C5 10 5 8 10 3C15 15 15 15 13 15M19 12C15 15 25 1 25 12Z' fill='rgb(255,100,0)'></path> <path d='M0.00000 3.00000L4.70228 6.47214L2.85317 0.92705L7.60845 -2.47214L1.76336 -2.42705L0.00000 -8.00000L-1.76336 -2.42705L-7.60845 -2.47214L-2.85317 0.92705L-4.70228 6.47214Z' transform='translate(15,15) scale(1.3,1.3)' fill='rgb(220,0,0)' stroke='rgb(150,0,0)'></path> <rect id='scorchingStarPassive_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <text id='scorchingStarPassive_amount' x='29' y='29' style='font-family:tahoma;font-size:12px;' text-anchor='end' fill='rgb(255,255,255)'></text> </svg> <svg id='gummyStarPassive' style='width:30px;height:30px;display:none;'> <defs> <linearGradient id='gummyStarGrad' x1='0.4' x2='0.6' y1='0.4' y2='0.6'> <stop offset='10%' stop-color='rgb(255, 50, 255)'/> <stop offset='90%' stop-color='rgb(25, 255, 126)'/> </linearGradient> <linearGradient id='gummyStarOutline' x1='0.4' x2='0.6' y1='0.4' y2='0.6'> <stop offset='10%' stop-color='rgb(0, 205, 86)'/> <stop offset='90%' stop-color='rgb(205, 10, 205)'/> </linearGradient> </defs> <circle cx='15' cy='15' r='14' fill='rgb(115,163,0)' stroke='rgb(0,0,0)' stroke-width='2'></circle> <circle cx='9' cy='7' fill='rgb(205,10,205)' r='2'></circle> <circle cx='20' cy='7' fill='rgb(0,205,86)' r='2'></circle> <circle cx='24' cy='19' fill='rgb(205,10,205)' r='2'></circle> <circle cx='6' cy='19' fill='rgb(0,205,86)' r='2'></circle> <path d='M0.00000 3.00000L4.70228 6.47214L2.85317 0.92705L7.60845 -2.47214L1.76336 -2.42705L0.00000 -8.00000L-1.76336 -2.42705L-7.60845 -2.47214L-2.85317 0.92705L-4.70228 6.47214Z' transform='translate(15,15) scale(1.3,1.3)' fill='url(#gummyStarGrad)' stroke='url(#gummyStarOutline)'></path> <rect id='gummyStarPassive_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <text id='gummyStarPassive_amount' x='29' y='29' style='font-family:tahoma;font-size:12px;' text-anchor='end' fill='rgb(255,255,255)'></text> </svg> <svg id='guidingStarPassive' style='width:30px;height:30px;display:none;'> <circle cx='15' cy='15' r='14' fill='rgb(115,163,0)' stroke='rgb(0,0,0)' stroke-width='2'></circle> <g transform='scale(0.75,0.75) translate(5,5)'> <circle cx='15' cy='15' r='13' fill='rgb(200,200,200)' stroke='rgb(90,90,90)' stroke-width='3'></circle> <path d='M0 -5L-2 10L2 10Z' fill='rgb(255,0,0)' transform='translate(15,15) rotate(40) translate(0,-8)'></path> <path d='M0 -5L-2 10L2 10Z' fill='rgb(0,0,255)' transform='translate(15,15) rotate(180) translate(0,-8)'></path> <path d='M0 -5L-2 10L2 10Z' fill='rgb(0,0,0)' transform='translate(15,15) rotate(-40) translate(0,-8)'></path> <path d='M0.00000 3.00000L4.70228 6.47214L2.85317 0.92705L7.60845 -2.47214L1.76336 -2.42705L0.00000 -8.00000L-1.76336 -2.42705L-7.60845 -2.47214L-2.85317 0.92705L-4.70228 6.47214Z' transform='translate(15,15) scale(1.3,1.3)' fill='rgb(255,235,100)' stroke='rgb(100,100,100)'></path> </g> <rect id='guidingStarPassive_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <text id='guidingStarPassive_amount' x='29' y='29' style='font-family:tahoma;font-size:12px;' text-anchor='end' fill='rgb(255,255,255)'></text> </svg> <svg id='starShowerPassive' style='width:30px;height:30px;display:none'> <circle cx='15' cy='15' r='14' fill='rgb(115,163,0)' stroke='rgb(0,0,0)' stroke-width='2'></circle> <path d='M 16 13L 20 9M 16 6L 12 10M 19 19L 25 13' stroke='rgb(255, 255, 0,0.5)' stroke-width='2'></path> <path d='M0.00000 3.00000L4.70228 6.47214L2.85317 0.92705L7.60845 -2.47214L1.76336 -2.42705L0.00000 -8.00000L-1.76336 -2.42705L-7.60845 -2.47214L-2.85317 0.92705L-4.70228 6.47214Z' transform='translate(12,18) scale(0.8,0.8)' fill='rgb(255,235,100)' stroke='rgb(196, 196, 57)'></path> <rect id='starShowerPassive_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <text id='starShowerPassive_amount' x='29' y='29' style='font-family:tahoma;font-size:12px;' text-anchor='end' fill='rgb(255,255,255)'></text> </svg> <svg id='starSawPassive' style='width:30px;height:30px;display:none'> <circle cx='15' cy='15' r='14' fill='rgb(115,163,0)' stroke='rgb(0,0,0)' stroke-width='2'></circle> <circle cx='12' cy='19' r='7' fill='rgb(0,0,0,0)' stroke='rgb(255,255,255,0.5)' stroke-width='3' transform='scale(1.2,0.8)'></circle> <path d='M0.00000 3.00000L4.70228 6.47214L2.85317 0.92705L7.60845 -2.47214L1.76336 -2.42705L0.00000 -8.00000L-1.76336 -2.42705L-7.60845 -2.47214L-2.85317 0.92705L-4.70228 6.47214Z' transform='translate(15,18) scale(1.2,0.8)' fill='rgb(255,255,255)' stroke='rgb(150,150,150)'></path> <rect id='starSawPassive_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <text id='starSawPassive_amount' x='29' y='29' style='font-family:tahoma;font-size:12px;' text-anchor='end' fill='rgb(255,255,255)'></text> </svg> <svg id='tabbyLove' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(252, 186, 3)'></rect> <rect id='tabbyLove_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0'></rect> <circle cx='10' cy='13' r='2.2'></circle> <circle cx='20' cy='13' r='2.1'></circle> <path fill='rgb(0,0,0,0)' stroke='rgb(0,0,0)' stroke-width='1.25' d='M12 17C 12 19 18 19 18 17M15 18L15 21M10 21C10 23 15 23 15 21M15 18L15 21M20 21C20 23 15 23 15 21M0 16L8 18M0 23L8 21M30 16L22 18M30 23L22 21'></path> <path fill='rgb(0,0,0,0)' stroke='rgb(166, 129, 43)' stroke-width='2.5' d='M10 0L10 5M15 0 L 15 6M20 0 L20 5'></path> <text id='tabbyLove_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='scienceEnhancement' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(252, 186, 3)'></rect> <rect id='scienceEnhancement_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0'></rect> <g transform="translate(4,4) scale(0.5,0.5)" fill="#000000"> <path d="M43.183,37.582L31.209,15.429V2.232C31.209,0.99,30.17,0,28.929,0H16.707c-1.242,0-2.264,0.99-2.264,2.232v13.197 L2.459,37.582c-0.914,1.689-0.868,3.74,0.115,5.391c0.983,1.649,2.766,2.668,4.686,2.668h31.115c1.92,0,3.707-1.019,4.69-2.668 C44.047,41.322,44.097,39.271,43.183,37.582z M24.797,28.314c1.073,0,1.942,0.869,1.942,1.942c0,1.072-0.871,1.942-1.942,1.942 c-1.072,0-1.942-0.87-1.942-1.942C22.855,29.186,23.724,28.314,24.797,28.314z M19.336,16.637c1.073,0,1.942,0.87,1.942,1.943 c0,1.072-0.869,1.942-1.942,-6c-1.073,0-1.942-0.87-1.942-1.942C17.395,17.507,18.263,16.637,19.336,16.637z M 19,23.417 c1.738,0,3.148,1.41,3.148,3.147c0,1.738-1.41,3.147-3.148,3.147c-1.739,0-3.148-1.409-3.148-3.147S17.597,23.417,19.336,23.417z M37.414,39.562c-0.404,0.688-1.143,1.094-1.938,1.094H10.159c-0.796,0-1.534-0.406-1.938-1.094 c-0.404-0.688-0.415-1.528-0.028-2.226l3.043-5.47c0.434-0.782,1.29-1.23,2.18-1.145c4.041,0.385,8.583,3.842,12.642,3.688 c2.174-0.083,4.192-0.875,6.114-1.934c1.085-0.6,2.45-0.207,3.052,0.877l2.219,3.982z" /> </g> <text id='scienceEnhancement_amount' x='28' y='28' fill='white' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='polarPower' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(100,200,255)'></rect> <rect id='polarPower_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0'></rect> <text id='polarPower_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> <path fill='rgb(0,0,0,0)' stroke='black' stroke-width='2.5' d='M10 8C8 18 22 18 20 8M15 8 15 25'></path> </svg> <svg id='comfortingNectar' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(122,153,174)'></rect> <rect id='comfortingNectar_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <path fill='rgb(175, 218, 248)' d='M 22 26C -2 39 0 -1 19 8C 13 5 5 25 22 24' transform='translate(5,2) scale(0.8,0.75)'></path> <text id='comfortingNectar_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='invigoratingNectar' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(174,87,79)'></rect> <rect id='invigoratingNectar_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='scale(0.9,0.9) translate(2,4)'> <path fill='rgb(248, 124, 113)' d='M15 25 C 1 26 5 10 8 8L 12 16L15 0L18 16L 22 8C 27 12 28 27 15 25'></path> <path stroke='rgb(174,87,79)' stroke-width='3' d='M15 19 L15 30'></path> </g> <text id='invigoratingNectar_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='motivatingNectar' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(140,116,165)'></rect> <rect id='motivatingNectar_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='translate(1,0) scale(0.95,0.95)'> <path fill='rgb(200, 166, 236)' d='M 10 20 C 0 1 30 0 20 20'></path> <rect fill='rgb(200, 166, 236)' x='10' y='22' width='10' height='4' rx='2'></rect> <path stroke='rgb(140,116,165)' fill='rgb(0,0,0,0)' stroke-width='2' d='M 11 15 L 13 12L 15 15L 17 12L19 15'></path> </g> <text id='motivatingNectar_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='refreshingNectar' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(117,174,113)'></rect> <rect id='refreshingNectar_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='scale(0.9,0.9) translate(2,0)'> <path fill='rgb(167, 248, 162)' d='M 15 9 C -6 36 37 34 15 9' transform='scale(1.25,1.25) translate(-3,-5)'></path> <path fill='rgb(117,174,113)' d='M 15 9 C -6 36 37 34 15 9' transform='scale(0.3,0.3) translate(36,60)'></path> <path fill='rgb(117,174,113)' d='M 15 9 C -6 36 37 34 15 9' transform='scale(0.3,-0.3) translate(36,-72)'></path> </g> <text id='refreshingNectar_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='satisfyingNectar' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(174,148,162)'></rect> <rect id='satisfyingNectar_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <circle cx='15' cy='15' r='10' fill='rgb(248, 211, 231)'></circle> <path stroke='rgb(174,148,162)' stroke-width='3' fill='rgb(0,0,0,0)' d='M 19 4 C 4 25 26 3 11 27'></path> <text id='satisfyingNectar_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='roboChallengeBuff' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(148, 148, 148,0)'></rect> <text id='roboChallengeBuff_amount' x='29' y='29' style='font-family:calibri;font-size:12px' text-anchor='end' fill='rgb(0,0,0)'></text> <rect id='roboChallengeBuff_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0'></rect> <g transform='translate(15,15) scale(0.6,0.6)'> <path fill='rgb(255, 255, 160)' stroke='black' stroke-width='2' d='M -20 -15L 15 -15L 20 -10L 20 10L 15 15L-20 15L-20 -15'></path> <path fill='rgb(0,0,0,0)' stroke='rgb(130,160,130)' stroke-width='4' d='M -17 -14L -17 14M 13 -14L 18 -8L 18 8L 13 14'></path> <circle cx='0' cy='0' r='6' fill='rgb(100,150,100)'></circle> <circle cx='0' cy='0' r='3' fill='rgb(255, 255, 160)'></circle> <rect x='-2.5' y='-9' fill='rgb(100,150,100)' width='5' height='4' transform='rotate(0)'></rect> <rect x='-2.5' y='-9' fill='rgb(100,150,100)' width='5' height='4' transform='rotate(45)'></rect> <rect x='-2.5' y='-9' fill='rgb(100,150,100)' width='5' height='4' transform='rotate(90)'></rect> <rect x='-2.5' y='-9' fill='rgb(100,150,100)' width='5' height='4' transform='rotate(135)'></rect> <rect x='-2.5' y='-9' fill='rgb(100,150,100)' width='5' height='4' transform='rotate(180)'></rect> <rect x='-2.5' y='-9' fill='rgb(100,150,100)' width='5' height='4' transform='rotate(220)'></rect> <rect x='-2.5' y='-9' fill='rgb(100,150,100)' width='5' height='4' transform='rotate(265)'></rect> <rect x='-2.5' y='-9' fill='rgb(100,150,100)' width='5' height='4' transform='rotate(310)'></rect> </g> </svg> <svg id='redDriveBuff' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(148, 148, 148,0)'></rect> <text id='redDriveBuff_amount' x='29' y='29' style='font-family:calibri;font-size:12px' text-anchor='end' fill='rgb(0,0,0)'></text> <rect id='redDriveBuff_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0'></rect> <g transform='translate(15,13) scale(0.5,0.5)'> <path fill='rgb(100,100,100)' stroke='black' stroke-width='2' d='M -20 0L0 -15L20 0L0 15z'></path> <path fill='rgb(85,85,85)' stroke='black' stroke-width='2' d='M0 25L-20 10L-20 0L0 15z'></path> <path fill='rgb(70,70,70)' stroke='black' stroke-width='2' d='M0 25L20 10L20 0L0 15z'></path> <circle cx='0' cy='0' r='8' stroke='rgb(155,0,0)' stroke-width='8' fill='rgb(0,0,0,0)' transform='scale(1,0.75)'></circle> <circle cx='0' cy='-5' r='8' stroke='rgb(255,0,0)' stroke-width='8' fill='rgb(0,0,0,0)' transform='scale(1,0.75)'></circle> <rect x='-19' y='8' width='4' height='8' fill='rgb(255,220,50,0.9)' rx='2'></rect> <rect x='-13' y='11' width='4' height='8' fill='rgb(255,220,50,0.9)' rx='2'></rect> <rect x='-7' y='14' width='4' height='8' fill='rgb(255,220,50,0.9)' rx='2'></rect> </g> </svg> <svg id='whiteDriveBuff' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(148, 148, 148,0)'></rect> <text id='whiteDriveBuff_amount' x='29' y='29' style='font-family:calibri;font-size:12px' text-anchor='end' fill='rgb(0,0,0)'></text> <rect id='whiteDriveBuff_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0'></rect> <g transform='translate(15,13) scale(0.5,0.5)'> <path fill='rgb(100,100,100)' stroke='black' stroke-width='2' d='M -20 0L0 -15L20 0L0 15z'></path> <path fill='rgb(85,85,85)' stroke='black' stroke-width='2' d='M0 25L-20 10L-20 0L0 15z'></path> <path fill='rgb(70,70,70)' stroke='black' stroke-width='2' d='M0 25L20 10L20 0L0 15z'></path> <circle cx='0' cy='0' r='8' stroke='rgb(175,175,175)' stroke-width='8' fill='rgb(0,0,0,0)' transform='scale(1,0.75)'></circle> <circle cx='0' cy='-5' r='8' stroke='rgb(255,255,255)' stroke-width='8' fill='rgb(0,0,0,0)' transform='scale(1,0.75)'></circle> <rect x='-19' y='8' width='4' height='8' fill='rgb(255,220,50,0.9)' rx='2'></rect> <rect x='-13' y='11' width='4' height='8' fill='rgb(255,220,50,0.9)' rx='2'></rect> <rect x='-7' y='14' width='4' height='8' fill='rgb(255,220,50,0.9)' rx='2'></rect> </g> </svg> <svg id='blueDriveBuff' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(148, 148, 148,0)'></rect> <text id='blueDriveBuff_amount' x='29' y='29' style='font-family:calibri;font-size:12px' text-anchor='end' fill='rgb(0,0,0)'></text> <rect id='blueDriveBuff_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0'></rect> <g transform='translate(15,13) scale(0.5,0.5)'> <path fill='rgb(100,100,100)' stroke='black' stroke-width='2' d='M -20 0L0 -15L20 0L0 15z'></path> <path fill='rgb(85,85,85)' stroke='black' stroke-width='2' d='M0 25L-20 10L-20 0L0 15z'></path> <path fill='rgb(70,70,70)' stroke='black' stroke-width='2' d='M0 25L20 10L20 0L0 15z'></path> <circle cx='0' cy='0' r='8' stroke='rgb(0,0,155)' stroke-width='8' fill='rgb(0,0,0,0)' transform='scale(1,0.75)'></circle> <circle cx='0' cy='-5' r='8' stroke='rgb(0,0,255)' stroke-width='8' fill='rgb(0,0,0,0)' transform='scale(1,0.75)'></circle> <rect x='-19' y='8' width='4' height='8' fill='rgb(255,220,50,0.9)' rx='2'></rect> <rect x='-13' y='11' width='4' height='8' fill='rgb(255,220,50,0.9)' rx='2'></rect> <rect x='-7' y='14' width='4' height='8' fill='rgb(255,220,50,0.9)' rx='2'></rect> </g> </svg> <svg id='glitchedDriveBuff' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(148, 148, 148,0)'></rect> <text id='glitchedDriveBuff_amount' x='29' y='29' style='font-family:calibri;font-size:12px' text-anchor='end' fill='rgb(0,0,0)'></text> <rect id='glitchedDriveBuff_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0'></rect> <g transform='translate(15,13) scale(0.5,0.5)'> <path fill='rgb(100,100,100)' stroke='black' stroke-width='2' d='M -20 0L0 -15L20 0L0 15z'></path> <path fill='rgb(85,85,85)' stroke='black' stroke-width='2' d='M0 25L-20 10L-20 0L0 15z'></path> <path fill='rgb(70,70,70)' stroke='black' stroke-width='2' d='M0 25L20 10L20 0L0 15z'></path> <g transform='translate(-3,2) scale(0.9,0.9)'> <circle cx='0' cy='0' r='8' stroke='rgb(195,195,0,0.5)' stroke-width='8' fill='rgb(0,0,0,0)' transform='scale(1,0.75)'></circle> <circle cx='0' cy='-5' r='8' stroke='rgb(255,255,0,0.5)' stroke-width='8' fill='rgb(0,0,0,0)' transform='scale(1,0.5)'></circle> </g> <g transform='translate(3,2) scale(0.9,0.9)'> <circle cx='0' cy='0' r='8' stroke='rgb(189, 100, 180,0.6)' stroke-width='8' fill='rgb(0,0,0,0)' transform='scale(1,0.75)'></circle> <circle cx='0' cy='-5' r='8' stroke='rgb(247, 131, 235,0.6)' stroke-width='8' fill='rgb(0,0,0,0)' transform='scale(1,0.75)'></circle> </g> <g transform='translate(0,-2) scale(0.9,0.9)'> <circle cx='0' cy='0' r='8' stroke='rgb(0, 190, 190,0.4)' stroke-width='8' fill='rgb(0,0,0,0)' transform='scale(1,0.75)'></circle> <circle cx='0' cy='-5' r='8' stroke='rgb(247, 255, 255,0.4)' stroke-width='8' fill='rgb(0,0,0,0)' transform='scale(1,0.75)'></circle> </g> <rect x='-19' y='8' width='4' height='8' fill='rgb(255,220,50,0.9)' rx='2'></rect> <rect x='-13' y='11' width='4' height='8' fill='rgb(255,220,50,0.9)' rx='2'></rect> <rect x='-7' y='14' width='4' height='8' fill='rgb(255,220,50,0.9)' rx='2'></rect> </g> </svg> <svg id='antChallenge' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(148, 148, 148,0)'></rect> <text id='antChallenge_amount' x='29' y='29' style='font-family:calibri;font-size:12px' text-anchor='end' fill='rgb(0,0,0)'></text> <rect id='antChallenge_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0'></rect> <g transform='translate(15,15) scale(0.6,0.6)'> <path fill='rgb(255, 255, 160)' stroke='black' stroke-width='2' d='M -20 -15L 15 -15L 20 -10L 20 10L 15 15L-20 15L-20 -15'></path> <path fill='rgb(0,0,0,0)' stroke='rgb(0,170,0)' stroke-width='4' d='M -17 -14L -17 14M 13 -14L 18 -8L 18 8L 13 14M -8 -4L7 -4L4 -8L-4 -8L-8 -2'></path> <path fill='rgb(50,50,50)' d='M -8 -4L8 -4L8 8L-8 8'></path> <path stroke='rgb(50,50,50)' fill='rgb(0,0,0,0)' stroke-width='2' d='M -3 -5L-7 -10M 3 -5L7 -10'></path> <circle cx='-4' cy='0' r='2' fill='rgb(255,40,40)'></circle> <circle cx='4' cy='0' r='2' fill='rgb(255,40,40)'></circle> </g> </svg> <svg id='dandelionFieldBoost' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(217, 194, 60)'></rect> <rect id='dandelionFieldBoost_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <circle cx='13' cy='11' r='5' fill='rgb(240,240,240)' stroke='#57b5b1' stroke-width='2'></circle> <path d='M16 14C 19 19 19 22 17.5 26.5' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='5'></path> <path d='M16 14C 19 19 19 22 18 25' fill='rgb(0,0,0,0)' stroke='rgb(0,170,0)' stroke-width='2'></path> <text id='dandelionFieldBoost_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='sunflowerFieldBoost' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(217, 194, 60)'></rect> <rect id='sunflowerFieldBoost_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='translate(5,5)scale(0.7,0.7)'> <path d='M-2 0C -10 -18 10 -18 2 0M-2 0C -10 18 10 18 2 0' fill='rgb(255,255,0)' stroke='#57b5b1' stroke-width='2' transform='translate(15,15)'></path> <path d='M-2 0C -10 -18 10 -18 2 0M-2 0C -10 18 10 18 2 0' fill='rgb(255,255,0)' stroke='#57b5b1' stroke-width='2' transform='translate(15,15) rotate(45)'></path> <path d='M-2 0C -10 -18 10 -18 2 0M-2 0C -10 18 10 18 2 0' fill='rgb(255,255,0)' stroke='#57b5b1' stroke-width='2' transform='translate(15,15) rotate(90)'></path> <path d='M-2 0C -10 -18 10 -18 2 0M-2 0C -10 18 10 18 2 0' fill='rgb(255,255,0)' stroke='#57b5b1' stroke-width='2' transform='translate(15,15) rotate(135)'></path> <circle cx='15' cy='15' r='5' fill='rgb(145, 101, 29)'></circle> </g> <text id='sunflowerFieldBoost_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='blueFlowerFieldBoost' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(217, 194, 60)'></rect> <rect id='blueFlowerFieldBoost_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='translate(5,5)scale(0.7,0.7)'> <path d='M-2 0C -10 -18 10 -18 2 0M-2 0C -10 18 10 18 2 0' fill='rgb(0,80,255)' stroke='#57b5b1' stroke-width='2' transform='translate(15,15)'></path> <path d='M-2 0C -10 -18 10 -18 2 0M-2 0C -10 18 10 18 2 0' fill='rgb(0,80,255)' stroke='#57b5b1' stroke-width='2' transform='translate(15,15) rotate(60)'></path> <path d='M-2 0C -10 -18 10 -18 2 0M-2 0C -10 18 10 18 2 0' fill='rgb(0,80,255)' stroke='#57b5b1' stroke-width='2' transform='translate(15,15) rotate(120)'></path> <circle cx='15' cy='15' r='5' fill='rgb(255,255,0)'></circle> </g> <text id='blueFlowerFieldBoost_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='mushroomFieldBoost' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(217, 194, 60)'></rect> <rect id='mushroomFieldBoost_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <path d='M11 17C 2 18 2 4 15 5M19 17C 28 18 29 4 15 5' fill='rgb(255,40,60)' stroke='#57b5b1' stroke-width='2'></path> <path d='M15 18C 2 18 2 4 15 5M15 18C 28 18 29 4 15 5' fill='rgb(255,40,60)'></path> <path d='M11 17C 8 30 22 30 19 17' fill='rgb(240,240,240)' stroke='#57b5b1' stroke-width='2'></path> <circle cx='11' cy='9' r='1.5' fill='rgb(240,240,240)'></circle> <circle cx='26' cy='10' r='2' fill='rgb(240,240,240)' transform='scale(0.8,1)'></circle> <circle cx='15' cy='19' r='1.75' fill='rgb(240,240,240)' transform='scale(1,0.7)'></circle> <text id='mushroomFieldBoost_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='cloverFieldBoost' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(217, 194, 60)'></rect> <rect id='cloverFieldBoost_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='translate(4,-4) rotate(10)'> <path d='M 18 16C 13 19 16 22 20.3 26' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='5'></path> <path d='M 18 16C 13 19 16 22 19 25' fill='rgb(0,0,0,0)' stroke='rgb(0,170,0)' stroke-width='2'></path> <g transform='rotate(24)'> <circle cx='0' cy='0' r='5' fill='rgb(150,220,150)' stroke='#57b5b1' stroke-width='2' transform='translate(13,8) scale(1,0.6)'></circle><circle cx='0' cy='0' r='1.5' fill='rgb(0,150,0)' transform='translate(13,8) scale(1,0.3)'></circle></g> <g transform='rotate(24)'> <circle cx='0' cy='0' r='5' fill='rgb(150,220,150)' stroke='#57b5b1' stroke-width='2' transform='translate(24,8) scale(1,0.6)'></circle><circle cx='0' cy='0' r='1.5' fill='rgb(0,150,0)' transform='translate(24,8) scale(1,0.3)'></circle></g> <g transform='rotate(114)'> <circle cx='0' cy='0' r='5' fill='rgb(150,220,150)' stroke='#57b5b1' stroke-width='2' transform='translate(13,-18) scale(1,0.6)'></circle><circle cx='0' cy='0' r='1.5' fill='rgb(0,150,0)' transform='translate(13,-18) scale(1,0.3)'></circle></g> <g transform='rotate(114)'> <circle cx='0' cy='0' r='5' fill='rgb(150,220,150)' stroke='#57b5b1' stroke-width='2' transform='translate(3,-18) scale(1,0.6)'></circle><circle cx='0' cy='0' r='1.5' fill='rgb(0,150,0)' transform='translate(3,-18) scale(1,0.3)'></circle></g> </g> <text id='cloverFieldBoost_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='strawberryFieldBoost' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(217, 194, 60)'></rect> <rect id='strawberryFieldBoost_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='scale(0.85,0.85) translate(4,5)'> <path d='M 13 24C 2 12 2 4 15 5M15 5C 29 5 22 18 12 24' fill='rgb(255,40,60)' stroke='#57b5b1' stroke-width='2'></path> <g transform='rotate(62) scale(0.7,1) translate(1,-14)'> <path d='M 6.8 4C 13 8 16 5 19 1M 15 -2C 13 8 13 5 14 10' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='4'></path> <path d='M 8 5C 13 8 16 5 18 2M 15 -1C 13 8 13 5 14 9' fill='rgb(0,0,0,0)' stroke='rgb(0,170,0)' stroke-width='2'></path> </g> <circle cx='10' cy='12' r='1' fill='rgb(255,255,40)'></circle><circle cx='18' cy='10' r='1' fill='rgb(255,255,40)'></circle><circle cx='13' cy='19' r='1' fill='rgb(255,255,40)'></circle><circle cx='15' cy='14' r='1' fill='rgb(255,255,40)'></circle> </g> <text id='strawberryFieldBoost_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='spiderFieldBoost' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(217, 194, 60)'></rect> <rect id='spiderFieldBoost_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='scale(0.9,0.9) rotate(-10) translate(-1,3)'> <path d='M 15 12C 8 11 10 11 7 10M 13 14C 8 16 7 14 5 14M 13 18C 8 19 7 19 4 18M 13 21C 11 23 7 22 11 24' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='2.75'></path> <path d='M 15 12C 8 11 10 11 8 10M 13 14C 8 16 7 14 6 14M 13 18C 8 19 7 19 5 18M 13 21C 11 23 7 22 10 24' fill='rgb(0,0,0,0)' stroke='rgb(70,70,70)' stroke-width='1'></path> <g transform='scale(-1,1) translate(-30,0)'> <path d='M 15 12C 8 11 10 11 7 10M 13 14C 8 16 7 14 5 14M 13 18C 8 19 7 19 4 18M 13 21C 11 23 7 22 10 24' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='2.75'></path> <path d='M 15 12C 8 11 10 11 8 10M 13 14C 8 16 7 14 6 14M 13 18C 8 19 7 19 5 18M 13 21C 11 23 7 22 11 24' fill='rgb(0,0,0,0)' stroke='rgb(70,70,70)' stroke-width='1'></path></g> <circle cx='18.85' cy='18' r='4.5' fill='rgb(70,70,70)' transform='scale(0.8,1)' stroke='#57b5b1' stroke-width='1.5'></circle> <circle cx='15' cy='12' r='3' fill='rgb(70,70,70)' stroke='#57b5b1' stroke-width='1.5'></circle> <circle cx='15' cy='15' r='1.9' fill='rgb(70,70,70)'></circle></g> <text id='spiderFieldBoost_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='bambooFieldBoost' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(217, 194, 60)'></rect> <rect id='bambooFieldBoost_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <path d='M 13 4.5L12 23.5' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='6'></path> <path d='M 13 7L12 22' fill='rgb(0,0,0,0)' stroke='rgb(120,200,70)' stroke-width='3'></path> <path d='M 11 11L 14.5 9M 11 15L 14.2 13M 10.5 20L 14 18' fill='rgb(0,0,0,0)' stroke='rgb(70,150,80)' stroke-width='1'></path> <circle cx='13' cy='9' r='1.6' fill='rgb(70,150,80)' transform='scale(1,0.7)'></circle> <g transform='scale(0.75,0.75) translate(12.5,8) rotate(5)'> <path d='M 13 4.5L12 23.5' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='6'></path> <path d='M 13 7L12 22' fill='rgb(0,0,0,0)' stroke='rgb(120,200,70)' stroke-width='3'></path> <path d='M 11 11L 14.5 9M 11 15L 14.2 13M 10.5 20L 14 18' fill='rgb(0,0,0,0)' stroke='rgb(70,150,80)' stroke-width='1'></path> <circle cx='13' cy='9' r='1.6' fill='rgb(70,150,80)' transform='scale(1,0.7)'></circle> </g> <text id='bambooFieldBoost_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='pineapplePatchBoost' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(217, 194, 60)'></rect> <rect id='pineapplePatchBoost_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='translate(-1,3) rotate(-4)'> <path d='M 10.5 5.5L15 9M 20.5 5.5L15 9M 14 1L15 9M 17.5 2L15 9' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='3'></path> <path d='M 11 6L15 9M 20 6L15 9M 14 2L15 9M 17 3L15 9' fill='rgb(0,0,0,0)' stroke='rgb(0,220,00)' stroke-width='1.5'></path> <circle cx='15' cy='13' r='5.5' fill='rgb(255,220,0)' transform='scale(1,1.25)' stroke='#57b5b1' stroke-width='1'></circle> <path d='M 10.5 13C 13 15 17 15 19.5 13M 10 18C 13 20.5 17 20.5 20 18M 13 12C 13 12 15 18 13 21M 16 12C 17 13 18 18 16 21' fill='rgb(0,0,0,0)' stroke='rgb(212, 177, 49)' stroke-width='1'></path> </g> <text id='pineapplePatchBoost_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='stumpFieldBoost' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(217, 194, 60)'></rect> <rect id='stumpFieldBoost_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='scale(1,0.9) scale(0.93,0.93) rotate(-7) translate(-1,5)'> <path d='M 8 9L 8 15 L 4 22L 10 18L 13 23L 18 18L 25 22L22 15L22 9C 22 4 8 4 8 9' fill='rgb(184, 116, 39)' stroke='#57b5b1' stroke-width='1'></path> <circle cx='15' cy='18' r='5' fill='rgb(245, 223, 101)' transform='scale(1,0.5)'></circle> <circle cx='15' cy='18' r='4' fill='rgb(207, 148, 54)' transform='scale(1,0.5)'></circle> <circle cx='15' cy='18' r='2.5' fill='rgb(245, 223, 101)' transform='scale(1,0.5)'></circle> <circle cx='15' cy='18' r='1' fill='rgb(207, 148, 54)' transform='scale(1,0.5)'></circle></g> <text id='stumpFieldBoost_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='cactusFieldBoost' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(217, 194, 60)'></rect> <rect id='cactusFieldBoost_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <path d='M 13 18L7 18L 7 11M 16 15L 22 15L 22 7' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='3'></path> <circle cx='30' cy='12' r='8' fill='rgb(0,230,50)' transform='scale(0.5,1.2)' stroke='#57b5b1' stroke-width='1'></circle> <path d='M 13 18L7 18L 7 12M 16 15L 22 15L 22 8' fill='rgb(0,0,0,0)' stroke='rgb(0,230,50)' stroke-width='2'></path> <path d='M 17 21L 19 20M 12 19L 11 21M 7 19L 7 21M 8 12L 9 10M 20 14L 21 12M 15 17L 14 15M 14 9L 12 10M 17 7L 16 5' fill='rgb(0,0,0,0)' stroke='rgb(255,255,200)' stroke-width='1'></path> <text id='cactusFieldBoost_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='pumpkinPatchBoost' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(217, 194, 60)'></rect> <rect id='pumpkinPatchBoost_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <path d='M 15 10C 15 7 16 6 16.75 5.25' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='3.5'></path> <circle cx='15' cy='19' r='8' fill='rgb(242, 191, 51)' transform='scale(1,0.9)' stroke='#57b5b1' stroke-width='1'></circle> <path d='M 15 10C 15 7 16 6 16 6' fill='rgb(0,0,0,0)' stroke='rgb(171, 118, 19)' stroke-width='2'></path> <path d='M 13 13C 11 13 11 21 13 21M 17 13C 19 13 19 21 17 21' fill='rgb(0,0,0,0)' stroke='rgb(0,0,0,0.2)' stroke-width='1'></path> <text id='pumpkinPatchBoost_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='pineTreeForestBoost' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(217, 194, 60)'></rect> <rect id='pineTreeForestBoost_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='scale(0.9,1) rotate(-5) translate(1,-1)'> <path d='M 15 22L 15 28' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='5'></path> <path d='M 15 22L 15 27' fill='rgb(0,0,0,0)' stroke='rgb(171, 118, 19)' stroke-width='3'></path> <path d='M 15 7L 11 12L 13 12L 8 18L 12 18L 7 23L15 23' fill='rgb(0,160,0)' stroke='#57b5b1' stroke-width='1'></path> <path d='M 15 7L 11 12L 13 12L 8 18L 12 18L 7 23L15 23' fill='rgb(0,160,0)' stroke='#57b5b1' stroke-width='1' transform='translate(-15,0) scale(-1,1) translate(-44.75,0)'></path></g> <text id='pineTreeForestBoost_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='roseFieldBoost' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(217, 194, 60)'></rect> <rect id='roseFieldBoost_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <path d='M 16 16C 17 18 17 22 15.95 25M 11 17L 17 18L 21.5 12' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='3.5'></path> <circle cx='15' cy='9' r='5' fill='rgb(237, 23, 23)' transform='scale(1,1.2)' stroke='#57b5b1' stroke-width='1'></circle> <circle cx='14' cy='10' r='3' fill='rgb(237, 23, 23)' transform='scale(1,0.9)' stroke='rgb(0,0,0,0.2)' stroke-width='0.5'></circle> <circle cx='15' cy='9' r='3' fill='rgb(237, 23, 23)' transform='scale(1,0.9)' stroke='rgb(0,0,0,0.2)' stroke-width='0.5'></circle> <circle cx='14.5' cy='8.5' r='2' fill='rgb(237, 23, 23)' transform='scale(1,0.9)' stroke='rgb(0,0,0,0.2)' stroke-width='0.5'></circle> <circle cx='15.5' cy='9.5' r='1' fill='rgb(237, 23, 23)' transform='scale(1,0.9)' stroke='rgb(0,0,0,0.2)' stroke-width='0.5'></circle> <path d='M 16 16C 17 18 17 22 16 24M 12 17L 17 18L 21 13' fill='rgb(0,0,0,0)' stroke='rgb(0,140,0)' stroke-width='2'></path> <text id='roseFieldBoost_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='mountainTopFieldBoost' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(217, 194, 60)'></rect> <rect id='mountainTopFieldBoost_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='rotate(-10) scale(1.2,1.2) translate(-4,-1)'> <path d='M 6 20L 11 9L 15 17L 18 12L 22 20z' fill='rgb(100,100,100)' stroke='#57b5b1' stroke-width='1'></path> <path d='M 9.5 14L 11 10L 12.75 14M 17 15L 18 13L 19 15' fill='rgb(240,240,245)'></path> </g> <text id='mountainTopFieldBoost_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='coconutFieldBoost' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(217, 194, 60)'></rect> <rect id='coconutFieldBoost_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <circle cx='15' cy='15' r='8' fill='rgb(168, 86, 18)' stroke='#57b5b1' stroke-width='1'></circle> <circle cx='20' cy='14' r='1.25' fill='rgb(0,0,0,0.3)'></circle> <circle cx='15' cy='13' r='1.25' fill='rgb(0,0,0,0.3)'></circle> <circle cx='17' cy='17' r='1.25' fill='rgb(0,0,0,0.3)'></circle> <text id='coconutFieldBoost_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='pepperPatchBoost' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(217, 194, 60)'></rect> <rect id='pepperPatchBoost_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='scale(1.1,1.1) translate(0,-5)'> <path d='M 6 20C 11 18 12 16 13 14L 15 15C 15 22 6 22 6 20' fill='rgb(232, 42, 39)' stroke='#57b5b1' stroke-width='1'></path> <path d='M 14 14.5L 15.5 11.5' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='2.5'></path> <path d='M 14 14.5L 15 12' fill='rgb(0,0,0,0)' stroke='rgb(12, 173, 12)' stroke-width='1.5'></path> </g> <g transform='scale(1.5,1.5) translate(4,-8) rotate(14)'> <path d='M 6 20C 11 18 12 16 13 14L 15 15C 15 22 6 22 6 20' fill='rgb(252, 13, 13)' stroke='#57b5b1' stroke-width='1'></path> <path d='M 14 14.5L 15.5 11.5' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='2.5'></path> <path d='M 14 14.5L 15 12' fill='rgb(0,0,0,0)' stroke='rgb(12, 173, 12)' stroke-width='1.5'></path> </g> <text id='pepperPatchBoost_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='dandelionFieldWinds' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(230,230,255)'></rect> <rect id='dandelionFieldWinds_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <circle cx='13' cy='11' r='5' fill='rgb(240,240,240)' stroke='#57b5b1' stroke-width='2'></circle> <path d='M16 14C 19 19 19 22 17.5 26.5' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='5'></path> <path d='M16 14C 19 19 19 22 18 25' fill='rgb(0,0,0,0)' stroke='rgb(0,170,0)' stroke-width='2'></path> <text id='dandelionFieldWinds_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='sunflowerFieldWinds' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(230,230,255)'></rect> <rect id='sunflowerFieldWinds_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='translate(5,5)scale(0.7,0.7)'> <path d='M-2 0C -10 -18 10 -18 2 0M-2 0C -10 18 10 18 2 0' fill='rgb(255,255,0)' stroke='#57b5b1' stroke-width='2' transform='translate(15,15)'></path> <path d='M-2 0C -10 -18 10 -18 2 0M-2 0C -10 18 10 18 2 0' fill='rgb(255,255,0)' stroke='#57b5b1' stroke-width='2' transform='translate(15,15) rotate(45)'></path> <path d='M-2 0C -10 -18 10 -18 2 0M-2 0C -10 18 10 18 2 0' fill='rgb(255,255,0)' stroke='#57b5b1' stroke-width='2' transform='translate(15,15) rotate(90)'></path> <path d='M-2 0C -10 -18 10 -18 2 0M-2 0C -10 18 10 18 2 0' fill='rgb(255,255,0)' stroke='#57b5b1' stroke-width='2' transform='translate(15,15) rotate(135)'></path> <circle cx='15' cy='15' r='5' fill='rgb(145, 101, 29)'></circle> </g> <text id='sunflowerFieldWinds_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='blueFlowerFieldWinds' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(230,230,255)'></rect> <rect id='blueFlowerFieldWinds_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='translate(5,5)scale(0.7,0.7)'> <path d='M-2 0C -10 -18 10 -18 2 0M-2 0C -10 18 10 18 2 0' fill='rgb(0,80,255)' stroke='#57b5b1' stroke-width='2' transform='translate(15,15)'></path> <path d='M-2 0C -10 -18 10 -18 2 0M-2 0C -10 18 10 18 2 0' fill='rgb(0,80,255)' stroke='#57b5b1' stroke-width='2' transform='translate(15,15) rotate(60)'></path> <path d='M-2 0C -10 -18 10 -18 2 0M-2 0C -10 18 10 18 2 0' fill='rgb(0,80,255)' stroke='#57b5b1' stroke-width='2' transform='translate(15,15) rotate(120)'></path> <circle cx='15' cy='15' r='5' fill='rgb(255,255,0)'></circle> </g> <text id='blueFlowerFieldWinds_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='mushroomFieldWinds' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(230,230,255)'></rect> <rect id='mushroomFieldWinds_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <path d='M11 17C 2 18 2 4 15 5M19 17C 28 18 29 4 15 5' fill='rgb(255,40,60)' stroke='#57b5b1' stroke-width='2'></path> <path d='M15 18C 2 18 2 4 15 5M15 18C 28 18 29 4 15 5' fill='rgb(255,40,60)'></path> <path d='M11 17C 8 30 22 30 19 17' fill='rgb(240,240,240)' stroke='#57b5b1' stroke-width='2'></path> <circle cx='11' cy='9' r='1.5' fill='rgb(240,240,240)'></circle> <circle cx='26' cy='10' r='2' fill='rgb(240,240,240)' transform='scale(0.8,1)'></circle> <circle cx='15' cy='19' r='1.75' fill='rgb(240,240,240)' transform='scale(1,0.7)'></circle> <text id='mushroomFieldWinds_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='cloverFieldWinds' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(230,230,255)'></rect> <rect id='cloverFieldWinds_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='translate(4,-4) rotate(10)'> <path d='M 18 16C 13 19 16 22 20.3 26' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='5'></path> <path d='M 18 16C 13 19 16 22 19 25' fill='rgb(0,0,0,0)' stroke='rgb(0,170,0)' stroke-width='2'></path> <g transform='rotate(24)'> <circle cx='0' cy='0' r='5' fill='rgb(150,220,150)' stroke='#57b5b1' stroke-width='2' transform='translate(13,8) scale(1,0.6)'></circle><circle cx='0' cy='0' r='1.5' fill='rgb(0,150,0)' transform='translate(13,8) scale(1,0.3)'></circle></g> <g transform='rotate(24)'> <circle cx='0' cy='0' r='5' fill='rgb(150,220,150)' stroke='#57b5b1' stroke-width='2' transform='translate(24,8) scale(1,0.6)'></circle><circle cx='0' cy='0' r='1.5' fill='rgb(0,150,0)' transform='translate(24,8) scale(1,0.3)'></circle></g> <g transform='rotate(114)'> <circle cx='0' cy='0' r='5' fill='rgb(150,220,150)' stroke='#57b5b1' stroke-width='2' transform='translate(13,-18) scale(1,0.6)'></circle><circle cx='0' cy='0' r='1.5' fill='rgb(0,150,0)' transform='translate(13,-18) scale(1,0.3)'></circle></g> <g transform='rotate(114)'> <circle cx='0' cy='0' r='5' fill='rgb(150,220,150)' stroke='#57b5b1' stroke-width='2' transform='translate(3,-18) scale(1,0.6)'></circle><circle cx='0' cy='0' r='1.5' fill='rgb(0,150,0)' transform='translate(3,-18) scale(1,0.3)'></circle></g> </g> <text id='cloverFieldWinds_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='strawberryFieldWinds' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(230,230,255)'></rect> <rect id='strawberryFieldWinds_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='scale(0.85,0.85) translate(4,5)'> <path d='M 13 24C 2 12 2 4 15 5M15 5C 29 5 22 18 12 24' fill='rgb(255,40,60)' stroke='#57b5b1' stroke-width='2'></path> <g transform='rotate(62) scale(0.7,1) translate(1,-14)'> <path d='M 6.8 4C 13 8 16 5 19 1M 15 -2C 13 8 13 5 14 10' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='4'></path> <path d='M 8 5C 13 8 16 5 18 2M 15 -1C 13 8 13 5 14 9' fill='rgb(0,0,0,0)' stroke='rgb(0,170,0)' stroke-width='2'></path> </g> <circle cx='10' cy='12' r='1' fill='rgb(255,255,40)'></circle><circle cx='18' cy='10' r='1' fill='rgb(255,255,40)'></circle><circle cx='13' cy='19' r='1' fill='rgb(255,255,40)'></circle><circle cx='15' cy='14' r='1' fill='rgb(255,255,40)'></circle> </g> <text id='strawberryFieldWinds_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='spiderFieldWinds' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(230,230,255)'></rect> <rect id='spiderFieldWinds_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='scale(0.9,0.9) rotate(-10) translate(-1,3)'> <path d='M 15 12C 8 11 10 11 7 10M 13 14C 8 16 7 14 5 14M 13 18C 8 19 7 19 4 18M 13 21C 11 23 7 22 11 24' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='2.75'></path> <path d='M 15 12C 8 11 10 11 8 10M 13 14C 8 16 7 14 6 14M 13 18C 8 19 7 19 5 18M 13 21C 11 23 7 22 10 24' fill='rgb(0,0,0,0)' stroke='rgb(70,70,70)' stroke-width='1'></path> <g transform='scale(-1,1) translate(-30,0)'> <path d='M 15 12C 8 11 10 11 7 10M 13 14C 8 16 7 14 5 14M 13 18C 8 19 7 19 4 18M 13 21C 11 23 7 22 10 24' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='2.75'></path> <path d='M 15 12C 8 11 10 11 8 10M 13 14C 8 16 7 14 6 14M 13 18C 8 19 7 19 5 18M 13 21C 11 23 7 22 11 24' fill='rgb(0,0,0,0)' stroke='rgb(70,70,70)' stroke-width='1'></path></g> <circle cx='18.85' cy='18' r='4.5' fill='rgb(70,70,70)' transform='scale(0.8,1)' stroke='#57b5b1' stroke-width='1.5'></circle> <circle cx='15' cy='12' r='3' fill='rgb(70,70,70)' stroke='#57b5b1' stroke-width='1.5'></circle> <circle cx='15' cy='15' r='1.9' fill='rgb(70,70,70)'></circle></g> <text id='spiderFieldWinds_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='bambooFieldWinds' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(230,230,255)'></rect> <rect id='bambooFieldWinds_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <path d='M 13 4.5L12 23.5' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='6'></path> <path d='M 13 7L12 22' fill='rgb(0,0,0,0)' stroke='rgb(120,200,70)' stroke-width='3'></path> <path d='M 11 11L 14.5 9M 11 15L 14.2 13M 10.5 20L 14 18' fill='rgb(0,0,0,0)' stroke='rgb(70,150,80)' stroke-width='1'></path> <circle cx='13' cy='9' r='1.6' fill='rgb(70,150,80)' transform='scale(1,0.7)'></circle> <g transform='scale(0.75,0.75) translate(12.5,8) rotate(5)'> <path d='M 13 4.5L12 23.5' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='6'></path> <path d='M 13 7L12 22' fill='rgb(0,0,0,0)' stroke='rgb(120,200,70)' stroke-width='3'></path> <path d='M 11 11L 14.5 9M 11 15L 14.2 13M 10.5 20L 14 18' fill='rgb(0,0,0,0)' stroke='rgb(70,150,80)' stroke-width='1'></path> <circle cx='13' cy='9' r='1.6' fill='rgb(70,150,80)' transform='scale(1,0.7)'></circle> </g> <text id='bambooFieldWinds_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='pineapplePatchWinds' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(230,230,255)'></rect> <rect id='pineapplePatchWinds_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='translate(-1,3) rotate(-4)'> <path d='M 10.5 5.5L15 9M 20.5 5.5L15 9M 14 1L15 9M 17.5 2L15 9' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='3'></path> <path d='M 11 6L15 9M 20 6L15 9M 14 2L15 9M 17 3L15 9' fill='rgb(0,0,0,0)' stroke='rgb(0,220,00)' stroke-width='1.5'></path> <circle cx='15' cy='13' r='5.5' fill='rgb(255,220,0)' transform='scale(1,1.25)' stroke='#57b5b1' stroke-width='1'></circle> <path d='M 10.5 13C 13 15 17 15 19.5 13M 10 18C 13 20.5 17 20.5 20 18M 13 12C 13 12 15 18 13 21M 16 12C 17 13 18 18 16 21' fill='rgb(0,0,0,0)' stroke='rgb(212, 177, 49)' stroke-width='1'></path> </g> <text id='pineapplePatchWinds_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='stumpFieldWinds' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(230,230,255)'></rect> <rect id='stumpFieldWinds_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='scale(1,0.9) scale(0.93,0.93) rotate(-7) translate(-1,5)'> <path d='M 8 9L 8 15 L 4 22L 10 18L 13 23L 18 18L 25 22L22 15L22 9C 22 4 8 4 8 9' fill='rgb(184, 116, 39)' stroke='#57b5b1' stroke-width='1'></path> <circle cx='15' cy='18' r='5' fill='rgb(245, 223, 101)' transform='scale(1,0.5)'></circle> <circle cx='15' cy='18' r='4' fill='rgb(207, 148, 54)' transform='scale(1,0.5)'></circle> <circle cx='15' cy='18' r='2.5' fill='rgb(245, 223, 101)' transform='scale(1,0.5)'></circle> <circle cx='15' cy='18' r='1' fill='rgb(207, 148, 54)' transform='scale(1,0.5)'></circle></g> <text id='stumpFieldWinds_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='cactusFieldWinds' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(230,230,255)'></rect> <rect id='cactusFieldWinds_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <path d='M 13 18L7 18L 7 11M 16 15L 22 15L 22 7' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='3'></path> <circle cx='30' cy='12' r='8' fill='rgb(0,230,50)' transform='scale(0.5,1.2)' stroke='#57b5b1' stroke-width='1'></circle> <path d='M 13 18L7 18L 7 12M 16 15L 22 15L 22 8' fill='rgb(0,0,0,0)' stroke='rgb(0,230,50)' stroke-width='2'></path> <path d='M 17 21L 19 20M 12 19L 11 21M 7 19L 7 21M 8 12L 9 10M 20 14L 21 12M 15 17L 14 15M 14 9L 12 10M 17 7L 16 5' fill='rgb(0,0,0,0)' stroke='rgb(255,255,200)' stroke-width='1'></path> <text id='cactusFieldWinds_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='pumpkinPatchWinds' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(230,230,255)'></rect> <rect id='pumpkinPatchWinds_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <path d='M 15 10C 15 7 16 6 16.75 5.25' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='3.5'></path> <circle cx='15' cy='19' r='8' fill='rgb(242, 191, 51)' transform='scale(1,0.9)' stroke='#57b5b1' stroke-width='1'></circle> <path d='M 15 10C 15 7 16 6 16 6' fill='rgb(0,0,0,0)' stroke='rgb(171, 118, 19)' stroke-width='2'></path> <path d='M 13 13C 11 13 11 21 13 21M 17 13C 19 13 19 21 17 21' fill='rgb(0,0,0,0)' stroke='rgb(0,0,0,0.2)' stroke-width='1'></path> <text id='pumpkinPatchWinds_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='pineTreeForestWinds' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(230,230,255)'></rect> <rect id='pineTreeForestWinds_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='scale(0.9,1) rotate(-5) translate(1,-1)'> <path d='M 15 22L 15 28' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='5'></path> <path d='M 15 22L 15 27' fill='rgb(0,0,0,0)' stroke='rgb(171, 118, 19)' stroke-width='3'></path> <path d='M 15 7L 11 12L 13 12L 8 18L 12 18L 7 23L15 23' fill='rgb(0,160,0)' stroke='#57b5b1' stroke-width='1'></path> <path d='M 15 7L 11 12L 13 12L 8 18L 12 18L 7 23L15 23' fill='rgb(0,160,0)' stroke='#57b5b1' stroke-width='1' transform='translate(-15,0) scale(-1,1) translate(-44.75,0)'></path></g> <text id='pineTreeForestWinds_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='roseFieldWinds' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(230,230,255)'></rect> <rect id='roseFieldWinds_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <path d='M 16 16C 17 18 17 22 15.95 25M 11 17L 17 18L 21.5 12' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='3.5'></path> <circle cx='15' cy='9' r='5' fill='rgb(237, 23, 23)' transform='scale(1,1.2)' stroke='#57b5b1' stroke-width='1'></circle> <circle cx='14' cy='10' r='3' fill='rgb(237, 23, 23)' transform='scale(1,0.9)' stroke='rgb(0,0,0,0.2)' stroke-width='0.5'></circle> <circle cx='15' cy='9' r='3' fill='rgb(237, 23, 23)' transform='scale(1,0.9)' stroke='rgb(0,0,0,0.2)' stroke-width='0.5'></circle> <circle cx='14.5' cy='8.5' r='2' fill='rgb(237, 23, 23)' transform='scale(1,0.9)' stroke='rgb(0,0,0,0.2)' stroke-width='0.5'></circle> <circle cx='15.5' cy='9.5' r='1' fill='rgb(237, 23, 23)' transform='scale(1,0.9)' stroke='rgb(0,0,0,0.2)' stroke-width='0.5'></circle> <path d='M 16 16C 17 18 17 22 16 24M 12 17L 17 18L 21 13' fill='rgb(0,0,0,0)' stroke='rgb(0,140,0)' stroke-width='2'></path> <text id='roseFieldWinds_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='mountainTopFieldWinds' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(230,230,255)'></rect> <rect id='mountainTopFieldWinds_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='rotate(-10) scale(1.2,1.2) translate(-4,-1)'> <path d='M 6 20L 11 9L 15 17L 18 12L 22 20z' fill='rgb(100,100,100)' stroke='#57b5b1' stroke-width='1'></path> <path d='M 9.5 14L 11 10L 12.75 14M 17 15L 18 13L 19 15' fill='rgb(240,240,245)'></path> </g> <text id='mountainTopFieldWinds_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='coconutFieldWinds' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(230,230,255)'></rect> <rect id='coconutFieldWinds_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <circle cx='15' cy='15' r='8' fill='rgb(168, 86, 18)' stroke='#57b5b1' stroke-width='1'></circle> <circle cx='20' cy='14' r='1.25' fill='rgb(0,0,0,0.3)'></circle> <circle cx='15' cy='13' r='1.25' fill='rgb(0,0,0,0.3)'></circle> <circle cx='17' cy='17' r='1.25' fill='rgb(0,0,0,0.3)'></circle> <text id='coconutFieldWinds_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='pepperPatchWinds' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(230,230,255)'></rect> <rect id='pepperPatchWinds_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <g transform='scale(1.1,1.1) translate(0,-5)'> <path d='M 6 20C 11 18 12 16 13 14L 15 15C 15 22 6 22 6 20' fill='rgb(232, 42, 39)' stroke='#57b5b1' stroke-width='1'></path> <path d='M 14 14.5L 15.5 11.5' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='2.5'></path> <path d='M 14 14.5L 15 12' fill='rgb(0,0,0,0)' stroke='rgb(12, 173, 12)' stroke-width='1.5'></path> </g> <g transform='scale(1.5,1.5) translate(4,-8) rotate(14)'> <path d='M 6 20C 11 18 12 16 13 14L 15 15C 15 22 6 22 6 20' fill='rgb(252, 13, 13)' stroke='#57b5b1' stroke-width='1'></path> <path d='M 14 14.5L 15.5 11.5' fill='rgb(0,0,0,0)' stroke='#57b5b1' stroke-width='2.5'></path> <path d='M 14 14.5L 15 12' fill='rgb(0,0,0,0)' stroke='rgb(12, 173, 12)' stroke-width='1.5'></path> </g> <text id='pepperPatchWinds_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> </svg> <svg id='bearMorph' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(200,200,200)'></rect> <rect id='bearMorph_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <text id='bearMorph_amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> <g transform=' translate(-7.5,-7.5) scale(1.5,1.5) '> <rect x='9' y='10' width='12' height='12' fill='rgb(66, 66, 66)'></rect> <path fill='rgb(120, 120, 120)' d='M9 22 C11 10 14 10 14 19C13 20 13 20 16 19C16 10 19 10 21 22'></path> <circle cx='10' cy='10' r='3' fill='rgb(66, 66, 66)'></circle><circle cx='20' cy='10' r='3' fill='rgb(66, 66, 66)'></circle> <circle cx='13' cy='15' r='0.7' fill='rgb(99, 79, 36)'></circle><circle cx='17' cy='15' r='0.7' fill='rgb(99, 79, 36)'></circle> </g> </svg> <svg id='bearMorph_' style='width:30px;height:30px;display:none'> <rect width='30' height='30' fill='rgb(255,215,0,0.8)'></rect> <rect id='bearMorph__cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect> <text id='bearMorph__amount' x='28' y='28' style='font-family:calibri;font-size:11px;' text-anchor='end'></text> <g transform=' translate(-7.5,-7.5) scale(1.5,1.5) '> <rect x='9' y='10' width='12' height='12' fill='rgb(66, 66, 66)'></rect> <path fill='rgb(120, 120, 120)' d='M9 22 C11 10 14 10 14 19C13 20 13 20 16 19C16 10 19 10 21 22'></path> <circle cx='10' cy='10' r='3' fill='rgb(66, 66, 66)'></circle><circle cx='20' cy='10' r='3' fill='rgb(66, 66, 66)'></circle> <circle cx='13' cy='15' r='0.7' fill='rgb(99, 79, 36

HTML Online Editor & Compiler

Write, Run & Share HTML code online using OneCompiler's HTML online Code editor for free. It's one of the robust, feature-rich online Code editor for HTML language, running on the latest version HTML5. Getting started with the OneCompiler's HTML compiler is simple and pretty fast. The editor shows sample boilerplate code when you choose language as HTML. You can also specify the stylesheet information in styles.css tab and scripts information in scripts.js tab and start coding.

About HTML

HTML(Hyper Text Markup language) is the standard markup language for Web pages, was created by Berners-Lee in the year 1991. Almost every web page over internet might be using HTML.

Syntax help

Fundamentals

  • Any HTML document must start with document declaration <!DOCTYPE html>
  • HTML documents begin with <html> and ends with </html>
  • Headings are defined with <h1> to <h6> where <h1> is the highest important heading and <h6> is the least important sub-heading.
  • Paragraphs are defined in <p>..</p> tag.
  • Links are defined in <a> tag.

    Example:

    <a href="https://onecompiler.com/html">HTML online compiler</a>
  • Images are defined in <img> tag, where src attribute consists of image name.
  • Buttons are defined in <button>..</button> tag
  • Lists are defined in <ul> for unordered/bullet list and <ol> for ordered/number list, and the list items are defined in <li>.

HTML Elements and Attributes

  • HTML element is everything present from start tag to end tag.
  • The text present between start and end tag is called HTML element content.
  • Anything can be a tagname but it's preferred to put the meaningful title to the content present as tag name.
  • Do not forget the end tag.
  • Elements with no content are called empty elements.
  • Elements can have attributes which provides additional information about the element.
  • In the below example, href is an attribute and a is the tag name.

    Example:

    <a href="https://onecompiler.com/html">HTML online compiler</a>

CSS

CSS(cascading style sheets) describes how HTML elements will look on the web page like color, font-style, font-size, background color etc.

Example:

Below is a sample style sheet which displays heading in green and in Candara font with padding space of 25px.

body{
  padding: 25px;
}
.title {
	color: #228B22;
	font-family: Candara;
}

HTML Tables

  • HTML Tables are defined in <table> tag.
  • Table row should be defined in <tr> tag
  • Table header should be defined in <th> tag
  • Table data should be defined in <td> tag
  • Table caption should be defined in <caption> tag

HTML-Javascript

  • Javascript is used in HTML pages to make them more interactive.
  • <script> is the tag used to write scripts in HTML
  • You can either reference a external script or write script code in this tag.

Example

<script src="script.js"></script>