Mask trial

Trying to implement mask using various means

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]/parser.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi-svg.cjs.min.js"></script>
<script>var exports = {};</script> -->

SCSS

body {
  display: flex;
  font-family: sans-serif;
  background: red;
}

.image-wrapper {
  width: 300px;
  height: 300px;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    filter: blur(10px);
  }
}

JavaScript

const src = "https://pixabay.com/get/55e3dd434f56a414f1dc84609629357f113fdded504c704f752a7cd39f4ac758_640.jpg";

const maskSvg = "https://s3.ap-south-1.amazonaws.com/invideo-block-assets/MASKS/SVG/Snowflake01_preview.svg";

/* const app = new PIXI.Application({
  width: 500,
  height: 500,
  resolution: 2,
  backgroundColor:0x000000
})
document.body.appendChild(app.view);

 PIXI.Texture.from(maskSvg);
  let texture = PIXI.Texture.fromURL(maskSvg, {scale: 20}).then((tex) => {
    const sprite = new PIXI.Sprite(tex);

  sprite.x = 100;

  app.stage.addChild(sprite);
  });

app.loader
  .add("char", maskSvg, { metadata: {
    resolution: 2,
    resourceOptions: {
      scale: 2
    }
  }})
  .load(loaded);

function loaded() {
  const char = new PIXI.Sprite(PIXI.utils.TextureCache.char);
  app.stage.addChild(char);
  char.x = 0;
  char.y = 0;
}
 */
/* const htmlImage = document.createElement('img');

htmlImage.loaded = () => {
  console.log('LOADED');
}
htmlImage.src = maskSvg; */

function loadSVG(svgSrc){
	const svg = new SVG(svgSrc);
}

fetch(maskSvg)
  .then(response => response.text())
  .then(svg => loadSVG(svg))
  .catch(err=>console.log('ERR', err));


class SVG extends PIXI.Graphics
{
    constructor(svg)
    {
        super();

        if (svg)
        {
            this.drawSVG(svg);
        }
    }

    /**
     * Draw an SVG element.
     * @method PIXI.SVG#drawSVG
     * @param {SVGSVGElement|SVGElement|string} svg - Inline SVGElement `<svg>` or buffer.
     * @return {PIXI.SVG} Element suitable for chaining.
     */
    drawSVG(svg)
    {
        if (typeof svg === 'string')
        {
            const div = document.createElement('div');

            div.innerHTML = svg.trim();
            svg = div.querySelector('svg');
        }

        if (!svg)
        {
            throw new Error('Missing <svg> element in SVG constructor');
        }

        this._svgFill(svg);
        this._svgChildren(svg.children);

        return this;
    }

    /**
    ...