JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/wpe-lightning@1.10.0/dist/lightning.js"></script>
<div id="app"></div>
JavaScript
class RoundedRectExample extends lng.Application {
static _template() {
return {
Base: {
rtt: true,
w: 300,
h: 300,
Inner: {
shader: {
type: lng.shaders.RoundedRectangle,
radius: 50
},
src: "https://image.shutterstock.com/image-vector/example-signlabel-features-speech-bubble-260nw-1223219848.jpg",
},
}
}
}
_init() {
const inner = this.tag('Inner');
const anim = inner.animation({
duration: 1,
repeat: -1,
actions: [
{p: 'shader.radius', v: (p) => [50 * Math.cos(p * 2 * 3.14), 50, 100 * Math.cos((p - 0.5) * 2 * 3.14), 50]},
]
}).start();
}
}
const options = {
stage: {
w: 900,
h: 900,
clearColor: 0xFF000000,
canvas2d: false,
useImageWorker: false
},
debug: true
}
const app = new RoundedRectExample(options);
document.body.appendChild(app.stage.getCanvas());