ZKM logo canvas/svg - JSFiddle

by PhilQ

HTML

<canvas id="myCanvas" width="430" height="423"></canvas>

<svg width="430" viewBox="0 0 430 423" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="shape">
  <g>
    <path d="
      M 0 10
      L 400 10
      A 20 20, 0, 0, 1, 420 30
      A 20 20, 0, 0, 1, 400 50
      H 64
      A 54 54 0, 0, 0, 18.21 132.62
      L 177.18 387.03
      " fill="transparent" stroke="#395838" stroke-width="20" />
    <path d="
      M 177.18 387.03
      L 177.18 387.03
      " fill="transparent" stroke="red" stroke-width="20" />
  </g>
</svg>

CSS

canvas, svg {
  display: inline-block;
  border:1px solid #000000;
}

JavaScript

$(document).ready(function(){
	drawLogo("myCanvas");
});

function drawLogo(id) {

    var c = document.getElementById( id );
    var ctx = c.getContext("2d");
    var lineW = 20;
    var rLarge = 2.7;
    var rMedium = 1;
    var rSmall = 0.8;
    var leftAngle = 58;
    var leftMargin = .5; //1.5;
    var rightAngle = 58;
    var rightMargin = 1.45; //1.5;

    ctx.lineWidth = lineW;

    ctx.strokeStyle = '#00656f'; //'#395838'; // dark green
    ctx.fillStyle = '#00656f'; //'#395838';

    ctx.beginPath();
    curX = 0;
    curY = 0.5*lineW;
    ctx.moveTo( curX, curY );
    curX += (20*lineW);
    ctx.lineTo( curX, curY );

    ctx.arc( curX, (curY+(rMedium*lineW)), (rMedium*lineW), (-0.5*Math.PI),(0.5*Math.PI), false);
    curY += (2*rMedium*lineW);

    curX = 0 + ((leftMargin+rLarge)*lineW);
    ctx.lineTo( curX, curY );

    ctx.arc( curX, (curY+(rLarge*lineW)), (rLarge*lineW), (-0.5*Math.PI),((0.5 + (( leftAngle /90)*0.5))*Math.PI), true);
    curX = curX + ((rLarge*lineW) * Math.cos( ((0.5 + (( leftAngle /90)*0.5))*Math.PI) ));
    curY = (curY+(rLarge*lineW)) + ((rLarge*lineW) * Math.sin( ((0.5 + (( leftAngle /90)*0.5))*Math.PI) ));

    curX += (Math.cos( (leftAngle/90)*0.5 *Math.PI ) * (15*lineW));
    curY += (Math.sin( (leftAngle/90)*0.5 *Math.PI ) * (15*lineW));
    ctx.lineTo( curX, curY );
    var lX = 0+curX;
    var lY = 0+curY;

    ctx.stroke();
    ctx.closePath();


    ctx.beginPath();

    corX = (Math.cos( (((leftAngle/90)*0.5) +0 ) *Math.PI ) * (.1*lineW));
    corY = (Math.sin( (((leftAngle/90)*0.5) +0 ) *Math.PI ) * (.1*lineW));
    tmpX = curX + (Math.cos( (((leftAngle/90)*0.5) +0 ) *Math.PI ) * (2.2*lineW)) -corX;
    tmpY = curY + (Math.sin( (((leftAngle/90)*0.5) +0 ) *Math.PI ) * (2.2*lineW)) - corY;
    ctx.moveTo(tmpX,tmpY);
    tmpX = curX + (Math.cos( (((leftAngle/90)*0.5) +0.5 ) *Math.PI ) * (1.5*lineW)) -corX;
    tmpY = curY + (Math.sin( (((leftAngle/90)*0.5) +0.5 ) *Math.PI ) * (1.5*lineW)) - corY;
   ...