CodePen

HTML

            
              <canvas id="ctx" width="700" height="700"></canvas>
            
          
!

CSS

            
              body {text-align:center}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var text = "Hello, world! This works by starting at the 'H' at the beginning of this string, and draw a curve to the 'e' before continuing on and drawing the rest of the string, with lots and lots of lines!";

var canvas = document.getElementById("ctx");
var ctx = canvas.getContext("2d");
canvas.width = canvas.width;

ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width * 0.4, 0, Math.PI * 2, false);
ctx.stroke();

ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.save();

for (var i = 0; i < 96; i++) {
	ctx.save();
	ctx.rotate(i /96 * Math.PI * 2);
	ctx.fillText(String.fromCharCode(i + 32), -canvas.width * 0.4 - 30, 0);
	ctx.restore();
}

ctx.strokeStyle = "rgba(0, 0, 0, " + Math.max(0.05, 20 / text.length) + ")";

for (var i = 0; i < text.length - 1; i++) {
	if (text[i] != text[i + 1])
	{
		ctx.beginPath();
		
		var charCode1 = text.charCodeAt(i) - 32;
		var charCode2 = text.charCodeAt(i) - 32;
		
		if (charCode1 >= 0 && charCode1 < 96 && charCode2 >= 0 && charCode2 < 96)
		{
			var angle1 = (text.charCodeAt(i) - 32) / 96 * Math.PI * 2;
			var angle2 = (text.charCodeAt(i + 1) - 32) / 96 * Math.PI * 2;
		
			var startRadius = -canvas.width * 0.4;
			if (i == 0) startRadius -= 40;
			var endRadius = -canvas.width * 0.4;
			if (i == text.length - 2) endRadius -= 40;
		
			ctx.save();
			ctx.rotate(angle1);
			ctx.beginPath();
			ctx.moveTo(startRadius, 0);
	
			ctx.restore();
			ctx.save();
			ctx.rotate(angle2);
			ctx.quadraticCurveTo(0, 0, endRadius, 0);
			ctx.stroke();
			ctx.restore();
		}
	}
}
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................