JSFiddle - React, Tailwind, and code Playground

by psoares

HTML

<div id="vizDojoxGfx"></div>

JavaScript

require(["dojox/gfx", "dojox/gfx/fx", "dojo/fx", "dojo/colors"], function(gfx, fx, dojoFx){
     var sampleSVGdojoxGfx = gfx.createSurface("vizDojoxGfx", 100, 100);
     
 var circle = sampleSVGdojoxGfx.createCircle({ cx: 50, cy: 50, r:40 })
                                 .setFill("white")
                                 .setStroke("gray");
     circle.connect("onmouseover", function(evt) {evt.gfxTarget.setFill("aliceblue");});
     circle.connect("onmouseout", function(evt) {evt.gfxTarget.setFill("white");});
     circle.connect("onmousedown", function(evt) {
         anim1 = new fx.animateTransform({
             shape : evt.gfxTarget,
             duration : 1000,
             transform : [
                 {name: "scaleAt", start: [1, 50, 50], end: [.25, 50, 50]}
             ]
         });
         
         anim2 = new fx.animateTransform({
                     shape : evt.gfxTarget,
                     duration : 1000,
                     transform : [
                         {name: "scaleAt", start: [.2, 50, 50], end: [1, 50, 50]}
                     ]
                 });
         dojoFx.chain([anim1,anim2]).play(); 
     });
 });