title: Loop through an SVG using JS
body: <p>So I have a small star SVG that I made, and I'm trying to use that star instead of styling a span to make a bunch of bubbles float up to the top of my div.  I'm having trouble trying to figure out how to get my Javascript loop to instead use an SVG to make my bubbles, instead of the span.    </p>
  
  <pre><code>"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 &lt; numBubbles) {
        createBubble();
        i++;
      } else {
        clearInterval(inter);
      }
    }
  
    // Add a bubble every 500ms.
    // But we don't want too many bubbles...
  
    var inter = setInterval(addBubble, 300);
  
  })();
  </code></pre>
  
  <p><a href="https://codepen.io/smugfox/pen/KyNxLG" rel="nofollow noreferrer">https://codepen.io/smugfox/pen/KyNxLG</a></p>