SVG × JavaScript: Implementing a Bouncing Ball Animation｜Copy‑and‑Paste Sample Code

Colorful Bouncing Animation Sample with SVG

Using SVG makes it just as easy as Canvas to display icons and other graphics.
By combining it with JavaScript, you can create animations as well.
In this example, an SVG ball is displayed and animated to bounce using JavaScript.

<svg style="width:100%;" viewBox="0 0 1920 640" class="MamSVGBallAnimation"></svg>

By reducing the height of the viewBox, you can also use it as an animated divider line.
<svg style="width:100%;" viewBox="0 0 1920 30" class="MamSVGBallAnimation"></svg>

HTML, CSS, and JavaScript Code

<svg style="width:100%;" viewBox="0 0 640 200" class="MamSVGBallAnimation"></svg>
<script>
  class TMamSVGBallAnimation{
    constructor(){
      this.num=100;//number of balls
      this.r=8;
      this.svg=document.querySelectorAll('svg.MamSVGBallAnimation');
      this.s=[];
      this.vx=[];
      for(let i=0;i(this.vx[i][0]+this.vx[i][2]-this.r)||this.s[i].ball[j].x<(this.vx[i][0]+this.r)){
            this.s[i].ball[j].vx=-this.s[i].ball[j].vx;
            this.s[i].ball[j].x+=this.s[i].ball[j].vx;
          }
          if(this.s[i].ball[j].y>(this.vx[i][1]+this.vx[i][3]-this.r)){
            this.s[i].ball[j].vy=-this.s[i].ball[j].vy;
            this.s[i].ball[j].y+=this.s[i].ball[j].vy;
          }
          this.s[i].ball[j].circle.setAttributeNS(null,"cx",this.s[i].ball[j].x);
          this.s[i].ball[j].circle.setAttributeNS(null,"cy",this.s[i].ball[j].y);
        }
      }
    }
  }
  let MamSVGBallAnimation;
  window.addEventListener('load',function(){
    MamSVGBallAnimation=new TMamSVGBallAnimation;
  });
</script>