I have a beautiful star SVG that I created, and I want to use it instead of styling a span to create floating bubbles in my div. However, I'm facing some challenges in adapting my Javascript loop to incorporate the SVG for creating the bubbles, as opposed to using the span element.
"use strict";
// variables
var numBubbles = 60;
var minSize = 10;
var maxSize = 20;
var container = document.getElementById("container");
// get the size of a bubble
// Randomized between minSize and maxSize
function bubbleSize() {
return Math.floor(Math.random() * (maxSize - minSize + 1)) + minSize;
}
// Get the location of a bubble.
// Between left=2% and left=98%.
function bubbleLocation() {
return Math.floor(Math.random() * 96) + 2;
}
// Create a bubble using the
// previous two functions.
function createBubble() {
var size = bubbleSize();
var location = bubbleLocation();
// create span
var el = document.createElement("span");
// style span
el.setAttribute("style", "width: " + size + "px; height: " + size + "px; left: " + location + "%; box-shadow: " + "0px 0px 12px 2px #ff4e85;");
// append span
container.appendChild(el);
}
// Start adding bubbles.
(function startBubbles() {
var i = 0;
function addBubble() {
if (i < numBubbles) {
createBubble();
i++;
} else {
clearInterval(inter);
}
}
// Add a bubble every 500ms.
// But we don't want too many bubbles...
var inter = setInterval(addBubble, 300);
})();