demo.html

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.3.0/browser/pixi.min.js" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/pixi-live2d-display@0.3.1/dist/cubism4.min.js" crossorigin="anonymous"></script>
<canvas id="canvas"></canvas>
<script>
const cubism4Model = "https://live2d.nekochan.eu.org/pachan/pachirisu%20anime%20girl%20-%20top%20half.model3.json";
const live2d = PIXI.live2d;

(async function main() {
  const app = new PIXI.Application({
    view: document.getElementById("canvas"),
    autoStart: true,
    transparent: true  // Make the background transparent
  });

  const model = await live2d.Live2DModel.from(cubism4Model);
  app.stage.addChild(model);

  const scaleX = (innerWidth * 0.5) / model.width;
  const scaleY = (innerHeight * 0.8) / model.height;

  model.scale.set(Math.min(scaleX, scaleY));
  model.y = innerHeight * 0.1;
})();
</script>