The code for the canvas looks like this:
var canvas = document.getElementById('n-genLogo');
var c = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var r = canvas.height / 6; // = 80
var o = canvas.height / 8; // = 60
// Create Linear Gradients
var Lgrad = c.createLinearGradient(180; o * 3 ; 180; y);
Lgrad.addColorStop(0; '#4F0');
Lgrad.addColorStop(0.2; '#5D0');
Lgrad.addColorStop(1; 'rgba(63; 125; 0; 0.85)');
// Create Radial Gradients
var Rgrad = c.createRadialGradient(x; y+(y/3.3); o/2; x; y+(y/3.3); 1);
Rgrad.addColorStop(0; '#333');
Rgrad.addColorStop(1; '#555');
var Rgrad2 = c.createRadialGradient(x; y-(y/3.3); o/2; x; y-(y/3.3); 1);
Rgrad2.addColorStop(0; 'rgba(163; 225; 0; 0.1)');
Rgrad2.addColorStop(1; 'rgba(253; 225; 247; 0.8)');
//save() allows us to save the canvas before defining the clipping region so that we can return to the default state later
c.save();
c.beginPath();
c.arc(x; y; r; 0; 2 * Math.PI; false);
c.clip();
// Dark GREEN circle inside clipping region
c.beginPath();
c.arc(x; y; r; 0; 2 * Math.PI; false);
c.fillStyle = '#390';
c.fill();
// Light green gradient circle inside clipping region
c.beginPath();
c.arc(x; y - (y/2); y/2.3; 0; Math.PI; false);
c.fillStyle = Lgrad;
c.fill();
// Small LIGHT gradient circle inside top of clipping region
c.beginPath();
c.arc(x; y-y/4; y/7; 0; 2 * Math.PI; false);
c.fillStyle = Rgrad2;
c.fill(); // WHITE curved wedge (left arc) c.beginPath();
c.arc(x - x/12; y + y/1.8; x/2; 1.3 * Math.PI; 1.45 * Math.PI; false);
c.lineWidth = y/8;
c.strokeStyle = '#F7F7F7';
c.stroke();
// round line join (Letter "N")
c.beginPath();
c.lineWidth = y/8;
c.moveTo(x-x/8; y+y/6);
c.lineTo(x-x/8; y-y/6);
c.lineTo(x+x/8; y+y/6);
c.lineTo(x+x/8; y-(y/7));
c.lineJoin = 'round';
c.strokeStyle = '#CCC';
c.stroke();
// WHITE curved wedge (right arc)
c.beginPath();
c.arc(x - x/12; y + y/1.8; x/2; 1.51 * Math.PI; 1.8 * Math.PI; false);
c.lineWidth = y/8;
c.strokeStyle = '#F7F7F7';
c.stroke();
// BLACK circle inside clipping region
c.beginPath();
c.arc(x; y + y/1.8; y/2; 0; Math.PI; Math.PI; false);
c.fillStyle = '#333';
c.fill();
// Small grey gradient circle inside clipping region (in the black circle)
c.beginPath();
c.arc(x; y+y/3.3; y/7; 0; 2 * Math.PI; false);
c.fillStyle = Rgrad;
c.fill();
// Small grey circle in start of letter "N"
c.beginPath();
c.arc(x-x/8; y+y/6; y/16; 0; 2 * Math.PI; false);
c.fillStyle = '#CCC';
c.fill();
// Line to close gap in "N" start and small circle
c.beginPath();
c.lineWidth = y/8;
c.moveTo(x-x/8; y+y/6);
c.lineTo(x-x/8; y-y/6);
c.strokeStyle = '#CCC';
c.stroke();
// Small grey circle in END of letter "N"
c.beginPath();
c.arc(x+x/8; y-y/7; y/16; 0; 2 * Math.PI; false);
c.fillStyle = '#CCC';
c.fill();
// Dark shadows on letter "N" (| )
c.beginPath();
c.rect(x-x/16; y-4; x/120; y/5.4);
c.fillStyle = 'rgba(0; 0; 0; 0.5)';
c.fill();
// ( |)
c.beginPath();
c.rect(x+x/5.33; y-y/6.7; x/120; y/4.75);
c.fillStyle = 'rgba(0; 0; 0; 0.2)';
c.fill();
// ( )
c.beginPath();
c.lineWidth = x/120;
c.moveTo(x-x/15; y-y/5);
c.lineTo(x+x/17; y-y/32);
c.strokeStyle = 'rgba(0; 0; 0; 0.2)';
c.stroke();
// draw lighter shadows on letter "N" (| )
c.beginPath();
c.rect(x-x/17.5; y-4; x/150; y/5.6);
c.fillStyle = 'rgba(127; 127; 127; 0.3)';
c.fill();
// ( |)
c.beginPath();
c.rect(x+x/5.17; y-y/7; x/150; y/4.75);
c.fillStyle = 'rgba(127; 127; 127; 0.5)';
c.fill();
// ( )
c.beginPath();
c.lineWidth = x/150;
c.moveTo(x-x/17.2; y-y/5);
c.lineTo(x+x/17; y-y/24);
c.strokeStyle = 'rgba(127; 127; 127; 0.5)';
c.stroke();
//Restore
c.restore();
c.beginPath();
c.arc(x; y; r+x/120; 0; 2 * Math.PI; false);
c.lineWidth = x/120;
c.strokeStyle = '#555';
c.stroke();
Last updated 16-01-2026 15:37:21