CINXE.COM
Rive Demo
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Rive Demo</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet"><script type="module" src="/241206_rive/index.e0a37896.js"></script><style>body{font-family:Noto Sans JP,sans-serif}*,:after,:before{box-sizing:border-box;margin:0;padding:0}.main{justify-content:center;gap:160px;width:100%;padding:64px;display:grid}.wrapper{justify-content:center;gap:48px;display:grid}#star{width:354px;height:360px;margin:0 auto}#fish{width:500px;height:500px}h2{text-align:center}</style></head><body> <main class="main"> <section class="wrapper"> <h2>Demo1: クリックとホバーでアニメーションする星</h2> <canvas id="star" width="354" height="360"></canvas> </section> <section class="wrapper"> <h2>Demo2: マウスについてくる魚</h2> <canvas id="fish" width="500" height="500"></canvas> </section> </main> </body></html>