JSFiddle - React, Tailwind, and code Playground

by FZambia

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.6/pixi.min.js"></script>

CSS

body {
    margin: 0;
    padding: 0;
    background-color: #000000;
}

JavaScript

// create a renderer instance.
var renderer = PIXI.autoDetectRenderer(400, 300, {backgroundColor : 0x1099bb});

// add the renderer view element to the DOM
document.body.appendChild(renderer.view);

// create the root of the scene graph
var stage = new PIXI.Container();

requestAnimationFrame( animate );

// create a texture from an image path
var texture = PIXI.Texture.fromImage("http://www.goodboydigital.com/wp-content/plugins/special-social-sharing-icons/icons_16/delicious.png");
// create a new Sprite using the texture
var bunny = new PIXI.Sprite(texture);

// center the sprites anchor point
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;

// move the sprite t the center of the screen
bunny.position.x = 200;
bunny.position.y = 150;

stage.addChild(bunny);

function animate() {
    
    requestAnimationFrame( animate );
    
    // just for fun, lets rotate mr rabbit a little
    bunny.rotation += 0.1;
    
    // render the stage   
    renderer.render(stage);
}