JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div id="#outerframe">
    <div id="mygraphiccontainer"></div>
</div>

JavaScript

YUI().use('graphics', function (Y) 
    { 
        //create a graphic instance
        var mygraphic = new Y.Graphic();
        mygraphic.render("#mygraphiccontainer");
        
        //draw a background
        var background = mygraphic.addShape({
            type: "rect",
            stroke: {
               weight: 0,
               color: "#f00",
               opacity: 0
            },
            fill: {
               type: "radial",
               stops: [
               {color: "#001000", opacity: 1, offset: 0},
               {color: "#000", opacity: 1, offset: 1}
               ]
            },
            width: 614,
            height: 397,
            x: 0,
            y: 0
        });
        
        //create a path element to use for the strings
        var strings = mygraphic.addShape({
           type: "path",
           stroke: {
               weight: 2,
               color: "#bbb" 
           }
        });

        //draw strings
        strings.moveTo(614,199);
        strings.lineTo(536,181);
        strings.curveTo(532,178,519,181,515,183);
        strings.lineTo(465,197);
        strings.lineTo(487,203);
        strings.lineTo(515,187);
        strings.curveTo(519,184,529,182,536,184);
        strings.lineTo(613,202);
        strings.end();

        //create a path element to use for the fingerboard
        var finger_board = mygraphic.addShape({
           type: "path",
           stroke: {
               weight: 1,
               color: "#f00",
               opacity: 0 
           },
           fill: {
               type: "linear",
               rotation: 140,
               stops: [
                   {color: "#000", opacity: 1, offset: 0},
                   {color: "#000", opacity: 1, offset: 0.2},
                   {color: "#302420", opacity: 1, offset: 0.8}
               ]
           }
        });
        
        //draw the fingerboard
        finger_board.moveTo(613,231);
        finger_board.lineTo(507,204);
       ...