JSFiddle - React, Tailwind, and code Playground

by JON

HTML

<body>
<section>
  <h1>PIXI TEXT STYLE GENERATOR</h1>
  <p>The World Wide Fund for Nature (WWF) is....
  <input type="range" value="15" max="50" min="0" step="5">
  </p>
  <p>The World Wide Fund for Nature (WWF) is....
  <input type="range" value="15" max="50" min="0" step="5">
  </p>
</section>
</body>

JavaScript

var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb});
document.body.appendChild(app.view);

var basicText = new PIXI.Text('Basic text in pixi');
basicText.x = 30;
basicText.y = 90;

app.stage.addChild(basicText);

var style = new PIXI.TextStyle({
    fontFamily: 'Arial',
    fontSize: 36,
    fontStyle: 'italic',
    fontWeight: 'bold',
    fill: ['#ffffff', '#00ff99'], // gradient
    stroke: '#4a1850',
    strokeThickness: 5,
    dropShadow: true,
    dropShadowColor: '#000000',
    dropShadowBlur: 4,
    dropShadowAngle: Math.PI / 6,
    dropShadowDistance: 6,
    wordWrap: true,
    wordWrapWidth: 440
});

var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines', style);
richText.x = 30;
richText.y = 180;

app.stage.addChild(richText);