JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

<script src="https://pixijs.download/v6.0.4/pixi.min.js"></script>

JavaScript

const url = 'https://media.gettyimages.com/vectors/two-women-jump-and-highfive-each-other-vector-id1207202567?b=1&k=6&m=1207202567&s=612x612&w=0&h=4aSgSDLbwYuUYEi7Kb1bd2oTitPYsRb24NMgyqi2MW4=';

const app = new PIXI.Application({
  width: 400,
  height: 300,
  backgroundColor: 0xCCCCCC,
  antialias: true,
  resolution: 2
})

const props = {
  x: 50,
  y: 50,
  width: 200,
  height: 200,
  pivot: 0.5,
}

document.body.appendChild(app.view);

const container = new PIXI.Container();
container.x = props.x;
container.y = props.y;

const sprite = PIXI.Sprite.from(url);
sprite.width = props.width;
sprite.height = props.height;

const spriteBlank = PIXI.Sprite.from(PIXI.Texture.WHITE);
spriteBlank.width = props.width;
spriteBlank.height = props.height;

container.addChild(spriteBlank);
container.addChild(sprite);
app.stage.addChild(container);

const pivotXDelta = props.width * props.pivot;
const pivotYDelta = props.height * props.pivot;

container.pivot.set(pivotXDelta, pivotYDelta);

container.position.set(
  pivotXDelta + container.position.x,
  pivotYDelta + container.position.y
);

container.rotation = 0;