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>