SVG

by adil_invideo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi-projection.min.js"></script>

CSS

input#slider {
  width: 50%;
}

canvas{
   width: 100%;
   height: 600px;
}

JavaScript

const elements = [{
  src: "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: document.body.clientWidth,
  height: 600,
  backgroundColor: 0xCCCCCC,
  antialias: true,
  resolution: 2
});

document.body.appendChild(app.view);

const container = new PIXI.Container();
app.stage.addChild(container);
var texture = PIXI.Texture.from(elements[0].src);
const sprite = new PIXI.Sprite(texture);

/* sprite.width = 300; */
/* sprite.height = 500; */
container.addChild(sprite);