Hypotrochoid

The JavaScript code to produce this picture

var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]});
var g1 = board.create('point', [1, -1], {size:4});
var g2 = board.create('point', [2.5, -2], {size:4});
var g3 = board.create('point', [1, -3], {size:3});
var g4 = board.create('point', [2.5, -4], {size:3});
var g5 = board.create('point', [-4, 1], {size:3,name:''});

var c1 = board.create('curve', [
       function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); },
       function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); },
       0,function(){ return Math.PI*7*Math.abs(g4.X());}],{
          strokeWidth:function(){return g5.Y()*3;},
          strokeOpacity:function(){return g5.Y()*0.6;}
         });

var t = board.create('text', [function() { return g5.X()+0.2; },function() { return g5.Y()+0.25; },'X(B)=<value>X(B)</value>'], 
        { 
            digits:3, 
            fontSize:function(){return Math.abs(g5.Y())*10+1;}
        });