I would like to style an image with a rectangular/square shape which is loaded as a PIXI.JS Sprite to look like an avatar with a circular shape.

Here is my code sample:

import "./styles.css";
import * as PIXI from "pixi.js";

let app = new PIXI.Application({
  width: 800,
  height: 600,
  antialiasing: true,
  transparent: false,
  resolution: 1,
});

document.body.appendChild(app.view);

//To change the background color
app.renderer.backgroundColor = "0x000000";

PIXI.loader.load(() => {
  const avatar = PIXI.Sprite.from(
    "https://scontent.fsof10-1.fna.fbcdn.net/v/t39.30808-6/328967084_733962544767181_6767350406211342384_n.jpg?_nc_cat=110&ccb=1-7&_nc_sid=5f2048&_nc_ohc=I8xWlna0c1YQ7kNvgGPzMDD&_nc_ht=scontent.fsof10-1.fna&oh=00_AfBH5ijJzlok_XqCN4BPrcjzN2Nj4qMNAHCXr4jqDfh04Q&oe=663E9A2D"
  );

  avatar.width = 100;
  avatar.height = 100;
  avatar.x = 100;
  avatar.y = 200;
  app.stage.addChild(avatar);
});

Link to a playground:
https://codesandbox.io/p/sandbox/pixi-playground-forked-td9x22