cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <canvas id="canvas"></canvas>
<span>2D</span>
<!-- Works with images too, uncomment out the below to see :) -->
<!--<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAElCAYAAABect+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0YxNTQ1NkY4MTU4MTFFMjgwNUI4RENDNTZFNUQwNjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0YxNTQ1NzA4MTU4MTFFMjgwNUI4RENDNTZFNUQwNjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozRjE1NDU2RDgxNTgxMUUyODA1QjhEQ0M1NkU1RDA2NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozRjE1NDU2RTgxNTgxMUUyODA1QjhEQ0M1NkU1RDA2NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pqv8df4AABeBSURBVHja7J0JvF7j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" />-->
            
          
!
            
              body, html {
	background-color: #231f20;
	margin: 0;
	padding: 0;
}

canvas {
	display: block;
}

img, span {
	display: none;
}
            
          
!
            
              var LineDemo = (function() {

	var $win = $(window);

	var points;
	var context;
	var totalLines;
	var depth;
	var resizeInterval;

	var settings = {
		fontFamily: 'Arial',
		fontSize: '500px',
		fontStyle: 'normal',
		fontWeight: 900,
		height: $win.height(),
		lineHeight: 10,
		maxDepth: 8,
		text: '2D',
		width: $win.width()
	};

	var init = function(options) {

		settings = $.extend({}, settings, options);

		context = setCanvas(document.createElement('canvas'), settings.width, settings.height);

		if(settings.image) {
			var x = (settings.width - settings.image.width) * 0.5;
			var y = (settings.height - settings.image.height) * 0.5;
			context.drawImage(settings.image, x, y, settings.image.width, settings.image.height);
		}
		else {
			context = setCanvas(document.createElement('canvas'), settings.width, settings.height);
			context.fillStyle = 'black';
			context.beginPath();
			context.font = settings.fontStyle + ' ' + settings.fontWeight + ' ' + settings.fontSize + ' ' + settings.fontFamily;
			context.textAlign = 'center';
			context.textBaseline = 'middle';
			context.fillText(settings.text, settings.width * 0.5, settings.height * 0.5);
			context.fill();
			context.closePath();
		}

		setup();
	};

	var setup = function() {
    
    settings.height = Math.max(100, settings.height);
    settings.width = Math.max(100, settings.width);

		totalLines = Math.floor(settings.height / settings.lineHeight);
    
		settings.lineHeight = settings.height / totalLines;

		generatePoints(context, settings.width, totalLines, settings.lineHeight);

		context = setCanvas(document.getElementById('canvas'), settings.width, settings.height);
		depth = settings.maxDepth;
		draw();

		$win.on('mousemove', function(event) {
			depth = settings.maxDepth * ((settings.height - event.pageY) / settings.height);
			draw();
		});

		$win.on('resize', function(event) {
			if(resizeInterval) clearTimeout(resizeInterval);
			resizeInterval = setTimeout(function() {
				settings.height = $win.height();
				settings.width = $win.width();
				init();
			}, 50);
		});
	};

	var generatePoints = function() {
		points = [];
		var data;
		for(var y = 0; y < totalLines; ++y) {
			data = context.getImageData(0, y * settings.lineHeight, settings.width, 1).data;
			points[y] = getPointsRow(data, y * settings.lineHeight);
		}
	};

	var getPointsRow = function(data, y) {
		var row = [];
		var toggle = false;
		var x;
		for(var i = 3; i < data.length; i += 4) {
			if((data[i] !== 0 && !toggle) || (data[i] === 0 && toggle)) {
				x = i / 4;
				toggle = !toggle;
				row[row.length] = {
					x: x,
					y: y
				};
			}
		}
		return row;
	};

	var getDrawPoints = function(rowPoints) {
		var row = [];

		var x, y, diff, newX;

		var point1 = depth;
		var point2 = depth * 0.5;

		for(var i = 0; i < rowPoints.length; ++i) {

			x = rowPoints[i].x;
			y = rowPoints[i].y;

			if(i % 2 === 0) {

				row[row.length] = {
					cx: x - point1,
					cy: y,
					x: x - point1,
					y: y
				};

				if(row.length >= 2 && row[row.length-1].x < row[row.length-2].x) {
					diff = row[row.length-2].x - row[row.length-1].x;
					newX = row[row.length-1].x + (diff * 0.5);
					row[row.length-1].x = row[row.length-2].x = newX;
					row[row.length-1].cx = row[row.length-2].cx = newX;
				}

				row[row.length] = {
					cx: x - point2,
					cy: y,
					x: x,
					y: y - (depth * 0.5)
				};

				row[row.length] = {
					cx: x + point2,
					cy: y - depth,
					x: x + point1,
					y: y - depth
				};

			}
			else {

				row[row.length] = {
					cx: x - point1,
					cy: y - depth,
					x: x - point1,
					y: y - depth
				};

				if(row.length >= 2 && row[row.length-1].x < row[row.length-2].x) {
					diff = row[row.length-2].x - row[row.length-1].x;
					newX = row[row.length-1].x + (diff * 0.5);
					row[row.length-1].x = row[row.length-2].x = newX;
					row[row.length-1].cx = row[row.length-2].cx = newX;
				}

				row[row.length] = {
					cx: x - point2,
					cy: y - depth,
					x: x,
					y: y - (depth * 0.5)
				};

				row[row.length] = {
					cx: x + point2,
					cy: y,
					x: x + point1,
					y: y
				};
			}
		}

		return row;
	};

	var draw = function() {
		context.clearRect(0, 0, settings.width, settings.height);
		context.strokeStyle = 'white';
		context.lineWidth = 2;
		var row;

		for(var i = 1; i < totalLines; ++i) {

			context.globalAlpha = (1 - i / totalLines) * 0.6;
			context.beginPath();
			context.moveTo(0, i * settings.lineHeight);

			row = getDrawPoints(points[i]);

			for(var j = 0; j < row.length; ++j) {
				context.quadraticCurveTo(row[j].cx, row[j].cy, row[j].x, row[j].y);
			}

			context.lineTo(settings.width, i * settings.lineHeight);
			context.stroke();
		}
	};

	var setCanvas = function(canvas, width, height) {
		canvas.width = width;
		canvas.height = height;
		return canvas.getContext('2d');
	};

	return {
		'init': init
	};
});



if($('img').length) {
	var img = new Image();
	img.addEventListener('load', function() {
		new LineDemo().init({
			image: this
		});
	}, false);
	img.src = $('img')[0].src;
}
else if($('span').length) {
	new LineDemo().init({
		fontSize: '340px',
		text: $('span').html()
	});
}
else {
  new LineDemo().init();
}

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console