๐Ÿ“ 100% Templatable Lovelace Configurations

Iโ€™m trying to have an SVG icon moving around over everything of the dashboard, (mimik a robot vacuum cleaning the house) with this JS code. The JS code wonโ€™t seem to make it move, is there some limitation with HA or i made a mistake?

type: custom:config-template-card
entities: []
card:
  type: custom:html-template-card
  content: |
    <div id="vacuum">
      <img src="/local/appliances/robot_shark_anime_thickW.svg" width="50px" height="50px" />
    </div>
    <script>
      $(document).ready(function(){
          animateDiv();   
      });

      function makeNewPosition(){
          var h = $(window).height() - 50;
          var w = $(window).width() - 50;
          
          var nh = Math.floor(Math.random() * h);
          var nw = Math.floor(Math.random() * w);
          
          return [nh, nw];    
      }

      function animateDiv(){
          var newq = makeNewPosition();
          var oldq = $('#vacuum').offset();
          var speed = calcSpeed([oldq.top, oldq.left], newq);
          
          $('#vacuum').animate({ top: newq[0], left: newq[1] }, speed, function(){
            animateDiv();        
          });
      }

      function calcSpeed(prev, next) {
          var x = Math.abs(prev[1] - next[1]);
          var y = Math.abs(prev[0] - next[0]);
          
          var greatest = x > y ? x : y;
          var speedModifier = 0.1;

          var speed = Math.ceil(greatest / speedModifier);
          return speed;
      }
    </script>