Crazy bee moving randomly on the page. Copy and paste inside bricks code block element.
<style>
#bee {
transition: transform 5s linear;
}
</style>
<!-- Your bee SVG code here -->
<svg id="bee" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="80" height="80">
<g id="Art">
<g id="Outline">
<g id="Black">
<path d="M26.375,18.08c-0,0 -27.514,40.361 -18.342,139.575c3.601,5.57 24.395,27.028 68.402,24.589c-2.902,8.778 -13.057,67.788 57.546,83.882c5.32,5.852 9.188,-5.365 12.09,51.694c3.385,-13.168 5.319,-24.872 5.319,-24.872c0,0 12.09,-18.044 17.893,-22.921c7.737,-2.438 27.08,-10.729 45.94,-5.364c7.738,-2.439 31.917,-15.606 34.818,-32.675c2.902,-17.069 2.418,-29.749 2.418,-29.749l-15.474,-22.433c-0,-0 25.146,9.753 49.809,2.926c24.663,-6.828 32.883,-10.241 35.785,-18.532c2.901,-8.291 12.573,-79.492 -7.254,-109.729c-8.221,0.488 -69.636,3.902 -116.544,61.448c-5.319,-0.487 -17.409,-2.926 -28.047,-7.803c-0.968,-2.438 -2.418,-4.876 -2.418,-4.876c-0,-0 -5.32,-3.902 -9.672,-8.779c-3.385,-0.975 -14.024,7.803 -30.466,10.242c-5.319,-10.242 -21.278,-56.084 -85.111,-86.808c-6.286,-1.951 -10.656,-2.552 -16.692,0.186l-0,-0.001Z" style="fill-rule:nonzero;" />
</g>
</g>
<g id="Wings">
<g id="Left_x5F_Wing">
<path d="M210.871,117.547c0,0 14.184,-42.916 98.003,-57.222c5.159,11.705 9.028,26.66 12.251,38.365c1.29,13.004 3.869,29.26 -3.868,60.472c-5.803,5.852 -15.476,14.305 -19.989,15.606c-4.513,1.301 -33.528,13.006 -56.74,-0.65c2.579,-1.95 3.868,-2.6 4.513,-5.852c0,-7.153 -0.644,-14.956 -3.224,-25.359c-1.289,-6.503 -1.289,-13.655 -1.289,-13.655l-3.23,-8.457c-0,0 -10.958,3.248 -26.433,-3.248l0.006,0Z" style="fill:url(#_Linear1);fill-rule:nonzero;" />
</g>
<g id="Right_x5F_Wing">
<path d="M123.826,105.843c-0,-0 -9.027,3.901 -17.409,8.453c-3.224,0.651 -6.448,0 -6.448,0l-1.935,4.552l0,2.602c0,-0 -5.158,4.552 -8.382,10.404c-1.289,7.803 -0.645,26.66 5.158,32.512c-3.224,5.852 -9.027,9.103 -9.027,9.103c0,-0 -36.752,6.502 -68.347,-18.857c-3.868,-11.704 -9.671,-36.413 -4.513,-64.374c5.158,-27.961 11.612,-59.185 23.864,-59.836c12.251,1.951 39.334,3.251 87.045,75.432l-0.006,0.009Z" style="fill:url(#_Linear2);fill-rule:nonzero;" />
</g>
</g>
<g id="Eyes">
<g id="Left_x5F_Eye">
<path d="M174.119,116.24c-0,0 12.895,5.202 20.632,6.503c7.738,1.301 10.316,-0 25.147,5.202c7.737,-0.644 10.319,-3.248 10.319,-3.248c0,-0 4.513,1.95 5.158,8.453c0.645,6.503 7.092,32.512 0,39.665c-3.868,2.602 -5.803,4.552 -7.737,6.503c-5.803,1.951 -11.606,-1.3 -17.409,-3.901c-6.447,0.65 -19.344,5.202 -24.501,-1.301c-3.869,-9.104 -6.449,-16.256 -11.606,-22.758c5.157,-6.503 3.868,-9.753 3.868,-9.753c0,-0 1.287,-9.774 -3.868,-25.379l-0.003,0.014Z" style="fill:#fff;fill-rule:nonzero;" />
</g>
<g id="Right_x5F_Eye">
<path d="M163.799,107.14c-0,0 11.606,18.207 9.027,33.162c-5.159,13.005 -10.317,23.409 -20.633,27.311c-10.961,4.552 -13.54,10.404 -22.567,8.453c-9.027,-1.951 -25.146,-5.853 -31.595,-20.158c0,-9.753 -3.223,-16.906 0.646,-27.96c5.803,-6.503 14.829,-10.405 22.567,-13.656c7.737,-3.25 21.277,-7.802 25.146,-11.704c7.099,-1.951 11.606,-1.951 17.409,4.555l-0,-0.003Z" style="fill:#fff;fill-rule:nonzero;" />
</g>
<g id="Pupils">
<path d="M195.396,140.956c0,-0 -5.159,1.301 -6.448,8.453c1.935,4.553 4.514,5.202 4.514,5.202l-3.869,1.951c0,-0 1.29,-0.65 3.224,1.951c5.803,1.3 13.54,-1.301 15.475,-3.251c-0,-5.202 -0.645,-9.103 -2.579,-11.054c-1.934,-1.951 -9.024,-0.663 -10.31,-3.258l-0.007,0.006Z" style="fill-rule:nonzero;" />
<path d="M123.178,127.301c-0,-0 4.514,3.251 7.737,1.951c1.935,2.601 1.935,3.251 3.869,8.453c-1.289,6.503 -1.934,7.803 -8.383,7.803c-4.513,-1.951 -5.803,-3.251 -7.737,-3.251c-1.289,-4.552 0,-8.453 0,-8.453c0,-0 2.582,0.643 4.517,-6.506l-0.003,0.003Z" style="fill-rule:nonzero;" />
</g>
</g>
<g id="Body">
<g id="Spaces">
<path d="M168.316,162.414c-0,0 5.158,2.6 9.671,13.005c2.58,2.601 7.093,3.901 7.093,3.901c-0,0 -7.737,8.453 -51.582,3.251c10.316,-1.951 12.251,-3.25 19.988,-8.453c7.737,-5.202 12.244,-7.793 14.827,-11.694l0.003,-0.01Z" style="fill:url(#_Linear3);fill-rule:nonzero;" />
<path d="M233.435,181.268c0,-0 0.644,3.902 3.869,8.453c-8.382,3.251 -32.238,13.004 -41.265,14.305c-9.028,1.301 -44.49,3.251 -65.123,0c-20.632,-3.251 -40.621,-7.803 -45.135,-11.704c0.645,-4.551 1.29,-9.102 5.158,-10.404c3.869,-1.301 27.081,9.103 54.807,10.404c27.726,1.301 54.809,0.643 87.693,-11.061l-0.004,0.007Z" style="fill:url(#_Linear4);fill-rule:nonzero;" />
<path d="M242.468,207.925l5.803,6.502c0,0 1.289,5.202 -1.29,9.754c-8.381,3.901 -30.949,4.552 -42.555,10.404c-12.895,1.3 -88.98,2.601 -110.257,-5.202c-5.165,-8.457 -8.386,-11.061 -8.386,-20.815c10.958,5.199 92.2,26.013 156.682,-0.653l0.003,0.01Z" style="fill:url(#_Linear5);fill-rule:nonzero;" />
<path d="M236.017,240.443c0,0 -18.698,25.359 -36.107,16.256c-11.606,1.95 -24.501,8.452 -30.949,7.803c-6.448,-0.65 -23.212,-1.95 -28.37,-0.65c-7.099,-2.604 -12.902,-8.456 -20.64,-10.407c-7.737,-1.951 -14.185,-5.202 -14.829,-7.803c-0.644,-2.601 25.791,2.601 43.844,4.552c18.054,1.951 23.858,-1.3 38.687,-1.951c14.83,-0.65 28.367,-1.307 48.359,-7.803l0.005,0.003Z" style="fill:url(#_Linear6);fill-rule:nonzero;" />
</g>
</g>
</g>
<defs>
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(111.727,0,0,112.674,210.871,120.493)">
<stop offset="0" style="stop-color:#afe0ed;stop-opacity:1" />
<stop offset="0.09" style="stop-color:#afe0ed;stop-opacity:1" />
<stop offset="1" style="stop-color:#e6d0e5;stop-opacity:1" />
</linearGradient>
<linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(112.939,0,0,113.896,10.8867,102.312)">
<stop offset="0" style="stop-color:#e6d0e5;stop-opacity:1" />
<stop offset="0.94" style="stop-color:#afe0ed;stop-opacity:1" />
<stop offset="1" style="stop-color:#afe0ed;stop-opacity:1" />
</linearGradient>
<linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(51.5791,0,0,52.0162,133.498,173.338)">
<stop offset="0" style="stop-color:#fff1e8;stop-opacity:1" />
<stop offset="0.2" style="stop-color:#ffe474;stop-opacity:1" />
<stop offset="0.66" style="stop-color:#fed500;stop-opacity:1" />
<stop offset="1" style="stop-color:#fed500;stop-opacity:1" />
</linearGradient>
<linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(151.517,0,0,152.801,85.7871,193.538)">
<stop offset="0" style="stop-color:#fff1e8;stop-opacity:1" />
<stop offset="0.2" style="stop-color:#ffe474;stop-opacity:1" />
<stop offset="0.66" style="stop-color:#fed500;stop-opacity:1" />
<stop offset="1" style="stop-color:#fed500;stop-opacity:1" />
</linearGradient>
<linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(162.803,0,0,164.183,85.7871,221.745)">
<stop offset="0" style="stop-color:#fff1e8;stop-opacity:1" />
<stop offset="0.2" style="stop-color:#ffe474;stop-opacity:1" />
<stop offset="0.66" style="stop-color:#fed500;stop-opacity:1" />
<stop offset="1" style="stop-color:#fed500;stop-opacity:1" />
</linearGradient>
<linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(130.906,0,0,132.016,105.111,252.489)">
<stop offset="0" style="stop-color:#fff1e8;stop-opacity:1" />
<stop offset="0.2" style="stop-color:#ffe474;stop-opacity:1" />
<stop offset="0.66" style="stop-color:#fed500;stop-opacity:1" />
<stop offset="1" style="stop-color:#fed500;stop-opacity:1" />
</linearGradient>
</defs>
</svg>
<script>
// Get the bee element
const bee = document.getElementById('bee');
// Function to generate a random position within the window dimensions
function getRandomPosition() {
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const xPos = Math.random() * (windowWidth - bee.clientWidth);
const yPos = Math.random() * (windowHeight - bee.clientHeight);
return { x: xPos, y: yPos };
}
// Function to move the bee to a random position
function moveBee() {
const position = getRandomPosition();
bee.style.transform = `translate(${position.x}px, ${position.y}px)`;
}
// Function to continuously move the bee at regular intervals
function flyBee() {
moveBee();
setInterval(moveBee, 1000); // Adjust the interval as needed
}
// Start the bee animation
flyBee();
</script>