JSFiddle - React, Tailwind, and code Playground

by not important

HTML

<script src="https://code.createjs.com/easeljs-0.8.0.min.js"></script>
<script src="https://code.createjs.com/tweenjs-0.6.0.min.js"></script>
<canvas id="canvas" width="320" height="480"></canvas>

CSS

canvas {
    background-color: #efefef;
}

CoffeeScript

componentToHex = (c) ->
  hex = c.toString(16)
  if hex.length is 1 then '0' + hex else hex

rgbToHex = ([r, g, b]) ->
    r = r | 0
    g = g | 0
    b = b | 0
    c = componentToHex
    "##{c r}#{c g}#{c b}"

class RipplerView
    constructor: ->
        @graphics = new createjs.Graphics
        @el = new createjs.Shape @graphics
        @startingColor = {r, g, b} = [0, 0, 255]
        @endingColor = {r, g, b} = [239, 239, 239]
        @currentColor = @startingColor
        @setGraphics()
        @setTimeline()
        createjs.Ticker.addEventListener 'tick', @setGraphics.bind this

    setTimeline: ->
        @setScaleTween()
        @setColorTween()
        @timeline = new createjs.Timeline [@scaleTween, @colorTween], {}, {loop: true}

    setColorTween: ->
        t = new createjs.Tween.get(@currentColor)
        t = t.to @endingColor, 1200
        t = t.to @startingColor, 0
        @colorTween = t

    setScaleTween: ->
        t = new createjs.Tween.get(@el)
        t = t.to {scaleX: 3, scaleY: 3}, 1200
        t = t.to {scaleX: 1, scaleY: 1}, 0
        @scaleTween = t

    setGraphics: ->
        g = @graphics
        g.c()
        g.s rgbToHex @currentColor
        g.ss 2
        g.dc 0, 0, 14
        g.cp()

class BeaconView
    constructor: ->
        @el = new createjs.Container
        @graphics = new createjs.Graphics
        @shapeEl = new createjs.Shape @graphics
        @el.addChild @shapeEl
        ripplerView = new RipplerView
        @el.addChild ripplerView.el
        @setGraphics()

    setGraphics: ->
        g = @graphics
        g.c()
        g.f '#0000ff'
        g.dc 0, 0, 16
        g.cp()

stageEl = new createjs.Stage 'canvas'

beaconView = new BeaconView
beaconView.el.x = 60
beaconView.el.y = 60
stageEl.addChild beaconView.el

createjs.Ticker.setFPS 60
createjs.Ticker.addEventListener 'tick', ->
    stageEl.update()