【SVG×JavaScript】跳ねるボールのアニメーションを実装｜コピペできるサンプルコード

svgアニメーションでカラフルに跳ねるサンプル

SVGを使うとCanvasを使うのと同じくらい簡単にアイコン等を表示できます
更にJavascriptを組み合わせるとアニメーションすることが出来ます。
SVGでボールを表示させ、Javascriptでバウンドするアニメーションを実装します。

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

viewBoxの高さを小さくするとアニメーションする区切り線のように使うこともできます。
<svg style="width:100%;" viewBox="0 0 1920 30" class="MamSVGBallAnimation"></svg>

HTML,CSS,Javascriptコード

<svg style="width:100%;" viewBox="0 0 640 200" class="MamSVGBallAnimation"></svg>
<script>
  class TMamSVGBallAnimation{
    constructor(){
      this.num=100;//ボールの数
      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>