BLUR

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>
<div class='parent-wrapper'>
  <div class='wrapper'>
    <img src="https://s3.ap-south-1.amazonaws.com/republic-invideo/dog_1629091743937.png" height="300" />

  </div>

  <div class="title">
    Classic / HTML
  </div>
</div>

CSS

body {
  padding: 20px;
  font-family: sans-serif;
  display: flex;

}

canvas {
  width: 100%;
  height: 600px;
  padding-left: 30px;
}

.parent-wrapper {
  position: relative;
  overflow: hidden;
  height: 300px;
  width: 400px;
}

.wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  filter: blur(10px);
}

img {
  width: 100%;
}

.title {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 12px;
  font-weight: bold;
}

JavaScript

const mainImg = 'https://s3.ap-south-1.amazonaws.com/republic-invideo/dog_1629091743937.png';

const app = new PIXI.Application({
  width: document.body.clientWidth,
  height: 600,
  transparent: true,
  antialias: true,
  resolution: 2
});

document.body.appendChild(app.view);




const sprite = new PIXI.Sprite(PIXI.Texture.from(mainImg));
sprite.filters = [
  new PIXI.filters.BlurFilter(10)
];
sprite.height = 300;
sprite.width = 450;
app.stage.addChild(sprite);

let text = new PIXI.Text('Relite / PIXI Default Blur Filter',
{fontFamily : 'Arial', fontSize: 12, fontWeight : 'bold'});
text.y = 270;
text.x = 10;

app.stage.addChild(text);