舞い散る花びら

by Tenderfeel

HTML

<canvas id="canvas"></canvas>

CSS

body {
            margin: 0;
            overflow: hidden;
            background-color: #f0f8ff;
        }
        canvas {
            display: block;
        }

JavaScript

const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        let animationId = null;
        
function minMax(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

        
          // 花びらのSVG画像3種類（base64エンコードされたデータURI）
        const petalImages = [
            "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTgiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA1OCA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQuODY2MjQgNy4yNjYwNkM0Ljg2NjI0IDcuMjY2MDYgLTguOTMzODQgMjYuNzg0IDEyLjczNDIgNDkuNDQyMUMzMC45NDAyIDY4LjQ4IDQ5Ljk3NTIgNTguODE0MSA1Mi41OTcyIDU0LjEyODFDNTUuMjE5MiA0OS40NDIxIDY1LjM5NTIgMzUuMTYwMSA0NS4zNTcyIDE0LjEzNzFDMjguMjcyMiAtMy43ODU5NCAxMi4yMTAyIDEuNTM4MDYgMTIuMjEwMiAxLjUzODA2TDEyLjczNDIgOC42MTkwNUw0Ljg2NjI0IDcuMjY2MDZaIiBmaWxsPSIjRkZDRkRFIi8+Cjwvc3ZnPgo=", // 花びら1のデータ
            "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjciIGhlaWdodD0iNjgiIHZpZXdCb3g9IjAgMCA2NyA2OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0Ljc4MjUgMTQuNjYxOUMtNC40NDM0OSAzOC41MTY5IDEuODA0NDggNjcuMDU5OSAxLjgwNDQ4IDY3LjA1OTlDNy45MDc0OCA1My40NDk5IDM5LjQ3MzUgNjAuMjMwOSA1NC4zMTA1IDQ2LjY1NjlDNzEuMzA4NSAzMS4xMDY5IDY3LjAwODUgMTUuMDAzOSA2MS4xMTk1IDcuODU2OTRDNTEuOTMyNSAtMy4yOTEwNiAyOC4yOTc1IC0yLjEwODA3IDE0Ljc4MjUgMTQuNjYxOVoiIGZpbGw9IiNGRkNGREUiLz4KPC9zdmc+Cg==", // 花びら2のデータ
           ...