canvas(id="myCanvas" resize)
View Compiled
html, body {
  margin:0;
      overflow: hidden;
  padding:0;
  width:100%;
  height:100%;
}



#myCanvas[resize] {
  height:100%;
  width:100%;
  background-color:#efefef;
}
View Compiled
  paper.install(window);

  window.onload = function() {
    // Get a reference to the canvas object
    // Create an empty project and a view for the canvas:
    var canvas = document.getElementById('myCanvas');
    paper.setup(canvas);
    //END PROJECT SET UP;
    
    
    var width, height, center;
var points = 5;
var smooth = true;
var mousePos = view.center / 2;
var pathHeight = mousePos.y;
var path = new Path.Circle({
    center: view.center,
    radius: 50,
    strokeColor: 'black'
});
path.strokeWidth = 3;
path.stroke = 3;
var copy = path.clone();
    copy.scale(1.5);



        var text = new PointText({
    point:  view.center,
    fillColor: 'black',
    fontFamily: 'Courier New',
    fontWeight: 'bold',
    fontSize: 10,
    justification: 'center'
});
    var mousePos;
    text.content = 'Francis Laguna- Driscoll';
    view.onMouseMove = function(event) {
      var eventX = event.point.x;
      var eventY = event.point.y;
      var centerX = view.center.x;
      var centerY = view.center.y;
      mousePos = event.point;
       copy.position.x = event.point.x + (eventX - centerX) * 0.06;
       copy.position.y = event.point.y + (eventY - centerY)* 0.1;
       
       path.position = event.point;
    }
    text.onMouseEnter = function(event) {
      text.fillcolor = "white"
    }
    text.onMouseLeave = function(event) {
      // path.scale(1/4);
      // copy.scale(1/4);
    }
    view.onFrame = function(event) {
      
      // copy.scale(1.01);
      // path.scale(1.01);
      if (copy.area > 990000) {
        // copy.remove();
        // copy = path.clone();
        // path.remove();
        // path = new Path.Circle({center: view.center,radius: 120,strokeColor: 'black'});
      }
      // console.log(copy.area);
    }
  view.onResize= function(event) {
  // Whenever the window is resized, recenter the path:
  text.position = view.center;

}
    
    
    
    
    
    
    // Draw the view now:
    paper.view.draw();
    

  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.min.js