Konva Template

by hoolymama

HTML

<script src="https://cdn.rawgit.com/konvajs/konva/0.10.0/konva.min.js"></script>
<div id="container"></div>

CSS

body {
  margin: 0;
}

Babel + JSX

const stage = new Konva.Stage({
   container: 'container',
   width: window.innerWidth,
   height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);


  var bg = new Konva.Rect({
      x: 10,
      y:10,
      width: 500,
      height: 500,
      fill: 'rgb(120,120,120)',
    });
    layer.add(bg);
  
  var grp = new Konva.Group({
  x:250,
  y:250,
  scaleX:1,
  scaleY:1
  });
 
 var stops ={
 red: [0, 'rgb(230, 180, 180)', 0.75, 'rgb(200,0,0)', 1, "rgb(100,0,0)"],
 yellow: [0, 'rgb(247, 240, 230)', 0.75, 'rgb(200,150, 0)', 1, "rgb(100,40,0)"],
 green: [0, 'rgb(180,230,  180)', 0.75, 'rgb(0,150,0)', 1, "rgb(0,100,0)"],
 
 }
 
var outerborder = new Konva.Circle({
      x: 0,
      y: 0,
      radius:20,
        stroke: 'rgb(0,0,0)',
              strokeWidth: 1,

  fillLinearGradientStartPoint: { x : 0, y : -12},
  fillLinearGradientEndPoint:   { x : 0, y : 12},
 fillLinearGradientColorStops: [0,'rgb(220,220,220)', 1, 'rgb(100,100,100)'],
 shadowOffset: {x:0,y:2},
 shadowColor: "rgb(0,0,0)",
 shadowOpacity: 0.3,
 shadowBlur:5
 
 
 });
    grp.add(outerborder);
var innerborder = new Konva.Circle({
      x: 0,
      y: 0,
      radius: 18,
  fillLinearGradientStartPoint: { x : 0, y : -12},
  fillLinearGradientEndPoint:   { x : 0, y :12},
 fillLinearGradientColorStops: [0, 'rgb(100,100,100)', 1, 'rgb(220,220,220)']
 
 });

    grp.add(innerborder);
    
  var inner = new Konva.Circle({
      x: 0,
      y: 0,
      radius:16,
      stroke: 'rgb(50,0,0)',
      strokeWidth: 1,
 fillRadialGradientStartPoint: {x:0,y:-8},
            fillRadialGradientStartRadius: 4,
            fillRadialGradientEndPoint: 0,
            fillRadialGradientEndRadius: 16,
            fillRadialGradientColorStops:stops.green,
    });
    
    grp.add(inner);
    
    
    layer.add(grp);
    layer.draw();