Envato Tuts+ Web Design

HTML5 Canvas Optimization: A Practical Example

noemail@noemail.org (Patrick Jaoko) — Mon, 20 Jan 2014 02:09:19 GMT

If you've been doing JavaScript development long enough, you've most likely crashed your browser a few times. The problem usually turns out to be some JavaScript bug, like an endless while loop; if not, the next suspect is page transformations or animations - the kind that involve adding and removing elements from the webpage or animating CSS style properties. This tutorial focuses on optimising animations produced using JS and the HTML5 <canvas> element.

This tutorial starts and ends with what the HTML5 animation widget you see below:

We will take it with us on a journey, exploring the different emerging canvas optimization tips and techniques and applying them to the widget's JavaScript source code. The goal is to improve on the widget's execution speed and end up with a smoother, more fluid animation widget, powered by leaner, more efficient JavaScript.

The source download contains the HTML and JavaScript from each step in the tutorial, so you can follow along from any point.

Let's take the first step.

Step 1: Play the Movie Trailer

The widget above is based on the movie trailer for Sintel, a 3D animated movie by the Blender Foundation. It's built using two of HTML5's most popular additions: the <canvas> and <video> elements.

The <video> loads and plays the Sintel video file, while the <canvas> generates its own animation sequence by taking snapshots of the playing video and blending it with text and other graphics. When you click to play the video, the canvas springs to life with a dark background that's a larger black and white copy of the playing video. Smaller, colored screen-shots of the video are copied to the scene, and glide across it as part of a film roll illustration.

In the top left corner, we have the title and a few lines of descriptive text that fade in and out as the animation plays. The script's performance speed and related metrics are included as part of the animation, in the small black box at the bottom left corner with a graph and vivid text. We'll be looking at this particular item in more detail later.

Finally, there's a large rotating blade that flies across the scene at the beginning of the animation, whose graphic is loaded from an external PNG image file.

Step 2: View the Source

The source code contains the usual mix of HTML, CSS and Javascript. The HTML is sparse: just the <canvas> and <video> tags, enclosed in a container <div>:

<div id="animationWidget" >
	<canvas width="368" height="208" id="mainCanvas" ></canvas>	
	<video width="184" height="104" id="video" autobuffer="autobuffer" controls="controls" poster="poster.jpg" >
		<source src="sintel.mp4" type="video/mp4" ></source>
		<source src="sintel.webm" type="video/webm" ></source>
	</video>
</div>

The container <div> is given an ID (animationWidget), which acts as a hook for all the CSS rules applied to it and its contents (below).

 
#animationWidget{
	border:1px #222 solid;
	position:relative;
	width: 570px;
	height: 220px;
}
#animationWidget canvas{
	border:1px #222 solid;
	position:absolute;
	top:5px;
	left:5px;			
}
#animationWidget video{
	position:absolute;
	top:110px;
	left:380px;		
}

While HTML and CSS are the marinated spices and seasoning, its the JavaScript that's the meat of the widget.

At the top, we have the main objects that will be used often through the script, including references to the canvas element and its 2D context.
The init() function is called whenever the video starts playing, and sets up all the objects used in the script.
The sampleVideo() function captures the current frame of the playing video, while setBlade() loads an external image required by the animation.
The pace and contents of the canvas animation are controlled by the main() function, which is like the script's heartbeat. Run at regular intervals once the video starts playing, it paints each frame of the animation by first clearing the canvas, then calling each one of the script's five drawing functions:
- drawBackground()
- drawFilm()
- drawTitle()
- drawDescription()
- drawStats()

As the the names suggest, each drawing function is responsible for drawing an item in the animation scene. Structuring the code this way improves flexibility and makes future maintenance easier.

The full script is shown below. Take a moment to assess it, and see if you can spot any changes you would make to speed it up.

(function(){
	if( !document.createElement("canvas").getContext ){ return; } //the canvas tag isn't supported
	
	var mainCanvas = document.getElementById("mainCanvas"); // points to the HTML canvas element above
	var mainContext = mainCanvas.getContext('2d'); //the drawing context of the canvas element
	var video = document.getElementById("video"); // points to the HTML video element
	var frameDuration = 33; // the animation's speed in milliseconds
	video.addEventListener( 'play', init ); // The init() function is called whenever the user presses play & the video starts/continues playing
	video.addEventListener( 'ended', function(){ drawStats(true); } ); //drawStats() is called one last time when the video end, to sum up all the statistics 		
	
	var videoSamples; // this is an array of images, used to store all the snapshots of the playing video taken over time. These images are used to create the 'film reel'
	var backgrounds; // this is an array of images, used to store all the snapshots of the playing video taken over time. These images are used as the canvas background
	var blade; //An canvas element to store the image copied from blade.png 
	var bladeSrc = 'blade.png'; //path to the blade's image source file
	
	var lastPaintCount = 0; // stores the last value of mozPaintCount sampled
	var paintCountLog = []; // an array containing all measured values of mozPaintCount over time
	var speedLog = []; // an array containing all the execution speeds of main(), measured in milliseconds
	var fpsLog = []; // an array containing the calculated frames per secong (fps) of the script, measured by counting the calls made to main() per second
	var frameCount = 0; // counts the number of times main() is executed per second.
	var frameStartTime = 0; // the last time main() was called
	
	// Called when the video starts playing. Sets up all the javascript objects required to generate the canvas animation and measure perfomance
	function init(){ 
		if( video.currentTime > 1 ){ return; }		

		bladeSrc = new Image();
		bladeSrc.src = "blade.png";
		bladeSrc.onload = setBlade;
		
		backgrounds = [];			
		videoSamples = [];
		fpsLog = [];
		paintCountLog = [];	
		if( window.mozPaintCount ){ lastPaintCount = window.mozPaintCount; }
		speedLog = [];
		frameCount = 0;	
		frameStartTime = 0;
		main(); 
		setTimeout( getStats, 1000 );
	}
	
	// As the scripts main function, it controls the pace of the animation
	function main(){	
		setTimeout( main, frameDuration );
		if( video.paused || video.ended ){ return; }
		
		var now = new Date().getTime(); 
		if( frameStartTime ){ 
			speedLog.push( now - frameStartTime );
		}
		frameStartTime = now;
		if( video.readyState < 2 ){ return; }
		
		frameCount++;
		mainCanvas.width = mainCanvas.width; //clear the canvas
		drawBackground(); 
		drawFilm();
		drawDescription();
		drawStats();
		drawBlade();
		drawTitle();
	}
	
	// This function is called every second, and it calculates and stores the current frame rate
	function getStats(){
		if( video.readyState >= 2 ){
			if( window.mozPaintCount ){ //this property is specific to firefox, and tracks how many times the browser has rendered the window since the document was loaded
				paintCountLog.push( window.mozPaintCount - lastPaintCount );
				lastPaintCount = window.mozPaintCount;
			}			
			
			fpsLog.push(frameCount);
			frameCount = 0;	
		}
		setTimeout( getStats, 1000 );
	}
	
	// create blade, the ofscreen canavs that will contain the spining animation of the image copied from blade.png
	function setBlade(){
		blade = document.createElement("canvas");
		blade.width = 400;
		blade.height = 400;			
		blade.angle = 0;
		blade.x = -blade.height * 0.5;
		blade.y = mainCanvas.height/2 - blade.height/2; 
	}
			
	// Creates and returns a new image that contains a snapshot of the currently playing video.
	function sampleVideo(){
		var newCanvas = document.createElement("canvas");
		newCanvas.width = video.width;
		newCanvas.height = video.height; 
		newCanvas.getContext("2d").drawImage( video, 0, 0, video.width, video.height );
		return newCanvas;	
	}
	
	// renders the dark background for the whole canvas element. The background features a greyscale sample of the video and a gradient overlay
	function drawBackground(){
		var newCanvas = document.createElement("canvas");
		var newContext = newCanvas.getContext("2d");
		newCanvas.width = mainCanvas.width;
		newCanvas.height = mainCanvas.height; 
		newContext.drawImage(  video, 0, video.height * 0.1, video.width, video.height * 0.5, 0, 0, mainCanvas.width, mainCanvas.height  );
			
		var imageData, data;
		try{
			imageData = newContext.getImageData( 0, 0, mainCanvas.width, mainCanvas.height );
			data = imageData.data;
		} catch(error){ // CORS error (eg when viewed from a local file). Create a solid fill background instead
			newContext.fillStyle = "yellow";
			newContext.fillRect( 0, 0, mainCanvas.width, mainCanvas.height );
			imageData = mainContext.createImageData( mainCanvas.width, mainCanvas.height );
			data = imageData.data;
		}
		
		//loop through each pixel, turning its color into a shade of grey
		for( var i = 0; i < data.length; i += 4 ){
			var red = data[i]; 
			var green = data[i + 1]; 
			var blue = data[i + 2]; 
			var grey = Math.max( red, green, blue );
			
			data[i] =  grey;
			data[i+1] = grey;
			data[i+2] = grey;
		}
		newContext.putImageData( imageData, 0, 0 );
		
		//add the gradient overlay
		var gradient = newContext.createLinearGradient( mainCanvas.width/2, 0, mainCanvas.width/2, mainCanvas.height );
		gradient.addColorStop( 0, '#000' );
		gradient.addColorStop( 0.2, '#000' );
		gradient.addColorStop( 1, "rgba(0,0,0,0.5)" );
		newContext.fillStyle = gradient;
		newContext.fillRect( 0, 0, mainCanvas.width, mainCanvas.height );
		
		mainContext.save();
		mainContext.drawImage( newCanvas, 0, 0, mainCanvas.width, mainCanvas.height );
		
		mainContext.restore();
	}
	
	// renders the 'film reel' animation that scrolls across the canvas
	function drawFilm(){
		var sampleWidth = 116; // the width of a sampled video frame, when painted on the canvas as part of a 'film reel'
		var sampleHeight = 80; // the height of a sampled video frame, when painted on the canvas as part of a 'film reel'
		var filmSpeed = 20; // determines how fast the 'film reel' scrolls across the generated canvas animation.
		var filmTop = 120; //the y co-ordinate of the 'film reel' animation
		var filmAngle = -10 * Math.PI / 180; //the slant of the 'film reel'
		var filmRight = ( videoSamples.length > 0 )? videoSamples[0].x + videoSamples.length * sampleWidth : mainCanvas.width; //the right edge of the 'film reel' in pixels, relative to the canvas		
		
		//here, we check if the first frame of the 'film reel' has scrolled out of view 
		if( videoSamples.length > 0 ){
			var bottomLeftX = videoSamples[0].x + sampleWidth;
			var bottomLeftY = filmTop + sampleHeight;
			bottomLeftX = Math.floor( Math.cos(filmAngle) * bottomLeftX - Math.sin(filmAngle) * bottomLeftY ); // the final display position after rotation
			
			if( bottomLeftX < 0 ){ //the frame is offscreen, remove it's refference from the film array
				videoSamples.shift();			
			}			
		}			
		
		// add new frames to the reel as required
		while( filmRight <= mainCanvas.width ){
			var newFrame = {};
			newFrame.x = filmRight;
			newFrame.canvas = sampleVideo();
			videoSamples.push(newFrame);			
			filmRight += sampleWidth;			
		}
		
		// create the gradient fill for the reel
		var gradient = mainContext.createLinearGradient( 0, 0, mainCanvas.width, mainCanvas.height );
		gradient.addColorStop( 0, '#0D0D0D' );
		gradient.addColorStop( 0.25, '#300A02' );
		gradient.addColorStop( 0.5, '#AF5A00' );
		gradient.addColorStop( 0.75, '#300A02' );
		gradient.addColorStop( 1, '#0D0D0D' );			
			
		mainContext.save();
		mainContext.globalAlpha = 0.9;
		mainContext.fillStyle = gradient;			
		mainContext.rotate(filmAngle);
		
		// loops through all items of film array, using the stored co-ordinate values of each to draw part of the 'film reel'
		for( var i in videoSamples ){
			var sample = videoSamples[i];				
			var punchX, punchY, punchWidth = 4, punchHeight = 6, punchInterval = 11.5;
			
			//draws the main rectangular box of the sample
			mainContext.beginPath();
			mainContext.moveTo( sample.x, filmTop );
			mainContext.lineTo( sample.x + sampleWidth, filmTop );
			mainContext.lineTo( sample.x + sampleWidth, filmTop + sampleHeight );
			mainContext.lineTo( sample.x, filmTop + sampleHeight );
			mainContext.closePath();				
			
			//adds the small holes lining the top and bottom edges of the 'fim reel'
			for( var j = 0; j < 10; j++ ){
				punchX = sample.x + ( j * punchInterval ) + 5;
				punchY = filmTop + 4;
				mainContext.moveTo( punchX, punchY + punchHeight );
				mainContext.lineTo( punchX + punchWidth, punchY + punchHeight );
				mainContext.lineTo( punchX + punchWidth, punchY );				
				mainContext.lineTo( punchX, punchY );
				mainContext.closePath();
				punchX = sample.x + ( j * punchInterval ) + 5;
				punchY = filmTop + 70;
				mainContext.moveTo( punchX, punchY + punchHeight );
				mainContext.lineTo( punchX + punchWidth, punchY + punchHeight );
				mainContext.lineTo( punchX + punchWidth, punchY );				
				mainContext.lineTo( punchX, punchY );
				mainContext.closePath();
			} 
			mainContext.fill();			
		}		
		
		//loop through all items of videoSamples array, update the x co-ordinate values of each item, and draw its stored image onto the canvas
		mainContext.globalCompositeOperation = 'lighter';
		for( var i in videoSamples ){
			var sample = videoSamples[i];
			sample.x -= filmSpeed;	
			mainContext.drawImage( sample.canvas, sample.x + 5, filmTop + 10, 110, 62 );			
		}
		
		mainContext.restore();			
	}
	
	// renders the canvas title
	function drawTitle(){
		mainContext.save();
		mainContext.fillStyle = 'black';
		mainContext.fillRect( 0, 0, 368, 25 ); 
		mainContext.fillStyle = 'white';
		mainContext.font = "bold 21px Georgia";
		mainContext.fillText( "SINTEL", 10, 20 );	
		mainContext.restore();
	}
	
	// renders all the text appearing at the top left corner of the canvas
	function drawDescription(){		
		var text = []; //stores all text items, to be displayed over time. the video is 60 seconds, and each will be visible for 10 seconds.
		text[0] = "Sintel is an independently produced short film, initiated by the Blender Foundation.";
		text[1] = "For over a year an international team of 3D animators and artists worked in the studio of the Amsterdam Blender Institute on the computer-animated short 'Sintel'.";
		text[2] = "It is an epic short film that takes place in a fantasy world, where a girl befriends a baby dragon.";
		text[3] = "After the little dragon is taken from her violently, she undertakes a long journey that leads her to a dramatic confrontation.";
		text[4] = "The script was inspired by a number of story suggestions by Martin Lodewijk around a Cinderella character (Cinder in Dutch is 'Sintel'). ";
		text[5] = "Screenwriter Esther Wouda then worked with director Colin Levy to create a script with multiple layers, with strong characterization and dramatic impact as central goals.";			
		text = text[Math.floor( video.currentTime / 10 )]; //use the videos current time to determine which text item to display.  
		
		mainContext.save();
		var alpha = 1 - ( video.currentTime % 10 ) / 10;
		mainContext.globalAlpha = ( alpha < 5 )? alpha : 1;
		mainContext.fillStyle = '#fff';
		mainContext.font = "normal 12px Georgia";
		
		//break the text up into several lines as required, and write each line on the canvas
		text = text.split(' ');
		var colWidth = mainCanvas.width * .75;
		var line = '';
		var y = 40;
		for(var i in text ){
			line += text[i] + ' ';
			if( mainContext.measureText(line).width > colWidth ){
				mainContext.fillText( line, 10, y ); 
				line = '';
				y += 12;				
			}			
		}
		mainContext.fillText( line, 10, y ); 
		
		mainContext.restore();
	}
	
	//updates the bottom-right potion of the canvas with the latest perfomance statistics
	function drawStats( average ){			
		var x = 245.5, y = 130.5, graphScale = 0.25;
		
		mainContext.save();
		mainContext.font = "normal 10px monospace";
		mainContext.textAlign = 'left';
		mainContext.textBaseLine = 'top';
		mainContext.fillStyle = 'black';
		mainContext.fillRect( x, y, 120, 75 );			
		
		//draw the x and y axis lines of the graph
		y += 30;	
		x += 10;			
		mainContext.beginPath();
		mainContext.strokeStyle = '#888';
		mainContext.lineWidth = 1.5;
		mainContext.moveTo( x, y );
		mainContext.lineTo( x + 100, y );
		mainContext.stroke();
		mainContext.moveTo( x, y );
		mainContext.lineTo( x, y - 25 );
		mainContext.stroke();			
		
		// draw the last 50 speedLog entries on the graph
		mainContext.strokeStyle = '#00ffff';
		mainContext.fillStyle = '#00ffff';
		mainContext.lineWidth = 0.3;
		var imax = speedLog.length;
		var i = ( speedLog.length > 50 )? speedLog.length - 50 : 0
		mainContext.beginPath();				
		for( var j = 0; i < imax; i++, j += 2 ){				
			mainContext.moveTo( x + j, y );
			mainContext.lineTo( x + j, y - speedLog[i] * graphScale );		
			mainContext.stroke();
		}
		
		// the red line, marking the desired maximum rendering time
		mainContext.beginPath();
		mainContext.strokeStyle = '#FF0000';
		mainContext.lineWidth = 1;
		var target = y - frameDuration * graphScale;				
		mainContext.moveTo( x, target );
		mainContext.lineTo( x + 100, target );		
		mainContext.stroke();
		
		// current/average speedLog items
		y += 12;
		if( average ){
			var speed = 0;
			for( i in speedLog ){ speed += speedLog[i]; }
			speed = Math.floor( speed / speedLog.length * 10) / 10;
		}else {
			speed = speedLog[speedLog.length-1];
		}
		mainContext.fillText( 'Render Time: ' + speed, x, y );
		
		// canvas fps
		mainContext.fillStyle = '#00ff00';
		y += 12;
		if( average ){
			fps = 0;
			for( i in fpsLog ){ fps += fpsLog[i]; }
			fps = Math.floor( fps / fpsLog.length * 10) / 10;
		}else {
			fps = fpsLog[fpsLog.length-1];
		}
		mainContext.fillText( ' Canvas FPS: ' + fps, x, y );
		
		// browser frames per second (fps), using window.mozPaintCount (firefox only)
		if( window.mozPaintCount ){ 	
			y += 12;
			if( average ){
				fps = 0;
				for( i in paintCountLog ){ fps += paintCountLog[i]; }
				fps = Math.floor( fps / paintCountLog.length * 10) / 10;
			}else {	
				fps = paintCountLog[paintCountLog.length-1];	
			}
			mainContext.fillText( 'Browser FPS: ' + fps, x, y );
		}
		
		mainContext.restore();
	}
	
	//draw the spining blade that appears in the begining of the animation	
	function drawBlade(){ 
		if( !blade || blade.x > mainCanvas.width ){ return; }
		blade.x += 2.5;
		blade.angle = ( blade.angle - 45 ) % 360;
		
		//update blade, an ofscreen canvas containing the blade's image
		var angle = blade.angle * Math.PI / 180;			
		var bladeContext = blade.getContext('2d');
		blade.width = blade.width; //clear the canvas
		bladeContext.save(); 
		bladeContext.translate( 200, 200 ); 
		bladeContext.rotate(angle); 
		bladeContext.drawImage( bladeSrc, -bladeSrc.width/2, -bladeSrc.height/2 );
		bladeContext.restore();
		
		mainContext.save(); 
		mainContext.globalAlpha = 0.95;
		mainContext.drawImage( blade, blade.x, blade.y + Math.sin(angle) * 50 ); 
		mainContext.restore();
	}	
})();

Step 3: Code Optimization: Know the Rules

The first rule of code performance optimization is: Don't.

The point of this rule is to discourage optimization for optimization's sake, since the process comes at a price.

A highly optimized script will be easier for the browser to parse and process, but usually with a burden for humans who will find it harder to follow and maintain. Whenever you do decide that some optimization is necessary, set some goals beforehand so that you don't get carried away by the process and overdo it.

The goal in optimizing this widget will be to have the main() function run in less than 33 milliseconds as it's supposed to, which will match the frame rate of the playing video files (sintel.mp4 and sintel.webm). These files were encoded at a playback speed of 30fps (thirty frames per second), which translates to about 0.33 seconds or 33 milliseconds per frame ( 1 second ÷ 30 frames ).

Since JavaScript draws a new animation frame to the canvas every time the main() function is called, the goal of our optimization process will be to make this function take 33 milliseconds or less each time it runs. This function repeatedly calls itself using a setTimeout() Javascript timer as shown below.

 
var frameDuration = 33; // set the animation's target speed in milliseconds	
function main(){
	if( video.paused || video.ended ){ return false; }			
	setTimeout( main, frameDuration );

The second rule: Don't yet.

This rule stresses the point that optimization should always be done at the end of the development process when you've already fleshed out some complete, working code. The optimization police will let us go on this one, since the widget's script is a perfect example of complete, working program that's ready for the process.

The third rule: Don't yet, and profile first.

This rule is about understanding your program in terms of runtime performance. Profiling helps you know rather than guess which functions or areas of the script take up the most time or are used most often, so that you can focus on those in the optimization process. It is critical enough to make leading browsers ship with inbuilt JavaScript profilers, or have extensions that provide this service.

I ran the widget under the profiler in Firebug, and below is a screenshot of the results.

Step 4: Set Some Performance Metrics

As you ran the widget, I'm sure you found all the Sintel stuff okay, and were absolutely blown away by the item on the lower right corner of the canvas, the one with a beautiful graph and shiny text.

It's not just a pretty face; that box also delivers some real-time performance statistics on the running program. Its actually a simple, bare-bones Javascript profiler. That's right! Yo, I heard you like profiling, so I put a profiler in your movie, so that you can profile it while you watch.

The graph tracks the Render Time, calculated by measuring how long each run of main() takes in milliseconds. Since this is the function that draws each frame of the animation, it's effectively the animation's frame rate. Each vertical blue line on the graph illustrates the time taken by one frame. The red horizontal line is the target speed, which we set at 33ms to match the video file frame rates. Just below the graph, the speed of the last call to main() is given in milliseconds.

The profiler is also a handy browser rendering speed test. At the moment, the average render time in Firefox is 55ms, 90ms in IE 9, 41ms in Chrome, 148ms in Opera and 63ms in Safari. All the browsers were running on Windows XP, except for IE 9 which was profiled on Windows Vista.

The next metric below that is Canvas FPS (canvas frames per second), obtained by counting how many times main() is called per second. The profiler displays the latest Canvas FPS rate when the video is still playing, and when it ends it shows the average speed of all calls to main().

The last metric is Browser FPS, which measures how many the browser repaints the current window every second. This one is only available if you view the widget in Firefox, as it depends on a feature currently only available in that browser called window.mozPaintCount., a JavaScript property that keeps track of how many times the browser window has been repainted since the webpage first loaded.

The repaints usually occur when an event or action that changes the look of a page occurs, like when you scroll down the page or mouse-over a link. It's effectively the browser's real frame rate, which is determined by how busy the current webpage is.

To gauge what effect the un-optimized canvas animation had on mozPaintCount, I removed the canvas tag and all the JavaScript, so as to track the browser frame rate when playing just the video. My tests were done in Firebug's console, using the function below:

	var lastPaintCount = window.mozPaintCount;
	setInterval( function(){
		console.log( window.mozPaintCount - lastPaintCount );
		lastPaintCount = window.mozPaintCount;
	}, 1000);

The results: The browser frame rate was between 30 and 32 FPS when the video was playing, and dropped to 0-1 FPS when the video ended. This means that Firefox was adjusting its window repaint frequency to match that of the playing video, encoded at 30fps. When the test was run with the un-optimized canvas animation and video playing together, it slowed down to 16fps, as the browser was now struggling to run all the JavaScript and still repaint its window on time, making both the video playback and canvas animations sluggish.

We'll now start tweaking our program, and as we do so, we'll keep track of the Render Time, Canvas FPS and Browser FPS to measure the effects of our changes.

Step 5: Use `requestAnimationFrame()`

The last two JavaScript snippets above make use of the setTimeout() and setInterval() timer functions. To use these functions, you specify a time interval in milliseconds and the callback function you want executed after the time elapses. The difference between the two is that setTimeout() will call your function just once, while setInterval() calls it repeatedly.

While these functions have always been indispensable tools in the JavaScript animator's kit, they do have a few flaws:

First, the time interval set is not always reliable. If the program is still in the middle of executing something else when the interval elapses, the callback function will be executed later than originally set, once the browser is no longer busy. In the main() function, we set the interval to 33 milliseconds - but as the profiler reveals, the function is actually called every 148 milliseconds in Opera.

Second, there's an issue with browser repaints. If we had a callback function that generated 20 animation frames per second while the browser repainted its window only 12 times a second, 8 calls to that function will be wasted as the user will never get to see the results.

Finally, the browser has no way of knowing that the function being called is animating elements in the document. This means that if those elements scroll out of view, or the user clicks on another tab, the callback will still get executed repeatedly, wasting CPU cycles.

Using requestAnimationFrame() solves most of these problems, and it can be used instead of the timer functions in HTML5 animations. Instead of specifying a time interval, requestAnimationFrame() synchronizes the function calls with browser window repaints. This results in more fluid, consistent animation as no frames are dropped, and the browser can make further internal optimizations knowing an animation is in progress.

To replace setTimeout() with requestAnimationFrame in our widget, we first add the following line at the top of our script:

requestAnimationFrame = window.requestAnimationFrame || 
						window.mozRequestAnimationFrame || 
						window.webkitRequestAnimationFrame || 
						window.msRequestAnimationFrame || 
						setTimeout;

As the specification is still quite new, some browsers or browser versions have their own experimental implementations, this line makes sure that the function name points to the right method if it is available, and falls back to setTimeout() if not. Then in the main() function, we change this line:

1
2	setTimeout( main, frameDuration );

...to:

1	requestAnimationFrame( main, canvas );

The first parameter takes the callback function, which in this case is the main() function. The second parameter is optional, and specifies the DOM element that contains the animation. It is supposed to be used by to compute additional optimizations.

Note that the getStats() function also uses a setTimeout(), but we leave that one in place since this particular function has nothing to do with animating the scene. requestAnimationFrame() was created specifically for animations, so if your callback function is not doing animation, you can still use setTimeout() or setInterval().

Step 6: Use the Page Visibility API

In the last step we made requestAnimationFrame power the canvas animation, and now we have a new problem. If we start running the widget, then minimize the browser window or switch to a new tab, the widget's window repaint rate throttles down to save power. This also slows down the canvas animation since it is now synchronized with the repaint rate - which would be perfect if the video did not keep playing on to the end.

We need a way to detect when the page is not being viewed so that we can pause the playing video; this is where the Page Visibility API comes to the rescue.

The API contains a set of properties, functions and events we can use to detect if a webpage is in view or hidden. We can then add code that adjusts our program's behavior accordingly. We will make use of this API to pause the widget's playing video whenever the page is inactive.

We start by adding a new event listener to our script:

1
2	document.addEventListener( 'visibilitychange', onVisibilityChange, false);

Next comes the event handler function:

 
// Adjusts the program behavior, based on whether the webpage is active or hidden
function onVisibilityChange() {
	if( document.hidden && !video.paused ){  
		video.pause();  
	}else  if( video.paused ){  
		video.play();  
	}  
}

Step 7: For Custom Shapes, Draw the Whole Path At Once

Paths are used to create and draw custom shapes and outlines on the <canvas> element, which will at all times have one active path.

A path holds a list of sub-paths, and each sub-path is made up of canvas co-ordinate points linked together by either a line or a curve. All the path making and drawing functions are properties of the canvas's context object, and can be classified into two groups.

There are the subpath-making functions, used to define a subpath and include lineTo(), quadraticCurveTo(), bezierCurveTo(), and arc(). Then we have stroke() and fill(), the path/subpath drawing functions. Using stroke() will produce an outline, while fill() generates a shape filled by either a color, gradient or pattern.

When drawing shapes and outline on the canvas, it is more efficient to create the whole path first, then just stroke() or fill() it once, rather than defining and drawing each supbath at a time. Taking the profiler's graph described in Step 4 as an example, each single vertical blue line is a subpath, while all of them together make up the whole current path.

The stroke() method is currently being called within a loop that defines each subpath:

 
	mainContext.beginPath();				
	for( var j = 0; i < imax; i++, j += 2 ){				
		mainContext.moveTo( x + j, y ); // define the subpaths starting point
		mainContext.lineTo( x + j, y - speedLog[i] * graphScale );	// set the subpath as a line, and define its endpoint	
		mainContext.stroke(); // draw the subpath to the canvas
	}

This graph can be drawn much more efficiently by first defining all the subpaths, then just drawing the whole current path at once, as shown below.

 
	mainContext.beginPath();				
	for( var j = 0; i < imax; i++, j += 2 ){				
		mainContext.moveTo( x + j, y ); // define the subpaths starting point
		mainContext.lineTo( x + j, y - speedLog[i] * graphScale );	// set the subpath as a line, and define its endpoint
	}	
	mainContext.stroke(); // draw the whole current path to the mainCanvas.

Step 8: Use an Off-Screen Canvas To Build the Scene

This optimization technique is related to the one in the previous step, in that they are both based on the same principle of minimizing webpage repaints.

Whenever something happens that changes a document's look or content, the browser has to schedule a repaint operation soon after that to update the interface. Repaints can be an expensive operation in terms of CPU cycles and power, especially for dense pages with a lot of elements and animation going on. If you are building up a complex animation scene by adding up many items one at a time to the <canvas>, every new addition may just trigger a whole repaint.

It is better and much faster to build the scene on an off screen (in memory) <canvas>, and once done, paint the whole scene just once to the onscreen, visible <canvas>.

Just below the code that gets reference to the widget's <canvas> and its context, we'll add five new lines that create an off-screen canvas DOM object and match its dimensions with that of the original, visible <canvas>.

 
	var mainCanvas = document.getElementById("mainCanvas"); // points to the on-screen, original HTML canvas element
	var mainContext = mainCanvas.getContext('2d'); // the drawing context of the on-screen canvas element 
	var osCanvas = document.createElement("canvas"); // creates a new off-screen canvas element
	var osContext = osCanvas.getContext('2d'); //the drawing context of the off-screen canvas element
	osCanvas.width = mainCanvas.width; // match the off-screen canvas dimensions with that of #mainCanvas
	osCanvas.height = mainCanvas.height;

We'll then do as search and replace in all the drawing functions for all references to "mainCanvas" and change that to "osCanvas". References to "mainContext" will be replaced with "osContext". Everything will now be drawn to the new off-screen canvas, instead of the original <canvas>.

Finally, we add one more line to main() that paints what's currently on the off-screen <canvas> into our original <canvas>.

 
// As the scripts main function, it controls the pace of the animation
function main(){
	requestAnimationFrame( main, mainCanvas );
	if( video.paused || video.currentTime > 59  ){ return; }
	
	var now = new Date().getTime(); 
	if( frameStartTime ){ 
		speedLog.push( now - frameStartTime );
	}
	frameStartTime = now;
	if( video.readyState < 2 ){ return; }
	
	frameCount++;
	osCanvas.width = osCanvas.width; //clear the offscreen canvas
	drawBackground(); 
	drawFilm();
	drawDescription();
	drawStats();
	drawBlade();
	drawTitle();
	mainContext.drawImage( osCanvas, 0, 0 ); // copy the off-screen canvas graphics to the on-screen canvas
}

Step 9: Cache Paths As Bitmap Images Whenever Possible

For many kinds of graphics, using drawImage() will be much faster than constructing the same image on canvas using paths. If you find that a large potion of your script is spent repeatedly drawing the same shapes and outlines over and over again, you may save the browser some work by caching the resulting graphic as a bitmap image, then painting it just once to the canvas whenever required using drawImage().

There are two ways of doing this.

The first is by creating an external image file as a JPG, GIF or PNG image, then loading it dynamically using JavaScript and copying it to your canvas. The one drawback of this method is the extra files your program will have to download from the network, but depending on the type of graphic or what your application does, this could actually be a good solution. The animation widget uses this method to load the spinning blade graphic, which would have been impossible to recreate using just the canvas path drawing functions.

The second method involves just drawing the graphic once to an off-screen canvas rather than loading an external image. We will use this method to cache the title of the animation widget. We first create a variable to reference the new off-screen canvas element to be created. Its default value is set to false, so that we can tell whether or not an image cache has been created, and saved once the script starts running:

1
2	var titleCache = false; // points to an off-screen canvas used to cache the animation scene's title

We then edit the drawTitle() function to first check whether the titleCache canvas image has been created. If it hasn't, it creates an off-screen image and stores a reference to it in titleCache:

 
// renders the canvas title
function drawTitle(){
	if( titleCache == false ){ // create and save the title image
		titleCache = document.createElement('canvas');
		titleCache.width = osCanvas.width;
		titleCache.height = 25;
		
		var context = titleCache.getContext('2d');			
		context.fillStyle = 'black';
		context.fillRect( 0, 0, 368, 25 ); 
		context.fillStyle = 'white';
		context.font = "bold 21px Georgia";
		context.fillText( "SINTEL", 10, 20 );		
	}

	osContext.drawImage( titleCache, 0, 0 ); 
}

Step 10: Clear the Canvas With `clearRect()`

The first step in drawing a new animation frame is to clear the canvas of the current one. This can be done by either resetting the width of the canvas element, or using the clearRect() function.

Resetting the width has a side effect of also clearing the current canvas context back to its default state, which can slow things down. Using clearRect() is always the faster and better way to clear the canvas.

In the main() function, we'll change this:

1
2	osCanvas.width = osCanvas.width; //clear the off-screen canvas

...to this:

1
2	osContext.clearRect( 0, 0, osCanvas.width, osCanvas.height ); //clear the offscreen canvas

Step 11: Implement Layers

If you've worked with image or video editing software like Gimp or Photoshop before, then you're already familiar with the concept of layers, where an image is composed by stacking many images on top of one another, and each can be selected and edited separately.

Applied to a canvas animation scene, each layer will be a separate canvas element, placed on top of each other using CSS to create the illusion of a single element. As an optimization technique, it works best when there is a clear distinction between foreground and background elements of a scene, with most of the action taking place in the foreground. The background can then be drawn on a canvas element that does not change much between animation frames, and the foreground on another more dynamic canvas element above it. This way, the whole scene doesn't have to be redrawn again for each animation frame.

Unfortunately, the animation widget is a good example of a scene where we cannot usefully apply this technique, since both the foreground and background elements are highly animated.

Step 12: Update Only The Changing Areas of an Animation Scene

This is another optimization technique that depends heavily on the animation's scene composition. It can be used when the scene animation is concentrated around a particular rectangular region on the canvas. We could then clear and redraw just redraw that region.

For example, the Sintel title remains unchanged throughout most of the animation, so we could leave that area intact when clearing the canvas for the next animation frame.

To implement this technique, we replace the line that calls the title drawing function in main() with the following block:

 
	if( titleCache == false ){ // If titleCache is false, the animation's title hasn't been drawn yet
		drawTitle(); // we draw the title. This function will now be called just once, when the program starts
		osContext.rect( 0, 25, osCanvas.width, osCanvas.height ); // this creates a path covering the area outside by the title
		osContext.clip(); // we use the path to create a clipping region, that ignores the title's region
	}

Step 13: Minimize Sub-Pixel Rendering

Sub-pixel rendering or anti-aliasing happens when the browser automatically applies graphic effects to remove jagged edges. It results in smoother looking images and animations, and is automatically activated whenever you specify fractional co-ordinates rather than whole number when drawing to the canvas.

Right now there is no standard on exactly how it should be done, so subpixel rendering is a bit inconsistent across browsers in terms of the rendered output. It also slows down rendering speeds as the browser has to do some calculations to generate the effect. As canvas anti-aliasing cannot be directly turned off, the only way to get around it is by always using whole numbers in your drawing co-ordinates.

We will use Math.floor() to ensure whole numbers in our script whenever applicable. For example, the following line in drawFilm():

1
2	punchX = sample.x + ( j * punchInterval ) + 5; // the x co-ordinate

...is rewritten as:

1
2	punchX = Math.floor ( sample.x + ( j * punchInterval ) ) + 5; // the x co-ordinate

Step 14: Measure the Results

We've looked at quite a few canvas animation optimization techniques, and it now time to review the results.

This table shows the before and after average Render Times and Canvas FPS. We can see some significant improvements across all the browsers, though it's only Chrome that really comes close to achieving our original goal of a maximum 33ms Render Time. This means there is still much work to be done to get that target.

We could proceed by applying more general JavaScript optimization techniques, and if that still fails, maybe consider toning down the animation by removing some bells and whistles. But we won't be looking at any of those other techniques today, as the focus here was on optimizations for <canvas> animation.

The Canvas API is still quite new and growing every day, so keep experimenting, testing, exploring and sharing. Thanks for reading the tutorial.

How to create an SVG viewer in HTML, CSS, and JavaScript

noemail@noemail.org (Esther Vaati) — Sun, 15 Jun 2025 19:34:15 GMT

Our SVG viewer will have the following features:

An editor that allows us to write, paste, and edit SVG code
A validation mechanism that checks if the SVG Code is valid
A preview area where we’ll see the SVG in real-time
An export feature that will allow us to export the SVG

So, by the end of this tutorial, we’ll have something like this:

The SVG editor will have a text area to add, edit, or paste the SVG code.

<div class="editor">
   <div class="editor-header">SVG Code Editor</div>
   <textarea
      id="svgInput"
      placeholder="Paste your SVG code here and watch the magic happen..."
      ></textarea>
</div>

The preview area will have a preview container where the current SVG code will be injected for preview.

<div class="preview">
   <div class="preview-header">SVG Preview</div>
   <div class="preview-content">
      <div id="previewContainer" class="preview-container"></div>
   </div>
</div>

HTML Markup

Okay, let’s start with the building blocks. The HTML markup will look like this:

<div class="main">
  <header>
    <h1>SVG Preview Tool</h1>
    <p>Edit, preview, and export clean, scalable vector art</p>
  </header>
  <div class="container">
    <div class="editor">
      <div class="editor-header">SVG Code Editor</div>
      
      <textarea
        id="svgInput"
        placeholder="Paste your SVG code here and watch the magic happen..."
      ></textarea>
      
    </div>
    <div class="preview">
      <div class="preview-header">SVG Preview</div>
      <div class="preview-content">
        <div id="previewContainer" class="preview-container"></div>
      </div>
    </div>
  </div>

  <button id="exportBtn">Export SVG</button>
</div>

Styling with CSS

As you saw from the final demo, we want the editor and the preview to appear side by side on large screens and stack vertically on small devices. We'll achieve this layout using Flexbox and media queries.

Let's begin by applying some basic styles to the <body> and <header> elements as shown below.

@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  padding: 20px;
  font-family: "DM Mono", monospace;
}

header {
  max-width: 420px;
  text-align: center;
  margin-bottom: 40px;
}

h1 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 8px;
}

header p {
  font-size: 18px;
}

We'll apply the following styles to ensure all elements are stacked vertically.

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1000px;
  height: 90vh;
  min-height: 700px;
  margin-top: 50px;
}
.container {
  display: flex;
  height: calc(100% - 84px);
  gap: 20px;
  width: 100%;
}

We also want the text editor and the preview container to fill the available height of their parent containers.

.editor {
  border: 1px solid #7287f2;
}

.editor,
.preview {
  width: 50%;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.editor-header,
.preview-header {
  padding: 12px 20px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  width: 100%;
  color: white;

}

textarea {
  /* width: 100%; */
  height: 100%;
  border: none;
  padding: 20px;
  font-size: 13px;
  resize: none;
  background: #2e3138;
  color: white;
  overflow-y: auto;
}

textarea:focus {
  outline: none;
}

.preview-container {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background-color: #f9fafb;
  overflow-y: auto;
}

.preview-content {
  flex: 1;
  padding: 16px;
  overflow: hidden;
}

.svg-container {
  display: flex;
  justify-content: center;
  overflow: hidden;
}

Finally, let's style the export button, add styles for displaying error messages, and apply media queries for responsiveness.

.error-message {
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  padding: 16px;
  margin: 20px;
  border-radius: 6px;
  font-size: 13px;
}

button {
  margin-top: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 150px;
}

@media (max-width: 768px) {
  body {
    padding: 20px;
  }

  .main {
    width: 100%;
    height: 100vh;
  }

  .container {
    flex-direction: column;
    height: 100%;
  }

  .editor,
  .preview {
    width: 100%;
    height: 50%;
  }
}

Now the SVG tool interface looks like this:

JavaScript functionality

In this section, we'll perform some SVG code validation to ensure that any SVG code added to the editor is parsed before being displayed.

We'll also add a sample SVG code in the editor and display it in the preview area by default.

Let's start by getting the elements from the DOM and assigning them to variables for easy access.

1	const svgInput = document.getElementById("svgInput");
2	const previewContainer = document.getElementById("previewContainer");
3	const exportBtn = document.getElementById("exportBtn");

SVG Code Validation

The next step is to ensure that the SVG code is valid before adding it for preview. Create a function called loadSVG() that takes an SVG string as an argument.

Inside this function, we will first check if the SVG string is empty. If its empty, we'll display an error message.

function loadSVG(svgCode) {
previewContainer.innerHTML = "";
if (!svgCode.trim()) {
  showErrorMessage("Enter SVG code to see preview");
  return;
}}

The second form of validation will be done using the DOMParser to ensure the SVG Code is well formatted XML code.

DOMParser is an inbuilt interface in JavaScript that allows us to convert XML or HTML strings into a DOM Document object. Once the string is parsed into a DOM, you can query it using standard DOM methods like querySelector, etc.

To parse the XML, first create an instance of the DOMParser API. Then, parse the SVG string using the ParseFromString() method and set "image/svg+xml" as the MIME type.

1	const parser = new DOMParser();
2	const doc = parser.parseFromString(svgCode, "image/svg+xml");

Check for errors by querying the <parserror> element. If there are no errors, we will extract the <svg> element and inject it into the preview.

function loadSVG(svgCode) {
    previewContainer.innerHTML = "";
    if (!svgCode.trim()) {
        showErrorMessage("Enter SVG code to see preview");
        return;
    }

    try {
        const parser = new DOMParser();
        const doc = parser.parseFromString(svgCode, "image/svg+xml");
        const parserError = doc.querySelector("parsererror");
        if (parserError)
            throw new Error("XML parsing error: " + parserError.textContent);
        const svgElement = doc.querySelector("svg");
        if (!svgElement) throw new Error("No valid SVG element found");

        const container = document.createElement("div");
        container.className = "svg-container";
        container.innerHTML = svgCode;
        previewContainer.appendChild(container);
    } catch (error) {

        showErrorMessage("Invalid SVG code: " + error.message);
    }
}

Add event listeners

We now have a function that validates and displays the SVG code, so the next step is to ensure it runs before the SVG code in the input changes.

Add two event listeners to the textarea element as shown below:

svgInput.addEventListener("input", function () {
    loadSVG(this.value);
  });
  svgInput.addEventListener("paste", function () {
    loadSVG(this.value);
  });

The input event will be triggered whenever you type, delete, or change the contents of the text area, while the paste event will be triggered when you paste the content to the text area.

Load sample SVG and export SVG

The final step is to ensure that we have a default SVG when the tool opens. This is great to ensure the user sees how the tool works.

Create a function called loadDefaultSVG() which looks like this:

1	function loadDefaultSVG() {
2	const sampleSvg = `<svg xmlns="https://www.w3.org/2000/svg" width="160" height="190" viewBox="0 0 60 60"><defs><style>.cls-1{fill:#87e64b;}</style></defs><circle class="cls-1" cx="25.56" cy="61.15" r="2.86"/><path class="cls-1" d="M42,41.65l-16.13,1.73c-.3.03-.45-.34-.21-.53l15.78-12.29c1.02-.84,1.68-2.14,1.4-3.54-.28-2.14-2.05-3.54-4.29-3.26l-17.15,2.51c-.3.04-.46-.34-.22-.53l17-12.98c3.35-2.61,3.63-7.73.56-10.71-2.79-2.79-7.27-2.7-10.06.09L1.29,30.01c-1.02,1.12-1.49,2.61-1.21,4.19.47,2.52,2.98,4.19,5.5,3.73l14.77-3.01c.32-.07.49.36.22.54l-16.38,10.49c-2.05,1.3-2.98,3.63-2.33,5.96.65,3.07,3.73,4.84,6.71,4.1l24.49-6.03c.28-.07.48.25.3.47l-3.82,4.72c-1.02,1.3.65,3.07,2.05,2.05l12.58-10.34c2.24-1.86.75-5.5-2.14-5.22h-.03Z"/></svg>`;
3
4	svgInput.value = sampleSvg;
5	loadSVG(sampleSvg);
6	}
7
8	window.addEventListener("load", loadDefaultSVG);

In the code above, we set a default SVG string as the value of the editor (in the textarea), then we call the loadSVG() function which in turn renders the SVG in the preview area.

I’ve used the Envato “creative spark” for this example, but you can choose any default SVG you like

Export SVG

To export the SVG, we'll package it as an SVG file and trigger a download when the export button is clicked.

function exportSVG() {
    const blob = new Blob([svgInput.value], {
        type: "image/svg+xml"
    });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "svg-viewer.svg";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}
exportBtn.addEventListener("click", exportSVG);

Final demo

And we’re done! Here’s a reminder of the final codepen demo:

We built a fully functional SVG viewer using HTML, CSS, and JavaScript. This simple, yet powerful tool will allow you to preview and export your SVG graphics for use in your projects.

How to create a Liquid Glass effect with SVG filters

noemail@noemail.org (Esther Vaati) — Fri, 27 Jun 2025 06:31:59 GMT

In June 2025 Apple revealed its new visual language, along with the beta launch of iOS 26. Liquid Glass was the name given to their “new and expressive material”, bending light, and distorting UIs. It received a mixed response, and just weeks after its launch we’ve seen Apple dial down their glassy effects to some degree.

We’ve covered CSS glass effects on Tuts+ before, but today we’re going to do things a little differently. Let’s dive into SVG filters!

What is an SVG filter?

CSS provides us with the filter property that allows us to apply visual effects such as blur, brightness, contrast, saturation, and other effects to HTML elements.

However, for more advanced, almost cinematic effects, SVG filters are a better choice. Unlike CSS filters, SVG filters are composed of modular building blocks known as primitives. When these primitives are combined, they produce powerful visual effects which would not be possible with CSS alone.

Some of the effects that can be applied using filters include custom blurs, water or ripple effects, realistic drop shadows, lighting effects, etc.

SVG filters are created using the <filter> element whose syntax looks like this:

1	<filter>
2
3	</filter>

Just like any other SVG element, the <filter> element accepts several attributes that control how it behaves and how much space it covers. These attributes determine factors such as position, size, and blur of the filter.

1	<svg width="200" height="200">
2	<filter id="myFilter" x="0" y="0" width="100%" height="100%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse"/>
3	</svg>

id: used to identify the filter.
x , y are the positions of the filter relative to the target element.
width and height: specify the size to be covered by the filter.
filterUnits is the coordinate system for x, y, width, and height.
primitiveUnits defines the coordinate system inside the filter primitives

Inside the <filter> element is where you define the primitives. Primitives are also SVG elements and they include <feGaussianBlur>, <feOffset>, <feColorMatrix>, <feDisplacementMap>, etc.

In this tutorial, we’ll only focus on the <feGaussianBlur> and <feDisplacementMap> filters. These two are commonly used together to create effects such as glass distortion, ripples, and frosted backgrounds.

For example, to blur an element, we use the <feGaussianBlur> primitive which looks like this:

1	<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />

The in attribute defines the input source of the filter primitive while the stDeviation determines the strength of the blur. Once we define the SVG filter, we’ll apply it to an HTML element or another SVG by referencing its id using the filter property.

In action

So for example, suppose we have a green SVG circle that looks like this:

1	<svg width="200" height="200">
2	<circle cx="100" cy="100" r="80" fill="green" />
3	</svg>

If we needed to apply a blur to the SVG circle, we would create a filter containing a <feGaussianBlur> primitive, and then apply the filter to the circle as shown below.

<svg width="200" height="200">
  <filter id="blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
  </filter>
  <circle cx="100" cy="100" r="80" fill="green" filter="url(#blur)"/>
</svg>

SVG primitives typically have both an input(in) as well as an output(result). The output of one primitive is used as input of another primitive hence creating a chain of primitives for more advanced effects.

In this code snippet, in=sourceGraphic means that the blur will be applied to the original graphic, in this case, the green circle, while the stdDeviation attribute controls the strength of the blur. The higher the value, the more intense and spread out the blur effect becomes.

The <feImage> filter primitive is used to bring an external image or SVG fragment into the filter chain. It does not apply any effects, rather it loads an image from a URL or base64 data.

The output is then used by other primitives like the <feDisplacementMap> to create custom effects such as distortions, lighting, blending, etc.

For example, to load an image URL into the <feImage> filter primitive, we’ll have something like this:

<feImage
  href="https://example.com/image.png"
  x="0" y="0"
  width="100%" height="100%"
  result="map" />

`feDisplacementMap` Filter Element

The <feDisplacementMap> filter primitive is responsible for creating distortion effects in SVG. It does this by distorting the color values using the pixels of a displacement map( loaded using the <feImage > filter) to shift pixels of the original graphic.

<feDisplacementMap
  id="disp"
  in="blur"
  in2="map"
  scale="0.8"
  xChannelSelector="R"
  yChannelSelector="G"
></feDisplacementMap>

For example, in the code above, the <feDisplacementMap> filter primitive takes 2 inputs where:

in="blur" is the output of the Gaussian blur
in2="map" is the displacement map image

The xChannelSelector attribute specifies which color channel from the displacement image is used to displace pixels along the x-axis while the yChannelSelector attribute specifies which color channel from the displacement image is used to displace pixels along the y-axis.

These channels can either be R(Red), G(Green) B(Blue) and A(Alpha). The scale attributes determine the intensity of the distortion effect.

Now that we know how SVG filters work and how to create them, we can create a liquid glass distortion effect and apply it to an HTML element.

Create a Liquid Glass button with SVG filters

We’ll start with the HTML markup, a simple button and a span element.

1	<button class="glass-button">
2	<span>CRYSTAL</span>
3	</button>

Styling with CSS

To create a realistic glass button, we need three key ingredients:

A background blur to blur whatever is behind the button and create a translucent frosted look. We will achieve this using the feGaussian filter.
A background image will enhance the realism of the blur.
Transparency; we need to make the button partially see-through. Without the semi-transparent background, the button would be solid, hence hiding the blur effect.

Let’s add a background image to the page.

body {
  height: 150vh;
  background: url("https://images.unsplash.com/photo-1683657535824-5b570c7a1749?q=80&w=764&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
}

We’ll also add a simple keyframe animation that will change the background’s position over time, hence creating a smooth floating animation.

body {
  height: 150vh;
  background: url("https://images.unsplash.com/photo-1683657535824-5b570c7a1749?q=80&w=764&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
  animation: floatBG 15s ease-in-out infinite;
}

@keyframes floatBG {
  0%,
  100% {
    background-position: center center;
  }
  25% {
    background-position: 30% 70%;
  }
  50% {
    background-position: 70% 30%;
  }
  75% {
    background-position: 40% 60%;
  }
}

Add these styles to the button.

.glass-button {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
outline: none;
width: 350px;
height: 180px;
border-radius: 999px;

}

.glass-button span {
font-family: "Orbitron", sans-serif;
color: white;
font-size: 2.5rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;

}

We have positioned the button at the center using fixed:position so it stays in place when the background animates. This will ensure the glass effect is visually enhanced.

By default, the button has a solid background, we’ll replace it with a transparent gradient and a semi-transparent border to also enhance the glass illusion.

.glass-button {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  outline: none;
  width: 350px;
  height: 180px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
}

So far, the button looks like this:

We need to make it more glassy by adding SVG filters.

Glass distortion

To create the glass distortion effect with SVGs, we’ll use a combination of blur, displacement, and a texture map. Let’s start by defining the <filter> element where our primitives will be defined.

1	<svg style="position: absolute; width: 0; height: 0;">
2	<filter id="glassFilter">
3	</filter>
4	</svg>

Next, we’ll add a Gaussian blur to the source graphic using the <feGaussianBlur> primitive. We’ll also ensure it’s available for use in the next chaining process by storing its output in the result attribute.

1	<feGaussianBlur in="SourceGraphic" stdDeviation="0.02" result="blur" />

A good displacement map image should have high contrast and noticeable color variations. This is important because the distortion depends on the intensity of the color channels.

To ensure the displacement image covers the whole filter area, we have defined x,y, width, and height. Depending on the size of the element the filter will be applied to, you will need to adjust these values to achieve the desired result.

1	<feImage x="-50%" y="-50%" width="200%" height="200%" result="map"/>

As you can see in the <feImage> filter code above, we haven’t set the href directly because the base64-encoded version of the image would be very long. Instead, we’ll use JavaScript to set the href dynamically.

Add this code in your JavaScript file

const feImage = document.querySelector('feImage');
fetch('https://essykings.github.io/JavaScript/map.png')
    .then((response) => {
        return response.blob();
    })
    .then((blob) => {
        const objURL = URL.createObjectURL(blob);

        feImage.setAttribute('href', objURL);
    });

Here, we first select the <feImage> element using querySelector, then we fetch the image from a hosted URL, convert the response into a Blob (a binary representation of the image), and then assign the objectURL as the href value of the <feImage>.

We now have the blurred content and the image map, so let’s combine them using the <feDisplacmentMap> filter to get the final glass distortion effect which will be added to the button.

1	<feDisplacementMap id="disp" in="blur" in2="map" scale="0.8" xChannelSelector="R" yChannelSelector="G"/>

Now, the final SVG filter looks like this:

<svg style="position: absolute; width: 0; height: 0">
  <filter id="glass" x="-50%" y="-50%" width="200%" height="200%" primitiveUnits="objectBoundingBox">
    <feImage x="-50%" y="-50%" width="200%" height="200%" result="map"/>
    <feGaussianBlur in="SourceGraphic" stdDeviation="0.02" result="blur"/>
    <feDisplacementMap id="disp" in="blur" in2="map" scale="0.8" xChannelSelector="R" yChannelSelector="G"/>
  </filter>
</svg>

Apply the SVG glass distortion effect on the button using the backdrop-filter property.

1	backdrop-filter: url(#glass);

Finally, to enhance the interactivity of the glass button, let’s add a zoom effect on hover.

1	.glass-button:hover {
2	transform: translate(-50%, -50%) scale(1.05);
3	}

Final result

Here is the final result of the glass button in action:

Conclusion

We have seen how powerful SVG filters can be, with just a few SVG filter primitives, we have created a realistic glass distortion effect, similar to Apple’s Liquid Glass effect. Now you can use SVG filters to create visual styles directly in your browser.

Create a color contrast checker with HTML, CSS, and JavaScript

noemail@noemail.org (Esther Vaati) — Mon, 26 May 2025 20:57:29 GMT

By “color contrast” we’re referring to the difference in brightness between foreground and background colors. In simpler terms, it defines how easy it is for the human eye to recognize text or images on a coloured background.

The Web Content Accessibility Guidelines (WCAG) provide specific recommendations regarding color contrast for text to make web content accessible and visible to people with impaired vision.

It recommends a minimum contrast ratio of 4.5:1 for normal text. For larger text, the minimum recommended contrast ratio is 3:1. According to the WCAG, larger text is defined as 24px or larger for normal-weight fonts and 18.66px or larger for bold text.

For example, if you have a dark background with dark-colored text, the text will not be easily readable, as seen below.

How is contrast ratio calculated?

The contrast ratio between two colors is calculated using the following formula.

1	contrast ratio = (L1 + 0.05) /( L2+0.05)

L1 is the relative luminance of the lighter color, and L2 is the relative luminance of the darker color. While higher contrast is generally recommended to meet accessibility standards, moderate contrast is the best as it reduces eye strain.

Luminance, on the other hand, is the perceived brightness of a color, and it's calculated based on RGB values of that color as shown below:

1	R0 = R/255
2	G0 = G/255
3	B0 = B/255

Once we obtain these values, we linearise each component as follows:

let r = R0 <= 0.03928 ? R0 / 12.92 : Math.pow((R0 + 0.055) / 1.055, 2.4);

let g = G0 <= 0.03928 ? G0 / 12.92 : Math.pow((G0 + 0.055) / 1.055, 2.4);

let b = B0 <= 0.03928 ? B0 / 12.92 : Math.pow((B0 + 0.055) / 1.055, 2.4);

Finally, we compute the relative luminance like so:

1	Luminance = 0.2126 * R0+0.07152* G0+0.0722*B0

Now that we know how to calculate the contrast ratio, let’s build our own color contrast tool!

Here’s what we’re working towards

HTML Structure

The HTML structure will have the following elements:

Color pickers for selecting the foreground and background colors
A display area to indicate whether the selected color combination meets the WCAG guidelines.
A preview area that displays sample text to visually demonstrate readability.
A paragraph displaying the contrast ratio of the selected colors.

The code for the HTML markup will look like this:

<div class="container">
  <h1>Color Contrast Checker</h1>
  <div class="color-pickers">
    <div class="color-picker">
      <label for="text-color">Text Color:</label>
      <input type="color" id="text-color" value="#000000" />
      <input type="text" id="text-color-hex" value="#000000" />
      <p id="text-color-error" class="error-message"></p>
    </div>

    <div class="color-picker">
      <label for="bg-color">Background Color:</label>
      <input type="color" id="bg-color" value="#FFFFFF" />
      <input type="text" id="bg-color-hex" value="#FFFFFF" />
      <p id="bg-color-error" class="error-message"></p>
    </div>
  </div>

  <div class="output">
    <div class="results">
      <div class="results-item">
        <h3>WCAG AA</h3>
        <p>Normal Text: <span id="normal_text_aa">Pass</span></p>
        <p>Large Text: <span id="large_text_aa">Pass</span></p>
      </div>
      <div class="results-item">
        <h3>WCAG AAA</h3>
        <p>Normal Text: <span id="normal_text_aaa">Pass</span></p>
        <p>Large Text: <span id="large_text_aaa">Pass</span></p>
      </div>
    </div>

    <div id="preview" class="preview">
      <p>This is a preview text</p>
    </div>

    <div class="ratio">
      <h2>Contrast Ratio: <span id="contrast-ratio"></span></h2>
    </div>
  </div>

  <div class="error">
    <p id="error-message"></p>
  </div>
</div>

Styling with CSS

We'll start by adding some basic styles to the body, the enclosing container, and the title.

body {
  background-color: #fff;
  padding: 20px;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
  gap: 8px;
  border-radius: 8px;
  
}
h1 {
  text-align: center;
  margin-bottom: 32px;
  color: #333;
}

Align the color picker elements using Flexbox to ensure child elements (i.e. the input and label) are stacked vertically.

.color-pickers {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 20px;
}
.color-picker {
  display: flex;
  flex-direction: column;
  width: 160px;
  gap: 4px;
}

Style the inputs and labels as shown below:

label {
  font-weight: 600;
  color: rgb(0, 0, 0, 0.7);
}
input[type="color"] {
  width: 100%;
  height: 40px;
  border: 1px solid rgb(0, 0, 0, 0.05);
  border-radius: 4px;
  cursor: pointer;
}
input[type="text"] {
  padding: 8px 12px;
  border: 1px solid rgb(0, 0, 0, 0.05);
  border-radius: 4px;
  text-transform: uppercase;
}

The display area will indicate whether the selected colors have passed the minimum contrast ratio requirement. If they fail, we will show a fail message, otherwise a pass message will be displayed.

Here are the styles for the display area.

.results {
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
  justify-content: center;
}
.results-item {
  text-align: center;
  padding: 15px;
  min-width: 130px;
  border: 1px solid rgb(0, 0, 0, 0.05);
  border-radius: 8px;
}
.results-item h3 {
  margin-bottom: 10px;
  text-align: center;
  color: #333;
}
.results-item p {
  margin-bottom: 5px;
}
.pass {
  color: #38a169;
  font-weight: bold;
}
.fail,
.error-message {
  color: #e53e3e;
  font-weight: bold;
}

Add these styles to the preview and contrast ratio elements .

.preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  margin-bottom: 20px;
  font-size: 24px;
  border: 1px solid rgb(0, 0, 0, 0.05);
  width: 100%;
  max-width: 600px;
}

.ratio {
  text-align: center;
  font-style: italic;
  color: #333;
}

We'll also have styles for error messages.

.error {
  color: #e53e3e;
}
.error-message {
  display: none;
}

Our simple interface now looks like this:

Color contrast functionality with JavaScript

To get accurate color contrast ratios, we'll use the WCAG contrast checker API, which provides an easy way to check the contrast between any two colors. The color contrast ratio is obtained by providing the foreground and background color values to the API, as shown below.

1	https://webaim.org/resources/contrastchecker/?fcolor=0000FF&bcolor=FFFFFF&api

Here we are using black for the text and white for the background.

The output is a JSON object that looks something like this:

{
  "ratio": "8.59",
  "AA": "pass",
  "AALarge": "pass",
  "AAA": "pass",
  "AAALarge": "pass"
}

A ratio of 8.59 means the two colors pass the minimum color contrast guidelines. The pass status means the colors also pass the WCAG requirements for both normal text (AA) and large text (AA).

The pass on AAA means the contrast ratio passes the most strict compliance level.

Select all the elements we'll be working with.

const textColorInput = document.getElementById("text-color");
const bgColorInput = document.getElementById("bg-color");

const textColorHex = document.getElementById("text-color-hex");
const bgColorHex = document.getElementById("bg-color-hex");
const textColorError = document.getElementById("text-color-error");
const bgColorError = document.getElementById("bg-color-error");
const normal_text_aa = document.getElementById("normal_text_aa");
const large_text_aa = document.getElementById("large_text_aa");
const normal_text_aaa = document.getElementById("normal_text_aaa");
const large_text_aaa = document.getElementById("large_text_aaa");
const preview = document.getElementById("preview");
const contrastRatio = document.getElementById("contrast-ratio");

Next, we'll get the currently selected color values from each of the color picker inputs. Create a function called updateColors which looks like this:

 function updateColors() {
    const textColor = textColorInput.value;
    const bgColor = bgColorInput.value;

    preview.style.color = textColor;
    preview.style.backgroundColor = bgColor;

  }

This function gets the current values and applies them to the preview. The selected background color is used as the preview's background while the selected foreground color is applied to the text.

Invoke the updateColors function to ensure the preview visually reflects how the text appears on the chosen background.

1	updateColors();

Color validation

Before calculating the contrast ratio of the selected colors, we'll first need to validate and sync the color values. This will ensure that when a color is selected using the color picker, the corresponding HEX input value is updated and vice versa.

To do that, we'll create two functions, one for validating the foreground and another for validating the background color.

Create a function called updateTextColorFromHex .

1	function updateTextColorFromHex() {}

Get the current hex value from the text color input.

1	let hexValue = textColorHex.value;

Check if the value provided starts with the # symbol, if it doesn't, append the symbol at the start of the value.

1	if (hexValue.charAt(0) !== "#") {
2	hexValue = "#" + hexValue;
3	}

Perform another validation to ensure the provided HEX value is a valid and existing color.

1	if (!isValidHex(hexValue)) {
2	textColorError.textContent = "incorrect color";
3	return;
4	}

If the hex value of the color provided is invalid, show a message and exit the function. If it's a valid color, clear the error message and sync the input value and the color picker to ensure the text input and the color input both show the same color.

1	textColorError.textContent = "";
2	textColorError.style.display = "block";
3	textColorInput.value = hexValue;
4	textColorHex.value = hexValue;

The helper isValidHex function uses a regular expression to test the input value and it looks like this:

1	function isValidHex(hex) {
2	return /^#([A-Fa-f0-9]{6}\|[A-Fa-f0-9]{3})$/.test(hex);
3	}

We'll perform a similar validation for the background color.

  function updateBgColorFromHex() {
    let hexValue = bgColorHex.value;
    if (hexValue.charAt(0) !== "#") {
      hexValue = "#" + hexValue;
    }

    if (!isValidHex(hexValue)) {
      bgColorError.textContent = "incorrect color";
      bgColorError.style.display = "block";


      return;
    }
    bgColorError.textContent = "";
    bgColorInput.value = hexValue;
    bgColorHex.value = hexValue;
    updateColors()
  }

Event listeners

It is also important to ensure that when the color or text input change, the corresponding values are updated. We do this by adding input event listeners to the elements.

textColorHex.addEventListener("input", updateTextColorFromHex);
bgColorHex.addEventListener("input", updateBgColorFromHex);

textColorInput.addEventListener("input", function () {
  textColorHex.value = textColorInput.value;
  updateColors();
});

bgColorInput.addEventListener("input", function () {
  bgColorHex.value = bgColorInput.value;
  updateColors();
});

An Introduction to JavaScript Event Listeners for Web Designers

Anna Monus

25 Jul 2023

Contrast checker

The next step is to pass the current foreground and background hex color values to the API.

Create a function called getContrastRatio, which takes two arguments namely, foreground and background.

1	function getContrastRatio(foreground, background) {
2	//logic goes here
3
4	}

Since the API takes the values without the # symbol, we'll remove the # character using the replace() method, as shown below.

1	const fcolor = foreground.replace("#", "");
2	const bcolor = background.replace("#", "");

Here, we are replacing the # symbol with an empty string. For example, if the hex value is #FFFFFF, the output will be FFFFFF.

Append the values to the API string.

1	const apiUrl = `https://webaim.org/resources/contrastchecker/?
2	fcolor=${fcolor}&bcolor=${bcolor}&api`;

Using fetch(), make a network request to the WebAIMi API and handle any occurring errors gracefully.

fetch(apiUrl)
  .then((response) => {
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    return response.json();
  })

Update the results

If the API response is successful, we'll get a JSON object containing the contrast ratio and the output of the contrast check, either a fail or a pass in this format.

{
  "ratio": "8.59",
  "AA": "pass",
  "AALarge": "pass",
  "AAA": "pass",
  "AAALarge": "pass"
}

where:

AA - normal text
AALarge - large text
AAA - strict compliance for normal text
AAALarge - strict compliance for large text

We'll then update the results to the page by appending them to the appropriate elements.

normal_text_aa.textContent = data.AA === "pass" ? "Pass" : "Fail";
normal_text_aa.className = data.AA === "pass" ? "pass" : "fail";

large_text_aa.textContent = data.AALarge === "pass" ? "Pass" : "Fail";
large_text_aa.className = data.AALarge === "pass" ? "pass" : "fail";

normal_text_aaa.textContent = data.AAA === "pass" ? "Pass" : "Fail";
normal_text_aaa.className = data.AAA === "pass" ? "pass" : "fail";

large_text_aaa.textContent = data.AAALarge === "pass" ? "Pass" : "Fail";
large_text_aaa.className = data.AAALarge === "pass" ? "pass" : "fail";

Here, each result is displayed as either a Pass or Fail, accompanied by styling that uses red for fail and green for pass.

The final step is to update the updateColors() function to ensure the selected colors are passed to the getContrastRatio() function.

function updateColors() {
  const textColor = textColorInput.value;
  const bgColor = bgColorInput.value;
  preview.style.color = textColor;
  preview.style.backgroundColor = bgColor;
  getContrastRatio(textColor, bgColor);
}

Don’t forget to update the contrast ratio by setting the ratio value as the text content.

1	contrastRatio.textContent = parseFloat(data.ratio);

The final demo

Here is the final demo!

Conclusion

That's a wrap for this tutorial! We have learned how to build a tool that checks contrast ratios to help adhere to WCAG guidelines. Hopefully, you now feel equipped to create more accessible and user-friendly designs.

How to create a mesh gradient generator in HTML, CSS and JavaScript

noemail@noemail.org (Esther Vaati) — Wed, 14 May 2025 22:05:59 GMT

What we’re building

Here’s the gradient generator we’re going to build. Click the button at the bottom to generate random new mesh gradients! Once they’re generated, you can copy the CSS to recreate the gradients using the background-image property in combination with radial-gradient.

Wait, what’s a mesh gradient?

Good question. Mesh gradient is the name given to a gradient in which multiple colors blend smoothly across a canvas, creating dreamy, colorful patterns. Mesh gradients have been a popular design trope on the web for a while, often seen in website backgrounds, hero sections, and app splash screens.

Stripe's homepage is a classic example that uses mesh gradients to create a colorful and dynamic aesthetic.

Now we’re up to speed, let’s get building!

Our simple HTML markup

We'll start with a simple HTML markup which will have the following elements:

A header title
A preview box container to show random mesh gradients in real time.
A button for generating new gradients.
A code block element to display the CSS used to create each mesh gradient.
A button to copy the generated CSS

Here is the HTML.

<div class="container">
  <h1>Mesh Gradient Generator</h1>
  <div id="preview" class="preview"></div>
  <button id="generateBtn" class="button">Generate New Mesh</button>
  <div id="cssCode" class="css-code"></div>
  <button id="copyButton" class="copy-button">Copy CSS</button>
</div>

Styling the mesh tool with CSS

Now let's make the interface more colorful. We'll use some basic styles for all the elements and also set up a default mesh gradient in the preview element.

Add these styles to your CSS file.

body {
    margin: 0;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    background-color: #fefefe;
    
  }
  h1 {
    margin-top: 20px;
    color: #333;
    font-size: 2rem;
  }

  .container {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }


  .button {
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    color: #000;
    border: 1px solid #c1c5ce;
    background-color: #fff;
  }
 
  .css-code {
    width: 100%;
    padding: 16px;
    border-radius: 8px;
    font-family: monospace;
    white-space: pre-wrap;
    background-color: #f5f5f5;
    font-size: 14px;
  }
  .copy-button {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    color: #fff;
    border: none;
    background-color: #005CE6;
  }
  .copy-button:hover {
    background-color: #1a4e9d;
  }

How Radial Gradients Work

The magic effect of mesh gradients comes from CSS radial gradients. So what exactly is a radial gradient? In CSS, a radial gradient generates a smooth transition between two or more colors, starting from a specific point and radiating outward towards another color or even transparency.

Here is an example of a radial gradient consisting of 2 colors.

1	background: radial-gradient(at 40% 20%, #fc2ee7, #6fa17d);

The values 40% 20% represent the center of the gradient being positioned 40% from the left and 20% from the top of the enclosing element. The radial gradient above will look like this:

Let's add two more radial gradients to our box. The CSS for the background of the box will now look like this:

background: radial-gradient(at 40% 20%, #FC2EE7, transparent 60%),
 radial-gradient(at 70% 80%, #6FA17D, transparent 60%),
 radial-gradient(at 20% 70%, #2EFCDB, transparent 60%),
 radial-gradient(at 80% 30%, #FFA62E, transparent 60%);
 

Here is the output of layering 3 radial gradients:

As you can see, the background looks richer and vibrant because we are using multiple colors and placing them at random positions on the canvas.

We'll layer several of these radial gradients at different positions, using a variety of unique colors at each position to create rich and colorful mesh gradients.

Add a default gradient to the preview

We'll use the same layering technique to add a default mesh gradient to the preview element. For the preview, we'll use 7 radial gradients. You can use any number of gradients, but ensure each gradient has unique positions and unique colors.

Update the styles for the preview container to look like this:

1	background-image: radial-gradient(
2	at 30% 15%,
3	rgb(255, 102, 204) 0px,
4	transparent 50%
5	),
6	radial-gradient(at 75% 10%, rgb(102, 255, 204) 0px, transparent 50%),
7	radial-gradient(at 5% 65%, rgb(255, 233, 102) 0px, transparent 50%),
8	radial-gradient(at 85% 55%, rgb(102, 153, 255) 0px, transparent 50%),
9	radial-gradient(at 10% 90%, rgb(255, 153, 51) 0px, transparent 50%),
10	radial-gradient(at 90% 95%, rgb(153, 255, 102) 0px, transparent 50%),
11	radial-gradient(at 15% 5%, rgb(204, 102, 255) 0px, transparent 50%);

Here we have defined multiple radial-gradients() layers each positioned at different x and y coordinates. Each gradient starts with a unique color at the center and fades out to transparency .

After combining the radial gradients, we achieve a colorful mesh gradient which looks like this:

Generating random gradients

It's time to create randomised mesh gradients. We want to ensure that every time you click the generate button, a new mesh gradient is generated and updated in the preview.

We'll also show a code block containing the exact CSS styles used to create the current mesh gradient.

Let's first get the elements:

1	const preview = document.getElementById("preview");
2	const generateBtn = document.getElementById("generateBtn");
3	const cssCode = document.getElementById("cssCode");
4	const copyButton = document.getElementById("copyButton");

Generate random colors and X, Y coordinates

To apply radial gradients to any element, we first need to determine the x and y coordinates where each radial gradient will be applied. To do that, we'll generate random x and y coordinates on the canvas, ensuring that the radial gradients are randomly distributed across the entire element.

function generatePoints() {
 const x = Math.floor(Math.random() * 100);
 const y = Math.floor(Math.random() * 100);
 return `${x}% ${y}%`;
}

The generatePoints() function will generate random x, y coordinates for each gradient. In CSS radial gradients, these coordinates are defined using percentages.

0% 0% will place the gradient at the top-left corner of the element
100% 100% will place the gradient at the bottom-right center of the element
50% 50 % will place the gradient at the center of the element.

We'll create a similar function for generating random colors.

function generateRandomColor() {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    return `rgb(${r}, ${g}, ${b})`;
  }

Now that we have our points and colors, we'll use them to determine where each radial gradient will be placed.

Create a function called generateRandomGradient().

1	function generateRandomGradient() {
2
3	}

To add variety and enhance the richness of our mesh gradients, we'll use Math.random() and Math.floor() to create between 5 and 8 radial gradients.

1	const points = Math.floor(Math.random() *4) +5 ;

Create an empty gradients array to contain the radial gradients .

1	let gradients = [];

Now we'll use a for loop to create radial gradients based on the number of points. For each iteration, the loop will generate a random position, a random color, and create a radial gradient using the position and color.

for (let i = 0; i < points; i++) {
      const position = generatePoints();
      const color = generateRandomColor();

      gradients.push(
        `radial-gradient(at ${position}, ${color} 0px, transparent 50% )`
      );
    }

Finally, we combine the radial gradients into one string and set the string as the background of the preview element.

This will update the preview with the new mesh gradient.

1	preview.style.backgroundImage = backgroundImage;

The generateRandomGradient() function now looks like this:

function generateRandomGradient() {
  const points = Math.floor(Math.random() * 4) + 5;
  const backgroundColor = generateRandomColor();

  let gradients = [];
  for (let i = 0; i < points; i++) {
    const position = generatePoints();
    const color = generateRandomColor();

    gradients.push(
      `radial-gradient(at ${position}, ${color} 0px, transparent 50% )`
    );
  }

  const backgroundImage = gradients.join(", ");
  preview.style.backgroundImage = backgroundImage;
  preview.style.backgroundColor = backgroundColor;

}

To ensure a new mesh gradient is generated when the generate button is clicked, we'll hook the button to the generateRandomGradient function.

We do this by adding a click event listener like this:

1	generateBtn.addEventListener("click", generateRandomGradient);

Now, when you click the generate button, a new colorful mesh gradient will be generated.

Update and Copy Generated CSS

We also want to show a code block containing the CSS code for the current mesh gradient and update it every time a new mesh gradient is generated.

To do this, we will create a new function called updateCSS(), which looks like this:

function updateDefaultCss() {
  const computedStyle = getComputedStyle(preview);
  const backgroundColor = computedStyle.backgroundColor;
  const backgroundImage = computedStyle.backgroundImage;
  console.log(backgroundImage);
  cssCode.innerText = `.mesh-gradient {
background-image: ${backgroundImage};
background-color: ${backgroundColor};
}`;
}

In this function, we use getComputedStyle() to read the current styles of the preview box. getComputedStyle() is a method used to get any CSS property currently applied to an HTML element.

In our case, we use it to get the background color (backGroundColor) and the background image (backgroundImage) and update the values on the code block element.

We also need to ensure this function runs every time a new mesh gradient is generated. Update the generateRandomGradient as shown below.

1	function generateRandomGradient() {
2	// the rest of the code
3	updateDefaultCss();
4	}

The final step is to ensure that when the Copy CSS button is clicked, the values are copied to the clipboard.

1	copyButton.addEventListener("click", () => {
2	navigator.clipboard.writeText(cssCode.innerText);
3	alert("CSS Code Copied!");
4	});

Final Demo

Here is the final demo!

Conclusion

That's a wrap for this tutorial. We've learned how to use radial gradients to create beautiful and colorful mesh gradients with CSS!

How to edit text in Lottie images

noemail@noemail.org (Andrei Marius) — Thu, 29 May 2025 19:00:42 GMT

In the following tutorial, I'll show you how to edit text in Lottie images. We have a tutorial on how to create a Lottie text animation, and here we'll cover the alternative that you have, how to access and modify the text, and how to export your updated animations.

1. How to edit text in Lottie images using an After Effects source file

Changing text in a Lottie animation isn't as straightforward as editing a regular image. To edit text in a Lottie animation, you will need access to the source file.

Step 1

If you have access to the original After Effects file, open it and locate the text in your timeline. Double-click it, and as long as the text is not turned into vector shapes, you should be able to edit it.

Of course, once you make the changes, you'll need to save a new version of your Lottie animation with the updated text.

Step 2

If the original text was converted to vector shapes, you won’t be able to edit it as text, only the shapes that make up the text.

2. How to edit text in Lottie images using a Figma source file

If you have access to the original Figma file, open it and select the text.

Just like in After Effects, you can double-click to edit the text, as long as it hasn’t been turned into vector shapes. Again, be sure to save a new version of your Lottie animation with the updated text after making the changes.

3. How to edit text in Lottie images using the Lottie Editor

In theory, you should be able to edit text in a Lottie animation using the Lottie Editor, but from my experience I wouldn’t rely on this option as it comes with various limitations and bugs.

Things might improve in the future, but for now, it's not a dependable solution.

tip

Always keep the source files, and avoid converting text to vector shapes if you think you’ll need to edit it later.

Congrats! You're done

I hope you've enjoyed this tutorial and can apply these techniques in your future Lottie animations. You can find some great sources of inspiration at Envato, with interesting solutions to improve your Lottie animations.

Want to Learn More?

At Envato Tuts+, we have loads of tutorials on everything you need to know about Lottie animations. Take a look!

How to create a Lottie loading animation

noemail@noemail.org (Andrei Marius) — Wed, 28 May 2025 15:57:41 GMT

Ready to learn how to create a Lottie loading animation using Figma? We’ll walk through designing the animated graphic, prototyping it, and exporting it using the LottieFiles plugin. All you need is a free Figma account. If you're starting, here's everything you need to know about Lottie animations, and if you're ready to get inspired, let's dive in.

How to create a simple frame
How to create the main component of the Lottie loader animation
How to add variants of the Lottie loading animation
How to prototype your Lottie loading animation
How to create the Lottie loading animation
How to preview and save the loading animation as Lottie

1. How to create a simple frame

Start with the Frame Tool (F) and use it to create an 850 x 600 frame. Add a Fill for this frame and set its color to #5300C0.

2. How to create the main component of the Lottie loader animation

Step 1

Using the same tool, create a 540 x 110 px frame. Add a Fill for this second frame and use a dark grey. The color is not important as we'll remove it a few steps later.

Step 2

Keep focusing on your second frame and pick the Ellipse Tool (O). Use it to create an 80 px circle, make it white (#FFFFFF), and place it exactly as shown in the second image. With the circle selected, you can hold down the Alt key to check out the spacing between the edges of your circle and the edges of the frame.

Step 3

Select your circle using the Move Tool (V), hold down the Alt and Shift keys, and then simply drag a copy of the circle to the right. Leave a 60 px gap between your two circles. Once you're done, keep the new circle selected and press Control-D twice. This will add another two copies of the circle, as shown in the following images.

Step 4

As promised, select your second frame and remove the Fill color.

Select this frame along with your white circles and turn them into a compound path (Control-Alt-K). As good practice, you can rename it "Loading Animation".

3. How to add variants of the Lottie loading animation

Step 1

Make sure that your main component is selected, and add four variants. To make things a bit less congested, increase the spacing between these variants to about 50. To quickly adjust the frame of your component set, just click the Resize to Fit button (Control-Alt-Shift-R).

Step 2

Now it's time to adjust the variants that will make your Lottie load animation. Pick the Move Tool (V), hold down the Control key, and click the first circle from your second variant to select it.

First, replace the white with #F4BC00. Hover your cursor over the top edge of the circle until it turns into a double-sided arrow, and then click and drag to make it 100 px wide. Finally, move this yellow circle 10 px up. You can do it manually, or by setting the Y Position to 0.

Step 3

Move to the third variant and select the second circle. Make it 100 px wide, replace the white with #E88900, and don't forget to move it 10 px up.

Continue with the next variant and select the third circle. Again, make it 100 px wide, replace the white with #F55A53, and don't forget to move it 10 px up.

Finally, select the fourth circle from the last variant. Make it 100 px wide, replace the white with #D5001C, and remember to move it 10 px up.

4. How to prototype your Lottie loading animation

Step 1

Now that your design is complete, it's time to prototype it. So switch from Design mode to Prototype mode.

Start with the Default variant. Select it and simply drag a connection with the next variant. Don't bother to set up the Interaction settings for now.

Step 2

Continue to add interactions between each consecutive pair of variants—second to third, third to fourth, fourth to fifth—and then from the fifth back to the default one.

Step 3

Select one of the interactions and press Control-A to quickly select them all.

Change the Trigger to After delay and lower the Delay to 1ms. Choose Smart Animate for the Animation and Ease in and out for the Curve, and then lower the Duration to about 300ms, but feel free to play with this value.

5. How to create the Lottie loading animation

Step 1

Go into your Assets and search for the Loading Animation. Simply drag it inside your purple frame.

Step 2

Make sure that you're still in Prototype mode and add a Flow for your purple frame. You'll understand in a few moments how this Flow helps us export the Lottie loading animation.

6. How to preview and save the loading animation as Lottie

Step 1

In order to save your Figma animation as a Lottie loading animation, you will need the LottieFiles plugin.

Press Control - / to open the Quick Actions menu. Select the Plugins & widgets section and search for the LottieFiles plugin.

Click the Run button to add the LottieFiles plugin to Figma.

Step 3

First, you'll need to set up an account at LottieFiles. Once you're done, you can open the LottieFiles plugin and select the preferred Flow from the dropdown menu. In this case, there's only one, so you won't have much trouble finding it, but for a larger design, it's a good practice to name your flows.

Step 4

Once selected, you'll get a nice preview of your Lottie loader animation. Clicking the Save to button will save the animation in your Projects folder at lottiefiles.com.

Unless you're a millionaire who can afford countless subscriptions, be aware that there's a limit of 10 animations before you have to pay to save your Lottie animations. Don't make the same mistake that I made, and be sure that the animation you choose to save is the final version. And no, deleting a saved animation won't reset the limit.

Congrats! You're done!

Here is how your Lottie loading animation should look. I hope you've enjoyed this tutorial and can apply these techniques in your future projects.

Feel free to adjust this final Lottie loader animation and make it your own. You can find some great sources of inspiration at Envato, with interesting solutions to create your loading animation for Lottie.

Want to learn more?

We have loads of animated graphic tutorials on Envato Tuts+, from beginner to intermediate level. Take a look!

Build your own Typographic Scale tool with JavaScript

noemail@noemail.org (Esther Vaati) — Fri, 21 Mar 2025 07:15:44 GMT

The tool will have the following features:

Ability to select a font base size
Ability to choose different fonts from commonly used Google Fonts
Ability to adjust the font weight
A live preview for visualizing the typography scaling
Ability to generate and copy CSS variables.

So.. what exactly are we building?

Here’s a demo to show what we’re working towards:

Setting up the HTML Structure

Let's start by setting up the structure in HTML.

 <div class="container">
      <header>
        <h1Typography Generator Tool</h1>
        <p>Create a harmonious type scale for your website</p>
      </header>
      <div class="main">
        <div class="form-group">
          <label for="base-size">Base Font Size (px)</label>
          <input
            type="number"
            id="base-size"
            value="16"
            min="8"
            max="32"
            step="1"
          />
        </div>
        <div class="form-group">
          <label for="font-family">Font Family</label>
          <select id="font-family">
            <option value="" disabled selected>Select a font</option>
          </select>
        </div>
        <div class="form-group">
          <label for="font-weight">Font Weight</label>
          <select id="font-weight">
            <option value="300">Light</option>
            <option value="400" selected>Regular</option>
            <option value="500">Medium</option>
            <option value="600">Semi-Bold</option>
            <option value="700">Bold</option>
          </select>
        </div>
        <div class="form-group">
          <label for="scale-ratio">Scale Ratio</label>
          <select id="scale-ratio">
            <option value="1.067">Minor Second (1.067)</option>
            <option value="1.125 ">Major Second (1.125)</option>
            <option value="1.2">Minor Third (1.2)</option>
            <option value="1.25 " selected>Major Third (1.25)</option>
            <option value="1.333">Perfect Fourth (1.333)</option>
            <option value="1.414">Augmented Fourth (1.414)</option>
            <option value="1.5">Perfect Fifth (1.5)</option>
            <option value="1.618">Golden Ratio (1.618)</option>
          </select>
        </div>
        <input
          class="css-output"
          type="text"
          id="css-output"
          style="display: none"
        />
      </div>
      <div class="preview-container">
        <div class="top">
          <h3>Preview</h3>
          <button id="copy-css" class="copy-css">Copy CSS</button>
        </div>
        <div class="preview" id="preview"></div>
      </div>
    </div>

From the HTML structure, you can see we have several select inputs for choosing options such as font family, font weight, and the scale ratio.

We also have a preview container to display the generated type scale in real-time and a button for copying the generated CSS variables.

Styling with CSS

Our type scale tool consists of 2 sections: the upper section containing the controls, and the bottom section which has the preview container.

Let's add some basic styling for the body, header, and container.

body {
    font-family: "inter", sans-serif;
    background-color: #f8fafc;
    color: #1e293b;
    line-height: 1.65;
  }

  .container {
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    background-color: white;
    margin: 40px auto;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  header {
    width: 100%;
    padding: 16px;
    text-align: center;
  }

 h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
  }
  header p {
    font-size: 1rem;
  }

    

To ensure the inputs are responsive, add flex:wrap to the controls section.

.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 32px;
    border-bottom: 1px solid #e5e7eb;
  }

Next, style the input and select elements.

input,
  select {
    width: 100%;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: "Inter", sans-serif;
    color: #1e293b;
  }

  input:focus,
  select:focus {
    outline: none;
    border-color: #8a8a9081;
  }

Apply the following styles to the preview container to ensure it's scrollable on small screens.

.preview-container {
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 6px;
    padding: 0 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

From the final result, you can see we have labels in px and rem, as well as a paragraph for displaying each font level. All these elements will be contained within a div with the class scale-item.

Style the item as follows:

.scale-item {
    display: flex;
    align-items: baseline;
    margin-bottom: 24px;
  }

  .scale-item p {
    margin: 0;
  }

  .scale-label {
    width: 80px;
    font-size: 0.75rem;
    color: #64748b;
    flex-shrink: 0;
  }

Finally, the Copy CSS button will have the following styles.

.copy-css {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #e9ecef;
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
}

.copy-css:hover {
 background-color: #dcdcdc;
}
.css-output {
  opacity: 0;
  }

Generating Typographic Scales with JavaScript

We’ll start by getting the input and select elements.

1	const baseSize = document.getElementById("base-size");
2	const fontFamily = document.getElementById("font-family");
3	const fontWeight = document.getElementById("font-weight");
4	const scaleRatio = document.getElementById("scale-ratio");

We’ll also get the preview container and the Copy CSS button:

1	const preview = document.getElementById("preview");
2	const copyCSS = document.getElementById("copy-css");

Create an array of the most popular fonts and set them as options in the font family select input. Add the array as shown below.

 const googleFonts = [
        "Inter",
        "Roboto",
        "Open Sans",
        "Lato",
        "Montserrat",
        "Poppins",
        "Source Sans Pro",
        "Raleway",
        "Playfair Display",
        "Merriweather",
        "Ubuntu",
        "Nunito",
        "DM Sans",
        "Work Sans",
        "Titillium Web",
        "Fira Sans",
        "Rubik",
        "Lora",
        "Barlow",
        "Hind",
        "Cabin",
        "IBM Plex Sans",
        "Quicksand",
        "Karla",
        "PT Sans",
        "Heebo",
        "Mulish",
        "Overpass",
        "Jost",
        "Manrope",
        "Spectral",
        "Space Grotesk",
        "DM Mono",
        "Courier Prime",
        "Inconsolata",
      ];

Let's populate the font family select input with our fonts array.

  function populateFonts() {
    googleFonts.forEach((font) => {
      const option = document.createElement("option");
      option.value = font;
      option.textContent = font;
      fontFamily.appendChild(option);
    });
  }

  populateFonts();

Here we are looping through the fonts array, creating an option elements for each font and setting its value and text content to the font name. Finally the option element is added to the font family select element.

Set the first font in the array as the default on the input.

1	applyFont(googleFonts[0]);

To ensure the correct font and all its weights are loaded directly from Google Fonts, create a function called applyFont() and add the currently selected font as a stylesheet link in the page header.

function applyFont(font) {
    const existingLink = document.querySelector(
      "link[href*='fonts.googleapis.com']"
    );
    if (existingLink) {
      existingLink.remove();
    }
    const link = document.createElement("link");
    link.href = `https://fonts.googleapis.com/css2?family=${font}:wght@100;200;300;400;500;600;700;800;900&display=swap`;

    link.rel = "stylesheet";
    document.head.appendChild(link);
  }

Levels in typographic scales

In typographic scale systems, levels are used to define the different steps or sizes within the scale. Each level corresponds to a specific role in web design.

For example:

Higher levels are used for headings, for example, h1 and h2 and so on
The base level is mostly used for the body
Lower levels are mostly used for captions, foot notes, etc.

Each higher level is calculated by multiplying the base size by the scale ratio.

A scale ratio determines how each level increases relative to the base. Common scale ratios include:

1.25 (Minor Third)
1.33 (Perfect Fourth)
1.414 (Augmented Fourth)
1.5 (Perfect Fifth)
1.618 (Golden Ratio)

For example, suppose you want to use a scale ratio of 1.25 and your base font is 16px:

Level 1 will be 16px * 1.25 = 20px
Level 2 will be 20px * 1.25 = 25px and so on.

For levels below the base, we use negative level numbers (i.e. Level -1, Level -2, etc. ) .These are calculated by dividing the base size by the scale ratio.

For example, keeping your base size at 16px, if you want 2 levels below the base, it will look like this:

Level-1 = 16px / 1.25 = 12.8px
Level-2 = 12.8 /1.25 = 10.24px

The levels array

Now that we have understood how to use levels and scale ratios to generate fonts, let's define our levels array.

const FONT_SIZES = [
    { name: "h1", level: 5 },
    { name: "h2", level: 4 },
    { name: "h3", level: 3 },
    { name: "h4", level: 2 },
    { name: "h5", level: 1 },
    { name: "body", level: 0 },
    { name: "small", level: -1 },
  ];

Create a function called calculateSize() which will calculate the font size based on the base size, the selected scale ratio, and the expected level.

Here is the formula:

1	size = baseSize * (scaleRatio ^ level)

where :

baseSize is the starting font size
scaleRatio is the multiplier scale
level represents the step in the scale

The function will look like this:

function calculateSize(baseSize, level) {
    return parseFloat(
      (baseSize * Math.pow(scaleRatio.value, level)).toFixed(2)
    );
  }

Then, create another function which will return font sizes in rems :

1	function calculateSizeInRem(baseSize, level) {
2	return (calculateSize(baseSize, level) / 16).toFixed(2) + "rem";
3	}

Now we need to update the preview section with sample text showing how each level looks.

Updating the Preview pane

For each sample text, we will do the following:

Display the font size both in px and rem
Show a sample text that uses the currently selected size, font family, and font weight.

Here is the function that does that.

function updatePreview() {
    preview.innerHTML = "";
    const base = parseFloat(baseSize.value);
    const font = fontFamily.value;

    const weight = fontWeight.value;

    FONT_SIZES.forEach(({ name, level }) => {
      const size = calculateSize(base, level);
      const remSize = calculateSizeInRem(base, level);
      const item = document.createElement("div");
      item.classList.add("scale-item");

      const pxLabel = document.createElement("div");
      const remLabel = document.createElement("div");
      remLabel.textContent = `${remSize}`;

      pxLabel.textContent = `${size}px`;
      pxLabel.classList.add("scale-label");
      remLabel.classList.add("scale-label");

      const text = document.createElement("p");

      text.style.fontSize = `${size}px`;
      text.style.fontFamily = font + ", sans-serif";
      text.style.fontWeight = weight;

      text.style.lineHeight = level >= 0 ? "1.15" : "1.65";
      text.textContent =
        "Every project has its own distinct requirements. ";

      item.appendChild(remLabel);
      item.appendChild(pxLabel);
      item.appendChild(text);

      preview.appendChild(item);
    });
  }

Let's break down the code.

First, we clear the preview container to ensure the previous sample text is removed before a new sample is rendered.

1	preview.innerHTML = "";

Next, we get the values from the inputs.

baseSize.value - The current base font size in pixels
fontFamily.value - The selected font family from the dropdown.
fontWeight.value - The chosen font-weight

Then we loop over the FONT_SIZES array and iterate over each typography item. For each item, calculate the font size based on the selected scaleRatio and current baseSize.

1	FONT_SIZES.forEach(({ name, level }) => {
2
3	}

Then we create preview elements for each size. Each item will have :

A container for the scale item
2 labels showing the size in px and rem
A paragraph to display the sample text

Here, we applied the predefined styles to the elements.

const item = document.createElement("div");
item.classList.add("scale-item");
const pxLabel = document.createElement("div");
const remLabel = document.createElement("div");
remLabel.textContent = `${remSize}`;
pxLabel.textContent = `${size}px`;
pxLabel.classList.add("scale-label");
remLabel.classList.add("scale-label");
const text = document.createElement("p");

Here we applied the generated text sizes to the preview.

text.style.fontSize = `${size}px`;
text.style.fontFamily = font + ", sans-serif";
text.style.fontWeight = weight;
text.style.lineHeight = level >= 0 ? "1.15" : "1.65";
text.textContent = "Every project has its own distinct requirements.";

Finally, we append remLabel, pxLabel, and the preview text to each scale item container and add it to the preview section.

item.appendChild(remLabel);
item.appendChild(pxLabel);
item.appendChild(text);
preview.appendChild(item);
updatePreview();

Invoke the updatePreview() function so the changes are effected .

1	updatePreview();

Whenever you change any value such as the base, scale ratio, or weight, these changes should be updated in real-time. This is done by adding event listeners to each input so that any change automatically triggers the updatePreview() function

1	baseSize.addEventListener("input", updatePreview);
2	fontFamily.addEventListener("change", updatePreview);
3	scaleRatio.addEventListener("change", updatePreview);
4	fontWeight.addEventListener("input", updatePreview);

Generate CSS Variables

The last feature is the ability to automatically generate CSS variables for the calculated font sizes. This makes it easy to copy and use them in your projects.

The final format of the CSS variables will look like this:

1	:root {
2
3	--font-size-h1: 48.83px;
4	--font-size-h2: 39.06px;
5	--font-size-h3: 31.25px;
6	--font-size-h4: 25px;
7	--font-size-h5: 20px;
8	--font-size-body: 16px;
9	--font-size-small: 12.8px;
10	}
11

To achieve this format, we will build a css string that begins with the opening of a :root block. The :root is a pseudo-class selector commonly used to define global CSS variables that can be used throughout the entire stylesheet.

Let's build the string:

1	let css = `:root { \n\n `;

Get the current values for the base size and scale ratios from the inputs.

1	const base = parseFloat(baseSize.value) \|\| 16;
2	const SCALE_RATIO = parseFloat(scaleRatio.value);

Create a helper function called poweredBy() which will calculate the font sizes. .

1	function poweredBy(base, scale, level) {
2	return parseFloat((base * Math.pow(scale, level)).toFixed(2));
3	}

Create an object called fontSizes for holding the sizes for different levels

const fontSizes = {
  h1: poweredBy(base, SCALE_RATIO, 5),
  h2: poweredBy(base, SCALE_RATIO, 4),
  h3: poweredBy(base, SCALE_RATIO, 3),
  h4: poweredBy(base, SCALE_RATIO, 2),
  h5: poweredBy(base, SCALE_RATIO, 1),
  body: poweredBy(base, SCALE_RATIO, 0),
  small: poweredBy(base, SCALE_RATIO, -1),
};

Now, add each calculated value as a CSS variable to the css string and close the :root block.

css += `  --font-size-heading1: ${fontSizes.h1}px;\n`;
css += `  --font-size-heading2: ${fontSizes.h2}px;\n`;
css += `  --font-size-heading3: ${fontSizes.h3}px;\n`;
css += `  --font-size-heading4: ${fontSizes.h4}px;\n`;
css += `  --font-size-heading5: ${fontSizes.h5}px;\n`;
css += `  --font-size-body: ${fontSizes.body}px;\n`;
css += `  --font-size-small: ${fontSizes.small}px;\n`;
css += `}\n\n`;

Finally, add the generated CSS string to the css output element to ensure it's available for easy copying to the clipboard.

1	document.getElementById("css-output").textContent = css;
2

Copy Generated CSS

Copying text to a clipboard on a web page is done using the navigator.clipboard.writeText() method which will look like this:

function copyToClipboard() {
    const cssText = generateCSS();
    navigator.clipboard.writeText(cssText).then(() => {
      alert("CSS copied to clipboard!");
    });
  }

We also need to ensure the copyCSS() function is attached to the click event of the copy CSS button. Additionally, it's important to ensure the default CSS values are generated after the DOM is fully loaded.

1	copyCSS.addEventListener("click", copyToClipboard);
2	document.addEventListener("DOMContentLoaded", generateCSS);

Here is the final demo:

Conclusion

That's a wrap for the typograhic scale generator! You can build on this by customizing it further--for example, instead of using a paragraph for the preview, you can add a card or have a hero section that changes based on the generated typescale values.

How to use Lottie animations

noemail@noemail.org (Jonathan Lam) — Mon, 7 Apr 2025 10:10:03 GMT

I love it when an interface feels alive! Like when a playful hover effect reacts or fun little icon animation in apps. That’s where Lottie animations come in. They let you add smooth, scalable motion to websites, apps, videos, and more, without being limited by the larger file sizes of GIFs or videos.

In this guide, I’ll walk you through how to use Lottie animations like a pro, even if you’re starting from scratch. We’ll cover where they work best, how to integrate them smoothly, and tips for keeping animations subtle and effective. By the end, you’ll know exactly how to make your projects feel more dynamic and polished with zero extra bloat.

What you'll learn in this article

You can add Lottie animations to all sorts of things, like a website, mobile app, or video project, but it really matters where and how they are applied. Topics we cover will include:

What is a Lottie animation file? Learn the ins and outs of what Lottie is and what makes it tick.
Where Lottie animations work best: Websites, apps, UI prototypes, videos, etc. You name it, Lottie can add motion without worrying about file size.
How to integrate them smoothly: The smartest ways to add Lottie animations to your projects without slowing things down.
Tips for using animations effectively: Subtle motion enhances design, but too much can make your project look messy.
Where to find free Lottiefiles animations: There are plenty of great resources for high-quality, ready-to-use animations.
We'll show you the best Lottie animations and templates.

Fan of video tutorials? Then check out this video from the Envato Tuts+ YouTube channel to follow along:

1. What is a Lottie animation file?

Lotties are super lightweight, high-quality animations that work everywhere (websites, apps, etc.) without killing load times or pixelating when resized. They're kind of like GIFs, but better. So what is a Lottie animation exactly?

They are vector-based and use JSON (which basically means code-based), making them scalable, interactive, and ridiculously efficient. So unlike GIFs and SVG animations, they don't sacrifice quality for performance.

2. Why use Lottie animations?

Lightweight and fast

Lottie animations are vector-based and stored as JSON files, making them much smaller than GIFs or video files. This means they load almost instantly, keeping your websites and apps running smoothly, without slowing things down.

Scalable without losing quality

Because Lottie uses vectors, animations stay crisp at any size. For example, if you’re using them for a tiny UI icon or a full-screen animation, you'll get no pixelation, no quality loss—just smooth motion.

Works across multiple platforms

You can find them everywhere nowadays! Creatives are using Lottie animations in mobile apps, UI design tools, video editing software, and even social media content.

Supports interactivity

Lottie animations can react to the actions of the user, such as scrolling, clicking, or hovering. Unlike videos or GIFs, they enhance UI elements and make them feel more alive and engaging.

3. Where and how to use Lottie animations

1. Websites & web apps

A well-placed animation can make a website feel polished and dynamic, but too much movement can be distracting. Lottie animations (for a 'coming soon' website, for example) are perfect for adding subtle motion without affecting performance.

Examples

Micro-interactions: Animated buttons, hover effects, loading spinners.
Hero animations: Eye-catching visuals for landing pages.
Scroll-based effects: Animations that appear as users scroll.
Data visualization: Animated charts or infographics.

How to use them effectively

Keep it subtle: A smooth hover effect is great, but too much animation can feel overwhelming.
Optimize for performance: Use Lottie’s lightweight format, but test it across devices to ensure smooth playback.
Make it interactive: Use JavaScript to trigger animations based on user actions like clicks or scrolling.

2. Mobile apps (iOS & Android)

Animations in mobile apps can make interactions feel smoother and more intuitive. Lottie lets you add motion without the performance issues of GIFs or video files, making it a favorite among app designers and developers.

Examples

Onboarding animations: Animated tutorials or welcome screens.
Loading indicators: A fun alternative to the classic spinning wheel.
Success/error states: Animated checkmarks or warnings.
UI feedback: Smooth transitions between screens.

How to use them effectively

Keep animations short: Quick, engaging animations make an app feel responsive, but long animations can slow things down.
Use Lottie’s mobile SDKs: Implement animations natively in iOS (Swift) and Android (Kotlin/Java) without impacting performance.
Trigger animations based on user input: Make animations part of the experience, not just decoration.

Social media moves fast, and animations can help grab attention in an endless scroll of static images. Lottie makes it easy to create lightweight, high-quality motion graphics for marketing and social media content.

Examples

Animated Instagram Stories & Reels: Motion graphics that stand out.
Interactive banner ads: Engaging HTML5 animations.
GIF-style animations: Shareable motion graphics.

How to use them effectively

Use tools like LottieFiles: Easily add Lottie animations to social media posts.
Convert Lottie files to GIF or MP4: Make animations easy to share on any platform.
Keep it mobile-friendly: Social animations should be fast, lightweight, and loop seamlessly.

4. Video editing & motion graphics

If you create videos, you probably know how heavy animation files can get. Lottie offers a lightweight solution for adding motion graphics to video projects without unnecessary bloat.

Examples

Animated lower thirds: Titles and captions for videos.
Logo animations: Clean, lightweight motion graphics.
Engaging call to action: Eye-catching prompts for likes, shares, and subscriptions.

How to use them effectively

Use Lottie in After Effects or Premiere Pro: Integrate animations directly into motion graphics projects.
Overlay Lottie animations on footage: Add seamless motion graphics without rendering heavy effects.
Optimize for different platforms: Keep animations simple for fast-loading social media clips.

5. UI/UX design animation prototypes

UX design animation prototypes are all about bringing ideas to life, and Lotties helps designers create realistic interactions without coding. Whether you’re testing a hover effect or demonstrating a page transition, Lottie animations make your prototypes feel more polished.

Examples

Animated UI elements: Buttons, icons, and menus that react to touch.
Transitions: Simulating movement between app screens.
Micro-interactions: Testing hover and click effects in prototypes.

How to use them effectively

Use Lottie in design tools: Drag and drop animations into Figma or Sketch.
Test user reactions: Use animations to guide user flows and improve usability.
Keep it consistent: Make sure animations match the brand’s motion style.

6. Games

Lottie animations can also be used in game UI design, adding smooth, scalable animations without impacting performance. They work well for HUDs (heads-up displays), menus, and interactive elements.

Examples

HUD animations: Animated health bars, experience points, and in-game notifications.
Reward animations: Confetti bursts, achievement unlocks, or in-game currency animations.
UI transitions: Smooth effects for menus, popups, and loading screens.

How to use them effectively

Integrate with game engines: Lotties can be implemented in some game engines (like Unity) using third-party plugins.
Optimize for performance: Test animations across different platforms to ensure smooth playback.
Enhance UX without distraction: Keep animations smooth and subtle so they don’t interrupt gameplay.

7. Presentations & pitch decks

Lottie animations can make slides more engaging, helping you tell a story visually without overwhelming your audience. Unlike GIFs or video files, Lottie animations keep file sizes small, making presentations smoother and easier to share.

Examples

Data visualizations: Animated charts, graphs, and infographics.
Emphasizing key points: Animated icons or highlights that reinforce important concepts.
Animated slide transitions: Subtle movements between slides for a more dynamic feel.

How to use them effectively

Use animations to guide focus, not distract: Keep movements minimal and purposeful.
Keep it professional: Avoid excessive movement that could look gimmicky in a formal setting.

8. E-learning platforms & educational apps

Lottie animations make online learning more engaging by adding dynamic visuals and characters to explain concepts, provide feedback, and guide users through lessons. You'll see some great Lottie animation examples in apps such as Duolingo.

Examples

Concept explanations: Animated diagrams and step-by-step guides.
Course progress indicators: Engaging visuals that show completion status.
Interactive quizzes: Animated feedback for correct or incorrect answers.

How to use them effectively

Use animations to clarify, not complicate: Keep educational visuals simple and easy to follow.
Optimize for mobile learning: Ensure smooth playback on mobile devices and tablets.

4. Best practices for using Lottie animations effectively

Keep it subtle and purposeful

Not every button needs to bounce, and not every page transition needs a dramatic fade. A good animation should complement and not overshadow the actual user experience. Good Lottie animation examples can include loading animations that let users know the system is processing, or an animated success checkmark that confirms their action. If the animation doesn't add value to the experience, it's better left out.

Optimize for performance

Lottie animations are lightweight, but poor implementation can still cause slow load times or choppy playback. To counter this, try to compress and optimize your Lottie files by reducing unnecessary keyframes. And always test your animations on different devices and screen sizes to make sure they run smoothly.

Maintain a consistent motion style

Animations should feel like a natural part of your brand, not an afterthought. Good Lottie animation examples for a site with a smooth, minimalist UI should have subtle, elegant motion, while a playful brand might use bouncier, more energetic animations.

Test animations in context

Testing out how the animations feel in the context is essential when dealing with Lotties. Just because an animation looks good on its own doesn't mean it will work seamlessly within a web page or app. Test how it goes along with other items on the page, ensuring that it doesn't draw too much attention from the key content.

Keep file management organized

If you’re using multiple Lottie animations in a project, staying organized is key. You should name your files correctly (no one wants to dig through a folder full of “animation_final_v3.json.”). If you're working in a team, use version control or cloud storage to prevent lost files and ensure everyone is working with the latest version.

5. Where to find Lottie animations

Envato (Unlimited downloads for a subscription fee)

You can get the best, high-quality, professionally designed animations right here using Envato. There are premium Lottie animations which are perfect for commercial projects, UI/UX designs animations, and motion graphics. And the best part? Unlimited downloads for a single subscription!

LottieFiles (The best all-in-one platform)

LottieFiles is also a great place to find, download, and customize Lottiefiles animations. If you need something quickly, just search for free animations, and you can even tweak them in the LottieFiles animation Editor. Plus, it integrates with tools like Figma, Canva, Webflow, and After Effects, making it easy to add animations to your workflow.

IconScout (A mix of free and premium animations)

IconScout is another solid source for Lottie animations, offering a mix of free and paid options. It also offers a whole bunch of other creative assets that are useful, such as 3D illustrations, vector icons, and AI tools.

Icons8 Lottie (High-quality animated icons)

Icons8 is another great source, especially if you need animated icons for UI/UX design animations. It offers sleek, modern designs which are perfect for websites, apps, and digital products.

6. Conclusion

Lottie animations are a simple way to bring motion to websites, applications, gaming, and films, without heavy coding or slowing things down. With thousands of free animations available, it's easy to enhance engagement, improve the user experience, and create more polished designs, with zero animation skills required.

The trick is to use them intentionally. A subtle but well-placed animation can elevate an otherwise plain design, while too much moving around can feel annoying. Keep your animations light, relevant, and accessible, and you'll get just the right touch of movement to make your projects really stand out.

Core Web Vitals: How to optimize “Interaction to Next Paint” (INP)

noemail@noemail.org (Anna Monus) — Wed, 2 Apr 2025 15:02:50 GMT

Interaction to Next Paint (INP), one of Google's Core Web Vitals, evaluates the overall responsiveness of a web page by quantifying how long a user needs to wait for visual feedback after interacting with it by clicking a button, typing into a form field, or tapping the screen on a mobile device.

Optimizing INP on your key pages (such as the home, About, and Contact pages) and page types (such as blog posts, single product pages, and landing pages) is an essential task in modern web development and search engine optimization (SEO).

This is because, first, Core Web Vitals are part of Google’s Page Experience Report, which means that your aggregated Interaction to Next Paint scores affect your rankings on SERPs (search engine results pages).

Second, since INP is a key aspect of user experience (UX), optimizing it will likely reduce bounce rates and increase conversion rates on your website, as your pages will respond to user interactions faster and more intuitively. This is especially important if you have a highly interactive website or application, such as a single page app (SPA) or eCommerce site.

More on the subject

There’s a lot to learn where Core Web Vitals are concerned. Let us give you a hand ✋

What is Interaction to Next Paint?

Interaction to Next Paint is an industry-standard user experience metric that estimates the real-world interactivity of a web page throughout its lifecycle.

It reports the 98^th percentile of interaction response times on the page. INP captures the worst user experience while filtering out anomalies by excluding the slowest 2% of interactions. In practice, the 98^th percentile means the slowest interaction on most pages, except very busy or interactive ones that process at least 50 interactions per user.

Interaction to Next Paint tracks three types of interactions: clicking, tapping, and key pressing, but excludes hovering and scrolling.

INP is a time value measured in milliseconds. It consists of three components:

Blocking time, during which ongoing processes on the main thread prevent the browser from responding to the user action. Part of this is input delay, which extends from when a user interacts with the page until the browser is able to start processing that interaction. If the main thread is idle, the input delay is minimal; if it’s busy, it lasts until the main thread becomes available.
Processing time, during which the browser executes the event handlers attached to the interaction.
Presentation time, during which the browser renders and paints the visual updates to the page.

Image: INP breakdown from the official documentation

For a good INP result, the page must provide visual feedback to the user for the slowest interaction(the top 2% excluded) within 200 milliseconds. INP scores are measured for mobile and desktop devices separately: the mobile score affects your rankings in Google’s mobile search while the desktop score impacts your results in Google’s desktop search.

Results are classified on a traffic-light scale where:

Green 🟩 refers to a good INP score (200 milliseconds or less).
Yellow 🟨 means that INP needs improvement (between 200 and 500 milliseconds).
Red 🟥 refers to a poor INP score (500 milliseconds or more).

Image: INP thresholds from the official documentation

It’s important to note that while the INP metric reports the 98^th percentile for an individual visit, Google evaluates your site's aggregated INP score at the 75^th percentile of all individual INP scores collected from real users of the Chrome browser over the last 28-day period. In practice, this means that a page will earn a "good" rating for INP in Google’s search engine algorithm if at least 75% of individual page visits to that page have an INP of 200 milliseconds or less.

If no interaction happens on the page, Chrome won't report any INP data for that user.

How to Check Your INP Scores

As Interaction to Next Paint is a field value (measured on real user visits), you won’t find the metric in the Lighthouse report, which is the go-to web performance analysis tool for many developers, available from Chrome DevTools. This is because Lighthouse runs the tests in a simulated environment (i.e., your browsing environment), so it can only show metrics that are observable under lab conditions, such as Largest Contentful Paint (LCP).

While the official INP documentation says that, in theory, INP can be measured in the lab, in practice, simulated INP scores are usually not the most accurate since it’s almost impossible to imitate the unpredictability and high variability of real user interactions in a lab environment.

To see your mobile and desktop INP scores that Google uses in its search engine algorithm, you can use one of the following tools (all get the data from the Chrome User Experience (CrUX) Report that Google collects from real Chrome browser users):

GSC (Google Search Console) – You can see grouped Core Web Vitals data for your own domains, together with some recommendations.
PSI (PageSpeed Insights) – You can run a PSI report on any web page. The results page shows field data from the CrUX Report at the top of the report(this is where you can see the INP scores) and lab data from a Lighthouse test(that PSI runs in the background) at the bottom of the report.
CrUX Dashboard – You can use the default CrUX Dashboard (doesn’t require any configuration) or build a custom one on Looker Studio to see the INP (or any other Web Vital) results of any web page.

In the screenshot below, you can see how the aggregated INP score of Envato Elements’ desktop homepage appears in PageSpeed Insights:

8 best practices to optimize Interaction to Next Paint

Now, let’s see some actionable best practices that can help you improve Interaction to Next Paint on your website.

1. Reduce unused CSS and JavaScript

When a user interacts with your page, the browser often needs to finish processing pending tasks on the main thread before it can respond to that interaction. If there’s unused CSS or JavaScript on the page, it creates unnecessary work for the main thread, which increases the blocking time component of INP.

To detect unused code on the page, you can use the Coverage tab of Chrome DevTools (accessible from the More tools option of the three-dots menu), which shows the ratio of used and unused bytes in each of your CSS and JavaScript files.

If you click a URL in the Coverage tab, Chrome DevTools opens the file in the Sources tab and highlights unused code in red so that you can identify which parts you can remove or refactor:

While you can’t remove all unused code (e.g., if it belongs to a third-party resource, it’s used in another part of your site, or it would take too much work to remove), the overall goal is to reduce it as much as possible.

You can also use a module bundler, such as Webpack, Parcel, or Rollup, to implement code splitting so you can only load the code needed for the current page. Minifying and compressing your code files can further reduce parsing and execution time and main thread work.

2. Reduce the DOM size

A large DOM (Document Object Model) tree impacts all three components of INP in the following ways:

Blocking time: The browser has more work to do before it can start responding to user actions.
Processing time: The browser needs more time to run the callback when there are many HTML elements on the page (e.g., if your event handlers query the DOM using a method such as querySelectorAll()).
Presentation time: It takes more time for the browser to re-paint the screen after an interaction because there are more elements to style and display.

You can improve Interaction to Next Paint by reducing the length and depth of the DOM tree by:

avoiding excessive nesting of HTML elements
using CSS techniques, such as pseudo-elements, for styling instead of adding a new HTML element
removing hidden elements that aren’t used (e.g., deprecated features that were hidden rather than removed, testing code, unused template fragments, etc.)
breaking up long pages into shorter pages
…etc.

3. Avoid rendering HTML in JavaScript

If your page uses JavaScript to create and display content to the screen, interactions become slower than when the browser only needs to process and render static HTML. This is because the browser must run the JavaScript code to generate the DOM (which is otherwise directly defined in the HTML).

If you have a static website or use a content management system such as WordPress, you don’t need to worry about rendering HTML in JavaScript, as most (or frequently all) of your HTML is generated on the server, and the browser receives it as a ready-to-use document.

However, if you have an interactive JavaScript application (e.g., an SPA created with a UI framework such as React, Vue, or Angular), consider using server-side rendering (SSR) rather than processing client-side JavaScript in the browser to generate all HTML on the fly.

Plus, if there are complex JavaScript interactions in your SPA, break them up into smaller steps and provide visual feedback at each stage instead of rebuilding large sections at once in response to user interaction.

4. Analyze Common User Interactions

To optimize Interaction to Next Paint on your website, you need to understand the most common interactions your users typically perform on your key pages — which are different from website to website. In other words, you need to follow the Know Thy Website principle, derived from the ancient Greek maxim.

You can do so by using the Performance tab in Chrome DevTools that Google specifically created to help developers catch web performance issues and analyze Web Vitals, such as Interaction to Next Paint.

First, think about the three types of interactions INP records: clicking, tapping, and key pressing, and create some user flows that typically occur on your key pages or page types (e.g., filling out forms, using navigation, typing into the search bar, etc.) either mentally or by writing them down.

Then:

Open the page you want to analyze in the Google Chrome browser in Incognito mode (which deactivates your browser extensions).
Open Chrome DevTools by pressing the F12 key or right-clicking the page and selecting the Inspect option.
Navigate to the Performance panel.
Click the Record or Record and reload icon at the top of the panel to start recording.
Start to interact with the page by performing some common user actions.
Stop the recording when you performed all the actions you wanted.

For example, the screenshot below shows the recording of a common user flow I carried out on Envato Elements’ homepage — I typed “wordpress templates” into the search bar at the top of the page, then used the up and down keys to navigate through the dynamically loaded results in the dropdown of the search bar:

As you can see above, the Performance tab shows the three phases of INP. When I clicked the longest component (i.e., Presentation delay), DevTools highlighted it in the Main section (which represents the main thread) and displayed a super useful call tree and event log that allowed me to analyze which events and calls caused the presentation delay.

After recording a couple of common user flows, you can create a list of the key issues that increase Interaction to Next Paint on your website.

5. Break up long-running scripts

Once you’ve analyzed common user interactions in the Performance tab of Chrome DevTools, focus on fixing the ones that took the most time to finish, as these are the interactions that have the most significant impact on your INP scores.

Optimize these long-running scripts by using one or more of the following techniques:

Look into the call tree in the Performance tab to see which functions are responsible for the long delay.
Check if there are any code redundancies (e.g., unnecessary style calculations, repeated DOM queries, inefficient event listeners, duplicate calculations or data processing, etc.) and remove them.
Chunk long-running processes by using techniques such as the setTimeout() method with small delays or breaking tasks into smaller pieces with async/await functions.
Move CPU-intensive tasks off the main thread by using Web Workers.

6. Make your scripts asynchronous

To optimize Interaction to Next Paint, avoid using synchronous JavaScript wherever possible, as it executes immediately and thus blocks the main thread when users are trying to interact with the page.

Avoid using functions such as alert(), confirm(), and prompt() that stop all JavaScript execution, along with synchronous AJAX requests (which are strongly discouraged in modern web development anyway).

You can also make JavaScript files non-render-blocking by adding the defer or async attribute to the <script> tag:

Use async for scripts that don’t depend on other scripts (e.g., third-party analytics or tracking scripts), so they can load in parallel with the creation of the DOM tree. Note, however, that async scripts execute as soon as they're downloaded, which can interrupt HTML parsing. On the other hand, they can execute before the entire page is parsed, which can be useful for certain tasks such as marketing tracking or frontend performance monitoring.
Use defer for scripts that depend on the DOM or need to run in a specific order, as deferred scripts execute after the browser parses the HTML and creates the DOM tree (but still before the DOMContentLoaded event).

<!-- Load scripts asynchronously -->
<script async src="analytics.js"></script>

<!-- Load scripts after HTML parsing but before DOMContentLoaded -->
<script defer src="app.js"></script>

Note that async and defer scripts still execute on the main thread, similar to synchronous scripts. They improve Interaction to Next Paint by not blocking rendering during download and by executing at more optimal times during page loading.

7. Minimize the impact of third-party scripts

To reduce Interaction to Next Paint on your website, review your third-party scripts and consider removing the ones you don't need that much. Or, you can replace them with more lightweight alternatives.

If you still have third-party scripts on the page, consider self-hosting the critical ones so they can be loaded faster, as the browser doesn’t have to establish a connection to an external server.

You can also preconnect to third-party servers that host your critical scripts using the preconnect resource hint in the following way:

1	<head>
2	<link rel="preconnect" href="https://stackpath.bootstrapcdn.com">
3	</head>

You need to add preconnect to the <head> section of the HTML document. It speeds up the download of resources from a third-party domain by performing the DNS lookup and establishing the TCP/TLS or QUIC connection before the browser would do so by default.

For heavy third-party widgets, you can also consider using a facade — a lightweight placeholder that you load initially and replace with the full widget only when necessary. Open-source facades exist for popular widgets and embeds, such as this Lite YouTube embed by Paul Irish.

8. Avoid layout thrashing

Layout thrashing (a.k.a. forced reflows) happens when you repeatedly read and modify the DOM, which forces the browser to recalculate the layout multiple times, which directly increases the processing and presentation time components of INP.

When writing JavaScript, avoid using properties and methods that force layout recalculation, such as offsetHeight, offsetWidth, offsetTop, getBoundingClientRect(), getComputedStyle(), etc. For a comprehensive list of JavaScript properties and methods that can cause layout thrashing, check out this list on GitHub.

Here’s a very simple example of layout thrashing:

/* Layout thrashing */
const elementWidth = element.offsetWidth; // Read
element.style.width = elementWidth + 20 + "px"; // Write

const elementHeight = element.offsetHeight; // Read (forces reflow)
element.style.height = elementHeight + 20 + "px"; // Write

You can prevent layout thrashing by batching your read and write operations in the following way:

/* Layout batching */
const elementWidth = element.offsetWidth; // Read
const elementHeight = element.offsetHeight; // Read

element.style.width = elementWidth + 20 + "px"; // Write
element.style.height = elementHeight + 20 + "px"; // Write

The Performance panel in Chrome DevTools can help you identify layout thrashing.

If layout thrashing is happening on a page, the Performance panel shows the function calls that caused the forced reflows in the Forced reflows tab:

You can avoid layout thrashing by using a library such as FastDOM, which automatically batches read and write operations (the screenshot above was created using FastDOM’s testing page for animations).

Wrapping Up

There are many code optimization techniques that can help you improve Interaction to Next Paint on your site. To make your pages snappy and responsive to user action, remove unused first-party and third-party code, find your specific issues by recording typical user flows in Chrome DevTools, and use JavaScript best practices such as reducing main thread work, minimizing DOM manipulations, making scripts asynchronous, and others.

Since INP optimization isn't a one-time task but an ongoing process, consider integrating it into your everyday development workflow.

Start by identifying your slowest interactions, implement the best practices discussed in this post, and test your key pages regularly to see the improvements and prevent performance degradation.

Using the right techniques, even complex, interaction-heavy websites and single page applications can achieve good INP scores on both desktop and mobile devices.

How to create a glassmorphism generator tool

noemail@noemail.org (Esther Vaati) — Fri, 18 Apr 2025 08:44:10 GMT

Glassmorphism is a pretty resilient design style (it’s been around a long while now!) achieved by a combination of background blur transparency, a semi-transparent border, and sometimes subtle border shadows.

Our glassmorphism generator

Here’s what we’re going to build.

How glassmorphism is created with CSS

With CSS we can apply a background blur and a transparent background to an element and then place it over a background (typically an image, a gradient, or another layered element) to create the illusion of frosted glass.

As you can see from the demo, we are using an image as our background, and the card element on top features a transparent background, a blur effect, a border, and a subtle box shadow. All these properties, when combined, create the frosted glass effect.

Let's get started!

Build a Glassmorphism generator

HTML Structure

The HTML structure will be minimal, with the following elements:

A preview section to display the glass morphism effect in real-time.
A settings section for customizing the color, blur, and opacity values.
A <pre><code> element to display the CSS for the current glass effect.
A button for copying the generated CSS.

Here is all the HTML needed:

<main>
  <h1>Glassmorphism Generator</h1>

  <section class="preview-section">
    <div class="preview-container">
      <div class="glass-card">
        <h3>Glassmorphism Effect</h3>
        <p>
          This is how your glassmorphism element will look with the current settings.
        </p>
      </div>
    </div>
  </section>

  <section class="settings-container">
    <div class="settings">
      <label for="colorPicker">Color:</label>
      <input
        type="color"
        id="colorPicker"
        class="color-picker"
        value="#3abb16"
      />
    </div>

    <div class="settings">
      <label for="opacity" class="slider-label">Opacity:</label>
      <input
        type="range"
        id="opacity"
        class="slider"
        min="0"
        max="1"
        step="0.01"
        value="0.25"
      />
    </div>

    <div class="settings">
      <label for="blur" class="slider-label">Blur:</label>
      <input
        type="range"
        id="blur"
        class="slider"
        min="0"
        max="20"
        step="0.5"
        value="10"
      />
    </div>
  </section>

  <div class="code-card">
    <pre><code id="output"></code></pre>
  </div>

  <button id="copyCssButton" class="copy-css">Copy CSS</button>
</main>

The values you use on the form elements here will be applied to the glassmorphism card when it first loads

Styling with CSS

Let's start by using flex to align everything at the center. Here are the styles for the body and the main container.

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    font-family: "DM Mono", monospace;
  }
  main {
    max-width: 600px;
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: center;
  }

The preview section has a background image and a card on top showing the frosted glass effect. Add these styles to the preview container.

.preview-container {
    color: #ffffff;
    height: 320px;
    border-radius: 0.5rem;
    padding: 16px;
    background-image: url("image url here");
    background-size: cover;
    background-position: center;
  }

The Default Glassmorphism effect

The first time you open the tool, we want a default frosted effect already applied to the glass card. As we mentioned, earlier, the frosted glass effect is achieved by a combination of 4 key CSS properties.

Transparent background - makes the card partially see-through.
Backdrop blur -This applies a blur to the background element. In our case, the background image will be blurred.
Transparent Border - Adds a subtle semi-transparent outline defining the card's edges.
Box shadow - Adds depth by using a soft shadow, making the card appear as though it's floating over the background image.

In CSS, if you need to apply transparency to an element, you can use the rgba() or the hsla() color functions. These functions allow you to define a color with an alpha (transparency) value, where:

0 means fully transparent
1 means fully opaque.

The lower the alpha value, the more transparent the effect, which is important for creating a glass effect.

Add the following properties to the glass card.

.glass-card {
    width: 75%;
    height: 160px;
    margin: 4rem auto 0;
    padding: 24px;
  background: rgba(254,245,238,0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  }
  

Here, we are applying a transparent background, a blur, a border, and a box shadow using the RGBA color function. The backdrop blur is the secret weapon behind the frosted effect. It blurs everything behind the card, creating the signature glass effect. Without this value, the background would be plain transparent.

The thin semitransparent white border gives the card a shiny edge, while the box shadow will make it appear like it's floating above the background. The default effect will now look like this:

Styling the other elements

Let’s style the rest of the elements:

.settings-container {
    width: 100%;
  }
  input[type="color"] {
    width: 100%;
    border: none;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
  }

  .slider {
    width: 100%;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    appearance: none;
  }
  .settings {
    margin-bottom: 12px;
  }
  .slider::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    background: #147ccb;
    border-radius: 50%;
    cursor: pointer;
  }
  .slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #147ccb;
    border-radius: 50%;
    cursor: pointer;
    border: none;
  }
  .code-card {
    width: 95%;
    background-color: #e0e0e0;
    color: #021120;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
  }

  pre {
    font-size: 0.875rem;
    white-space: pre-wrap;
  }
  .copy-css {
    margin-top: 24px;
    cursor: pointer;
    text-transform: uppercase;

    color: #fff;
    font-size: 0.875rem;
    width: 100%;
    height: 45px;
    background-color: #167cbb;
    border-radius: 8px;
    font-weight: 600;
    border: none;
  }

Glassmorphism generation

In this part of the tutorial, we want to have a customization option where you can choose your own color, transparency, and blur values to create a unique glass effect.

Let's start by getting all the elements

const colorElement = document.getElementById("colorPicker");
const opacityElement = document.getElementById("opacity");
const blurElement = document.getElementById("blur");
const cssOutput = document.getElementById("output");
const copyCssButton = document.getElementById("copyCssButton");
const glassCard = document.querySelector(".glass-card");

When you select a color from the color picker element, its usually in the hex format, so we need to convert the selected color to the RGBA color format. To do that, let's create a function called hextoRGB, which will take in the hex color and opacity values chosen by the user and returns the corresponding RGBA format.

function hexToRGB(hex, opacity) {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    return `rgba(${r},${g},${b},${opacity})`;
}

For example, if the selected color is #3498db, the corresponding color in RGBA format will be: rgba(52,152,219,0.6).

The next step is to update the glass card to reflect the selected color, blur, and opacity values. Create a function called updatePreview() that gets the selected values and applies them as styles to the glass card.

function updatePreview() {
  const color = colorElement.value;
  const transparency = opacityElement.value;
  const blur = blurElement.value;

  const backgroundColor = hexToRGB(color, transparency);
  glassCard.style.backgroundColor = backgroundColor;
  glassCard.style.backdropFilter = `blur(${blur}px)`;
}

In the code, the preview section will dynamically update the appearance based on the values from the inputs.

glassCard.style.backgroundColor = backgroundColor:updates the background color using an RGBA value.
glassCard.style.backdropFilter = `blur(${blur}px)`;: applies a blur effect to the background behind the card, creating the frosted glass look.

We also need to add event listeners to the inputs, to ensure any change in the values updates the preview.

1	colorElement.addEventListener("input", updatePreview);
2	opacityElement.addEventListener("input", updatePreview);
3	blurElement.addEventListener("input", updatePreview);

Generate and copy CSS values

So far, we are able to create customized frosted glass effects, the next step is to generate the CSS used to achieve the glass effect and allow for easy copying as shown in the image below.

In the updatePreview () function, create a CSS string using the currently selected color, blur, and opacity values and add the string as the text content of the CSS output element. Every time you change a value, the CSS will also change and update the preview.

function updatePreview() {
  const color = colorElement.value;
  const transparency = opacityElement.value;
  const blur = blurElement.value;

  const backgroundColor = hexToRGB(color, transparency);
  glassCard.style.backgroundColor = backgroundColor;
  glassCard.style.backdropFilter = `blur(${blur}px)`;

  const css = `.card {
  background: ${backgroundColor};
  backdrop-filter: blur(${blur}px);
  -webkit-backdrop-filter: blur(${blur}px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, ${transparency});
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}`;

  output.textContent = css;
}

The last feature is to copy the CSS values, making it easy to copy the generated CSS values with just one click. Add an event listener to the copy CSS button.

copyCssButton.addEventListener("click", function () {
    navigator.clipboard
      .writeText(cssOutput.textContent)
      .then(() => {
        alert("Css copied");
      })
      .catch((error) => {
        alert("error copying CSS");
      });
  });

Here we are using the navigator.clipboard API, a built-in browser tool that allows us to copy things to the clipboard. The writeText() method is used to copy the contents of the CSS output element directly to the clipboard.

Our final glassmorphism tool

Let’s remind ourselves of what we’ve built!

Conclusion

That's a wrap for this tutorial. Adding a frosted glass effect to your designs can enhance the overall aesthetic and give your UI a modern touch. To improve on this tool you can add support for different backgrounds such as shapes and gradients.

How to create an animated Lottie logo

noemail@noemail.org (Drew MacDonald) — Sat, 26 Apr 2025 17:28:13 GMT

What You'll Be Creating

Virtually all video on the internet is comprised of thousands or millions of individual raster images, or frames. While compression greatly reduces the file sizes, each frame is still essentially a raster image that is resolution-dependent, and the video itself is frame-rate-dependent. You cannot make the video larger or add more frames after it is rendered.

Lottie animated graphics attempt to bring the advantages of vector graphics to animation. Lottie animations store vector data that is resolution-independent and allows vector shapes to be animated directly on a webpage or within an app. A Lottie animation is perfect for animated logos and elements that you want to stand out while keeping file sizes small.

In this tutorial, you will be creating this Lottie logo animation.

1. What you’ll need

For this tutorial, you will be using Adobe Illustrator and Adobe After Effects to create an animated logo, so you’ll need to have those installed. In order to create Lottie animations, you will also need to have the Lottie extension installed in After Effects. Visit the Lottie Files for After Effects page and follow the instructions to install the latest version of the plugin. With the Lottie plugin installed, you will be ready to create a Lottie animation!

2. Prepare the vector file in Adobe Illustrator

Step 1

Download the Roast Bee file from Envato, extract the compressed zip file, and locate the AI folder within. Open the Roastbee Logo.ai file in Adobe Illustrator.

Step 2

Create a new AI file using the 1920x1080 film and television preset. Working in this size will ensure that we have an appropriately sized shape when we move it to After Effects, so that we don't need to refine it too much to make the animation work. Save it as Roastbee for Animation.ai

Select the shape of the logo in the Roastbee Logo.ai file, copy it, and paste it into the new Roastbee for Animation.ai file you just created. Tweak the size and position to make sure it’s centered and completely contained within the artboard.

Step 3

Most finalized logo files like this are outlined, meaning that they are flattened shapes with a fill and no stroke. You will need to separate the wings from the flattened shape, but there are multiple ways to approach it. In this case, since the design lends itself to stroked vector lines and After Effects provides a lot more options to animate stroked vector lines, we will prepare it for that kind of workflow. Select the bee shape and go to Object > Path > Offset. A negative offset of -24px should move the vector lines to the center of the shape.

Click OK to accept the offset. Illustrator will make a copy of the shape with the negative offset applied. Select everything except the new offset lines, change the fill color so that you can see the offset shapes on top of it, and lock it in the Layers panel so that it cannot be accessed.

Step 4

Even though the vector lines are in the center of the shape, it is still an outlined shape with a fill. You will need to clean up the lines so that there is a single open-ended vector line for each shape.

Think about which parts you want to animate separately. Use the Direct Selection Tool (A) to select points where those lines connect with other parts of the design, then press the Cut button on the floating toolbar to break the connection. Let’s start with the head and separate it from the antennae. Hold Shift and click the points where the head connects with the antennae to select them.

Then click the Cut button on the floating toolbar to separate the head from the antennae shapes.

Step 5

Make sure all the paths are open. As you work through the lines, you will find that some of them are closed paths. Select points on the end of the shape, and delete them to get a single open line roughly at the center of the original shape. We will add a thick stroke to the lines later to get the original design.

Step 6

Select all with Command-A, and then swap the fill and outline in the toolbar. This will allow you to see which shapes are still closed and need to be opened and cleaned up as you work through the rest of the shapes.

Step 7

At the bottom, near the bee’s stinger, the negative offset produced some messy results. You can delete the multiple shapes on the right side of the abdomen, clean up the line on the left of the abdomen, and then reflect it.

Cut the lines that make up the stripes of the abdomen from the outline using the Direct Selection Tool (A) and the Cut command that we’ve been using for the rest of the shapes.

Use the Direct Selection Tool (A) to select the points on the right side of the abdomen and delete them.

The left side of the abdomen outline is also messy, but it is at least a single solid line. Delete the points that create a closed outline so that you have a single open line, as we did with the antennae and other lines.

When you have a single line for the left side of the abdomen, select it, and then use Object > Path > Simplify to reduce the complexity as much as possible while retaining the curve of the abdomen outline.

Reflect the line with Object > Transform > Reflect and click Copy on the reflect dialog box to make a reflected duplicate of the line.

Finally, move the reflected line to the right so that the end near the stinger snaps to the end of the left line. Join the reflected line on the right with the left line by dragging a box over both with the Direct Selection Tool (A) and clicking Join on the floating toolbar.

Finally, join the abdomen with the head shape the same way. This will create a single closed shape from the head and abdomen lines.

Continue using these techniques to clean up the rest of the design. You can also save some time by cleaning up one wing and then using the reflect technique to make the opposite wing.

Step 8

Once you've cleaned up the rest of the design, there should be a single line for each of the following:

Left antenna
Right antenna
Left wing
Right wing
Abdomen & head combined (this is the only closed line)
Stripe 1 (the upper abdomen stripe)
Stripe 2 (the lower abdomen stripe)

You can also increase the stroke weight if you'd like to make sure that it’s close to the original design. However, we will add the stroke in After Effects, so it’s not necessary to do it in Illustrator.

3. Animate in After Effects

We need to get the vectors from Illustrator to After Effects while keeping them in the correct position relative to each other. After Effects allows us to paste vectors from Illustrator directly into After Effects as masks, but unfortunately masks lack the control of shape layers when it comes to animating.

Masks are also not vector layers, which we'll need when we create a Lottie animation. They are vector masks applied to raster layers. Pasting our vectors from Illustrator into a mask on a solid layer is a quick way to get them into After Effects while maintaining positioning, though.

Step 1

Select all of the newly cleaned lines and use Command-C to copy them. Open After Effects, close any tutorials or new file creation dialog boxes that it opens, and click New Composition.

Then use the preset for Social Media Landscape in HD at 1920x1080, setting the length of the animation to about 5 seconds.

Step 2

Create a new Solid Layer by clicking in the timeline panel and pressing Command-Y. In the dialog box, we can leave the default color—just make sure it’s set to the composition size of 1920x1080 and click OK.

With the new solid still active, press Command-V to paste the vector shapes we copied from Illustrator, and they will be applied to the solid as vector masks. In the timeline, you will need to expand the layer and expand the masks property to access them individually.

Step 3

You will need to move the vectors over to a shape layer. Keeping them separated will give you the most control over the animation. Right-click in the space in the left section of the timeline panel, and click Shape Layer. This will contain our vectors.

Step 4

Now we need to move the vectors over from the raster solid layer. Expand the solid layer, expand masks, and expand the last mask at the bottom. Then, click the Mask Path property and press Command-C to copy the vector path. Now expand the Shape Layer that you created earlier and click Add > Path.

Make sure the playhead is at the first frame of the timeline (it should be by default). Then expand the path you just created, expand the Path property under it, and click the Stopwatch to create a keyframe. This keyframe is necessary to contain the vector data from our mask. Now press Command-V to paste the vector data we copied from the mask.

Make sure to name the path. I use the following convention in this project: [Item][side][purpose]. So you’ll see the left wing is named Wing L.

Step 5

You’ll need to repeat the previous step for each of the shapes. In this case, there aren’t that many, so it doesn’t take long. For larger projects with more vectors, there are plugins that will automate the process, but figuring out which shape is which and organizing them still takes time.

Once all the shapes are copied over, you’re done with the solid layer, and you can delete it (or hide it at least if you want to keep it around for some reason).

Step 6

On the Shape layer, click Add > Stroke. This stroke will apply to all of the paths above it within the same group.

It’s worth mentioning how crucial groups are in After Effects. Groups have Transform Properties that control all of the shapes within. Groups can also separate fills and strokes so that you can apply a fill or stroke only to the vectors in the same group or to all the groups above it. Using groups allows you to control shapes independently and together, and it also simplifies rigging.

Step 7

Click Add > Group (Empty) and name it Wing L xform since this is the group we will use to animate the left wing. Drag the left wing into the group you just created, and do the same for the right wing, naming the group Wing R xform. Then drag both groups to the top of the stack in the shape layer. You can also expand both groups and see that not only do they have the wing paths we dragged into them, but they also have transform properties.

Step 8

Expand the Wing L xform group and expand the transform property within. We will need to adjust the anchor point since we want the wing to rotate around the last vector point on the right where the wing and right wing touch. 2D transform properties in After Effects are listed in alphabetical order: X (horizontal) and Y (vertical). Click and drag on the second number on the transform property for the Vertical Y Anchor Position to move the anchor point so it’s over the correct point. Set it to about -67.

Unfortunately, this means the entire shape has moved down to the anchor point. It’s an easy fix, though. Click and drag the Position property’s pickwhip (the little spiral to the right of the position numbers) to the Anchor property.

You’ll see the Position property’s numbers turn red, and they should match the numbers of the Anchor property. The shape will also move back up to where it had been before.

Repeat this step for the right wing.

Step 9

We will only keyframe the left wing, and then we'll use a simple expression to make the right wing mirror it.

Let’s go ahead and animate the left wing so we can see that everything is working when we link up the right wing. Expand the Transform property of the left wing if it isn’t already expanded. Click the Stopwatch on the Rotation property to start automatic keyframing. This will also create a keyframe under the playhead. Move the playhead forward about 5 frames and set the Rotation to about -14 degrees.

Move the playhead forward another 5 frames, and then select the first keyframe and press Command-C to copy and Command-V to paste at the playhead so that the wing returns to its initial state.

Then move the playhead forward another 5 frames and set the Rotation Property to about 23 degrees. We can refine these values later.

Move the playhead 5 more frames forward, select all of the keyframes you created, and press Command-C to copy and Command-V to paste all of them and get a longer cycle. Move the playhead to the last keyframe and press N to set the end of the work area so that when you press Space to play the animation, it will loop.

Step 10

Expand the transform properties for the Wing R xform group, and then click the pickwhip on the Rotation property and drag it to the Rotation property of the Wing L xform group.

This copies the exact values but doesn’t quite give us what we want. Notice that that the values are now red, indicating that the Rotation property is linked to the left wing’s rotation property. Expand the Rotation property to see the expression linking it to the Wing L xform Rotation property. Click the expression and add *-1 to the end to multiply by negative 1.

Step 11

Select the Shape layer and click Add > Stroke.

Expand it and select a color. If you want to use the color from the original illustration (the gold lines), use hex code #D6AC84.

Set the Stroke Width to 51 and the Line Cap to Round Cap. Make sure the stroke is at the bottom of the shape layer stack, under all of the paths and groups, so that it applies to all of them.

Step 12

The wings will need to be filled to cover the lines of the body below when the wings move. We need to make modified versions of the wings to get the fill to look correct, though. Select the Wing L xform group, press Command-D to duplicate it, and rename the new wing group Wing L Fill.

Then, with the new group active, click Add > Fill. Set the fill color to the background color of the original illustration, #1A2632. You will also need to make sure the Wing L Fill group is underneath the Wing L xform group so that we can add the stroke on top of the fill later.

Step 13

Expand the Path property in the Wing L Fill group, double-click the point at the center of the shape to select it, and then press Delete on the keyboard to delete it.

Continue deleting points up to the top of the wing until it looks like this.

Now the Wing L Fill group is keyframed just like the Wing L xform group. If you want to make it procedural, you can expand the Transform properties of the Wing L Fill group, delete the keyframes on its Rotation property, and pickwhip it to the Wing L xform group’s Rotation property. This way, the entire animation is controlled by a single set of keyframes.

Step 14

Repeat steps 12 and 13 for the right wing.

Step 15

Finally, just duplicate the stroke you created earlier twice by selecting it and pressing Command-D, and put one copy in each of the Wing L xform groups to add a stroke over the fill. You can also create a group for the body and a group for the stripes, and then put a duplicate of the fill in the body group and a duplicate of the stroke in the stripes group.

Step 16

Adjust the keyframes as needed to get the look you want in your animation. When you're done, go to Composition > Trim Comp To Work Area.

4. How to create the Lottie animation

Step 1

Now, let's start creating our Lottie animation. Go to Window > Extensions > Lottie Files to open the Lottie exporter. Sign in if prompted.

Step 2

Check the box for the Roast Bee composition and click Render at the bottom of the exporter interface. Since we prepared the entire animation as a vector layer within After Effects, everything should be supported fully by Lottie.

Step 3

Now you can click Upload to send your animated Lottie logo to your LottieFiles account and embed it in web projects from there. You can also download the animation as any of the supported file types for use locally.

Conclusion

Lottie is a very powerful way to create lightweight vector animations, but it requires some significant setup when using After Effects, since After Effects is a primarily raster-based editing application. Preparing your animation appropriately using vector-based shape layers in After Effects greatly improves support but requires some setup.

I hope you found this tutorial helpful. Be sure to check out this post from the Envato blog, and any of these articles from Envato Tuts+!

1	<div id="animationWidget" >
2	<canvas width="368" height="208" id="mainCanvas" ></canvas>
3	<video width="184" height="104" id="video" autobuffer="autobuffer" controls="controls" poster="poster.jpg" >
4	<source src="sintel.mp4" type="video/mp4" ></source>
5	<source src="sintel.webm" type="video/webm" ></source>
6	</video>
7	</div>

1
2	#animationWidget{
3	border:1px #222 solid;
4	position:relative;
5	width: 570px;
6	height: 220px;
7	}
8	#animationWidget canvas{
9	border:1px #222 solid;
10	position:absolute;
11	top:5px;
12	left:5px;
13	}
14	#animationWidget video{
15	position:absolute;
16	top:110px;
17	left:380px;
18	}

1	(function(){
2	if( !document.createElement("canvas").getContext ){ return; } //the canvas tag isn't supported
3
4	var mainCanvas = document.getElementById("mainCanvas"); // points to the HTML canvas element above
5	var mainContext = mainCanvas.getContext('2d'); //the drawing context of the canvas element
6	var video = document.getElementById("video"); // points to the HTML video element
7	var frameDuration = 33; // the animation's speed in milliseconds
8	video.addEventListener( 'play', init ); // The init() function is called whenever the user presses play & the video starts/continues playing
9	video.addEventListener( 'ended', function(){ drawStats(true); } ); //drawStats() is called one last time when the video end, to sum up all the statistics
10
11	var videoSamples; // this is an array of images, used to store all the snapshots of the playing video taken over time. These images are used to create the 'film reel'
12	var backgrounds; // this is an array of images, used to store all the snapshots of the playing video taken over time. These images are used as the canvas background
13	var blade; //An canvas element to store the image copied from blade.png
14	var bladeSrc = 'blade.png'; //path to the blade's image source file
15
16	var lastPaintCount = 0; // stores the last value of mozPaintCount sampled
17	var paintCountLog = []; // an array containing all measured values of mozPaintCount over time
18	var speedLog = []; // an array containing all the execution speeds of main(), measured in milliseconds
19	var fpsLog = []; // an array containing the calculated frames per secong (fps) of the script, measured by counting the calls made to main() per second
20	var frameCount = 0; // counts the number of times main() is executed per second.
21	var frameStartTime = 0; // the last time main() was called
22
23	// Called when the video starts playing. Sets up all the javascript objects required to generate the canvas animation and measure perfomance
24	function init(){
25	if( video.currentTime > 1 ){ return; }
26
27	bladeSrc = new Image();
28	bladeSrc.src = "blade.png";
29	bladeSrc.onload = setBlade;
30
31	backgrounds = [];
32	videoSamples = [];
33	fpsLog = [];
34	paintCountLog = [];
35	if( window.mozPaintCount ){ lastPaintCount = window.mozPaintCount; }
36	speedLog = [];
37	frameCount = 0;
38	frameStartTime = 0;
39	main();
40	setTimeout( getStats, 1000 );
41	}
42
43	// As the scripts main function, it controls the pace of the animation
44	function main(){
45	setTimeout( main, frameDuration );
46	if( video.paused \|\| video.ended ){ return; }
47
48	var now = new Date().getTime();
49	if( frameStartTime ){
50	speedLog.push( now - frameStartTime );
51	}
52	frameStartTime = now;
53	if( video.readyState < 2 ){ return; }
54
55	frameCount++;
56	mainCanvas.width = mainCanvas.width; //clear the canvas
57	drawBackground();
58	drawFilm();
59	drawDescription();
60	drawStats();
61	drawBlade();
62	drawTitle();
63	}
64
65	// This function is called every second, and it calculates and stores the current frame rate
66	function getStats(){
67	if( video.readyState >= 2 ){
68	if( window.mozPaintCount ){ //this property is specific to firefox, and tracks how many times the browser has rendered the window since the document was loaded
69	paintCountLog.push( window.mozPaintCount - lastPaintCount );
70	lastPaintCount = window.mozPaintCount;
71	}
72
73	fpsLog.push(frameCount);
74	frameCount = 0;
75	}
76	setTimeout( getStats, 1000 );
77	}
78
79	// create blade, the ofscreen canavs that will contain the spining animation of the image copied from blade.png
80	function setBlade(){
81	blade = document.createElement("canvas");
82	blade.width = 400;
83	blade.height = 400;
84	blade.angle = 0;
85	blade.x = -blade.height * 0.5;
86	blade.y = mainCanvas.height/2 - blade.height/2;
87	}
88
89	// Creates and returns a new image that contains a snapshot of the currently playing video.
90	function sampleVideo(){
91	var newCanvas = document.createElement("canvas");
92	newCanvas.width = video.width;
93	newCanvas.height = video.height;
94	newCanvas.getContext("2d").drawImage( video, 0, 0, video.width, video.height );
95	return newCanvas;
96	}
97
98	// renders the dark background for the whole canvas element. The background features a greyscale sample of the video and a gradient overlay
99	function drawBackground(){
100	var newCanvas = document.createElement("canvas");
101	var newContext = newCanvas.getContext("2d");
102	newCanvas.width = mainCanvas.width;
103	newCanvas.height = mainCanvas.height;
104	newContext.drawImage( video, 0, video.height * 0.1, video.width, video.height * 0.5, 0, 0, mainCanvas.width, mainCanvas.height );
105
106	var imageData, data;
107	try{
108	imageData = newContext.getImageData( 0, 0, mainCanvas.width, mainCanvas.height );
109	data = imageData.data;
110	} catch(error){ // CORS error (eg when viewed from a local file). Create a solid fill background instead
111	newContext.fillStyle = "yellow";
112	newContext.fillRect( 0, 0, mainCanvas.width, mainCanvas.height );
113	imageData = mainContext.createImageData( mainCanvas.width, mainCanvas.height );
114	data = imageData.data;
115	}
116
117	//loop through each pixel, turning its color into a shade of grey
118	for( var i = 0; i < data.length; i += 4 ){
119	var red = data[i];
120	var green = data[i + 1];
121	var blue = data[i + 2];
122	var grey = Math.max( red, green, blue );
123
124	data[i] = grey;
125	data[i+1] = grey;
126	data[i+2] = grey;
127	}
128	newContext.putImageData( imageData, 0, 0 );
129
130	//add the gradient overlay
131	var gradient = newContext.createLinearGradient( mainCanvas.width/2, 0, mainCanvas.width/2, mainCanvas.height );
132	gradient.addColorStop( 0, '#000' );
133	gradient.addColorStop( 0.2, '#000' );
134	gradient.addColorStop( 1, "rgba(0,0,0,0.5)" );
135	newContext.fillStyle = gradient;
136	newContext.fillRect( 0, 0, mainCanvas.width, mainCanvas.height );
137
138	mainContext.save();
139	mainContext.drawImage( newCanvas, 0, 0, mainCanvas.width, mainCanvas.height );
140
141	mainContext.restore();
142	}
143
144	// renders the 'film reel' animation that scrolls across the canvas
145	function drawFilm(){
146	var sampleWidth = 116; // the width of a sampled video frame, when painted on the canvas as part of a 'film reel'
147	var sampleHeight = 80; // the height of a sampled video frame, when painted on the canvas as part of a 'film reel'
148	var filmSpeed = 20; // determines how fast the 'film reel' scrolls across the generated canvas animation.
149	var filmTop = 120; //the y co-ordinate of the 'film reel' animation
150	var filmAngle = -10 * Math.PI / 180; //the slant of the 'film reel'
151	var filmRight = ( videoSamples.length > 0 )? videoSamples[0].x + videoSamples.length * sampleWidth : mainCanvas.width; //the right edge of the 'film reel' in pixels, relative to the canvas
152
153	//here, we check if the first frame of the 'film reel' has scrolled out of view
154	if( videoSamples.length > 0 ){
155	var bottomLeftX = videoSamples[0].x + sampleWidth;
156	var bottomLeftY = filmTop + sampleHeight;
157	bottomLeftX = Math.floor( Math.cos(filmAngle) * bottomLeftX - Math.sin(filmAngle) * bottomLeftY ); // the final display position after rotation
158
159	if( bottomLeftX < 0 ){ //the frame is offscreen, remove it's refference from the film array
160	videoSamples.shift();
161	}
162	}
163
164	// add new frames to the reel as required
165	while( filmRight <= mainCanvas.width ){
166	var newFrame = {};
167	newFrame.x = filmRight;
168	newFrame.canvas = sampleVideo();
169	videoSamples.push(newFrame);
170	filmRight += sampleWidth;
171	}
172
173	// create the gradient fill for the reel
174	var gradient = mainContext.createLinearGradient( 0, 0, mainCanvas.width, mainCanvas.height );
175	gradient.addColorStop( 0, '#0D0D0D' );
176	gradient.addColorStop( 0.25, '#300A02' );
177	gradient.addColorStop( 0.5, '#AF5A00' );
178	gradient.addColorStop( 0.75, '#300A02' );
179	gradient.addColorStop( 1, '#0D0D0D' );
180
181	mainContext.save();
182	mainContext.globalAlpha = 0.9;
183	mainContext.fillStyle = gradient;
184	mainContext.rotate(filmAngle);
185
186	// loops through all items of film array, using the stored co-ordinate values of each to draw part of the 'film reel'
187	for( var i in videoSamples ){
188	var sample = videoSamples[i];
189	var punchX, punchY, punchWidth = 4, punchHeight = 6, punchInterval = 11.5;
190
191	//draws the main rectangular box of the sample
192	mainContext.beginPath();
193	mainContext.moveTo( sample.x, filmTop );
194	mainContext.lineTo( sample.x + sampleWidth, filmTop );
195	mainContext.lineTo( sample.x + sampleWidth, filmTop + sampleHeight );
196	mainContext.lineTo( sample.x, filmTop + sampleHeight );
197	mainContext.closePath();
198
199	//adds the small holes lining the top and bottom edges of the 'fim reel'
200	for( var j = 0; j < 10; j++ ){
201	punchX = sample.x + ( j * punchInterval ) + 5;
202	punchY = filmTop + 4;
203	mainContext.moveTo( punchX, punchY + punchHeight );
204	mainContext.lineTo( punchX + punchWidth, punchY + punchHeight );
205	mainContext.lineTo( punchX + punchWidth, punchY );
206	mainContext.lineTo( punchX, punchY );
207	mainContext.closePath();
208	punchX = sample.x + ( j * punchInterval ) + 5;
209	punchY = filmTop + 70;
210	mainContext.moveTo( punchX, punchY + punchHeight );
211	mainContext.lineTo( punchX + punchWidth, punchY + punchHeight );
212	mainContext.lineTo( punchX + punchWidth, punchY );
213	mainContext.lineTo( punchX, punchY );
214	mainContext.closePath();
215	}
216	mainContext.fill();
217	}
218
219	//loop through all items of videoSamples array, update the x co-ordinate values of each item, and draw its stored image onto the canvas
220	mainContext.globalCompositeOperation = 'lighter';
221	for( var i in videoSamples ){
222	var sample = videoSamples[i];
223	sample.x -= filmSpeed;
224	mainContext.drawImage( sample.canvas, sample.x + 5, filmTop + 10, 110, 62 );
225	}
226
227	mainContext.restore();
228	}
229
230	// renders the canvas title
231	function drawTitle(){
232	mainContext.save();
233	mainContext.fillStyle = 'black';
234	mainContext.fillRect( 0, 0, 368, 25 );
235	mainContext.fillStyle = 'white';
236	mainContext.font = "bold 21px Georgia";
237	mainContext.fillText( "SINTEL", 10, 20 );
238	mainContext.restore();
239	}
240
241	// renders all the text appearing at the top left corner of the canvas
242	function drawDescription(){
243	var text = []; //stores all text items, to be displayed over time. the video is 60 seconds, and each will be visible for 10 seconds.
244	text[0] = "Sintel is an independently produced short film, initiated by the Blender Foundation.";
245	text[1] = "For over a year an international team of 3D animators and artists worked in the studio of the Amsterdam Blender Institute on the computer-animated short 'Sintel'.";
246	text[2] = "It is an epic short film that takes place in a fantasy world, where a girl befriends a baby dragon.";
247	text[3] = "After the little dragon is taken from her violently, she undertakes a long journey that leads her to a dramatic confrontation.";
248	text[4] = "The script was inspired by a number of story suggestions by Martin Lodewijk around a Cinderella character (Cinder in Dutch is 'Sintel'). ";
249	text[5] = "Screenwriter Esther Wouda then worked with director Colin Levy to create a script with multiple layers, with strong characterization and dramatic impact as central goals.";
250	text = text[Math.floor( video.currentTime / 10 )]; //use the videos current time to determine which text item to display.
251
252	mainContext.save();
253	var alpha = 1 - ( video.currentTime % 10 ) / 10;
254	mainContext.globalAlpha = ( alpha < 5 )? alpha : 1;
255	mainContext.fillStyle = '#fff';
256	mainContext.font = "normal 12px Georgia";
257
258	//break the text up into several lines as required, and write each line on the canvas
259	text = text.split(' ');
260	var colWidth = mainCanvas.width * .75;
261	var line = '';
262	var y = 40;
263	for(var i in text ){
264	line += text[i] + ' ';
265	if( mainContext.measureText(line).width > colWidth ){
266	mainContext.fillText( line, 10, y );
267	line = '';
268	y += 12;
269	}
270	}
271	mainContext.fillText( line, 10, y );
272
273	mainContext.restore();
274	}
275
276	//updates the bottom-right potion of the canvas with the latest perfomance statistics
277	function drawStats( average ){
278	var x = 245.5, y = 130.5, graphScale = 0.25;
279
280	mainContext.save();
281	mainContext.font = "normal 10px monospace";
282	mainContext.textAlign = 'left';
283	mainContext.textBaseLine = 'top';
284	mainContext.fillStyle = 'black';
285	mainContext.fillRect( x, y, 120, 75 );
286
287	//draw the x and y axis lines of the graph
288	y += 30;
289	x += 10;
290	mainContext.beginPath();
291	mainContext.strokeStyle = '#888';
292	mainContext.lineWidth = 1.5;
293	mainContext.moveTo( x, y );
294	mainContext.lineTo( x + 100, y );
295	mainContext.stroke();
296	mainContext.moveTo( x, y );
297	mainContext.lineTo( x, y - 25 );
298	mainContext.stroke();
299
300	// draw the last 50 speedLog entries on the graph
301	mainContext.strokeStyle = '#00ffff';
302	mainContext.fillStyle = '#00ffff';
303	mainContext.lineWidth = 0.3;
304	var imax = speedLog.length;
305	var i = ( speedLog.length > 50 )? speedLog.length - 50 : 0
306	mainContext.beginPath();
307	for( var j = 0; i < imax; i++, j += 2 ){
308	mainContext.moveTo( x + j, y );
309	mainContext.lineTo( x + j, y - speedLog[i] * graphScale );
310	mainContext.stroke();
311	}
312
313	// the red line, marking the desired maximum rendering time
314	mainContext.beginPath();
315	mainContext.strokeStyle = '#FF0000';
316	mainContext.lineWidth = 1;
317	var target = y - frameDuration * graphScale;
318	mainContext.moveTo( x, target );
319	mainContext.lineTo( x + 100, target );
320	mainContext.stroke();
321
322	// current/average speedLog items
323	y += 12;
324	if( average ){
325	var speed = 0;
326	for( i in speedLog ){ speed += speedLog[i]; }
327	speed = Math.floor( speed / speedLog.length * 10) / 10;
328	}else {
329	speed = speedLog[speedLog.length-1];
330	}
331	mainContext.fillText( 'Render Time: ' + speed, x, y );
332
333	// canvas fps
334	mainContext.fillStyle = '#00ff00';
335	y += 12;
336	if( average ){
337	fps = 0;
338	for( i in fpsLog ){ fps += fpsLog[i]; }
339	fps = Math.floor( fps / fpsLog.length * 10) / 10;
340	}else {
341	fps = fpsLog[fpsLog.length-1];
342	}
343	mainContext.fillText( ' Canvas FPS: ' + fps, x, y );
344
345	// browser frames per second (fps), using window.mozPaintCount (firefox only)
346	if( window.mozPaintCount ){
347	y += 12;
348	if( average ){
349	fps = 0;
350	for( i in paintCountLog ){ fps += paintCountLog[i]; }
351	fps = Math.floor( fps / paintCountLog.length * 10) / 10;
352	}else {
353	fps = paintCountLog[paintCountLog.length-1];
354	}
355	mainContext.fillText( 'Browser FPS: ' + fps, x, y );
356	}
357
358	mainContext.restore();
359	}
360
361	//draw the spining blade that appears in the begining of the animation
362	function drawBlade(){
363	if( !blade \|\| blade.x > mainCanvas.width ){ return; }
364	blade.x += 2.5;
365	blade.angle = ( blade.angle - 45 ) % 360;
366
367	//update blade, an ofscreen canvas containing the blade's image
368	var angle = blade.angle * Math.PI / 180;
369	var bladeContext = blade.getContext('2d');
370	blade.width = blade.width; //clear the canvas
371	bladeContext.save();
372	bladeContext.translate( 200, 200 );
373	bladeContext.rotate(angle);
374	bladeContext.drawImage( bladeSrc, -bladeSrc.width/2, -bladeSrc.height/2 );
375	bladeContext.restore();
376
377	mainContext.save();
378	mainContext.globalAlpha = 0.95;
379	mainContext.drawImage( blade, blade.x, blade.y + Math.sin(angle) * 50 );
380	mainContext.restore();
381	}
382	})();

1
2	var frameDuration = 33; // set the animation's target speed in milliseconds
3	function main(){
4	if( video.paused \|\| video.ended ){ return false; }
5	setTimeout( main, frameDuration );

1	var lastPaintCount = window.mozPaintCount;
2	setInterval( function(){
3	console.log( window.mozPaintCount - lastPaintCount );
4	lastPaintCount = window.mozPaintCount;
5	}, 1000);

1	requestAnimationFrame = window.requestAnimationFrame \|\|
2	window.mozRequestAnimationFrame \|\|
3	window.webkitRequestAnimationFrame \|\|
4	window.msRequestAnimationFrame \|\|
5	setTimeout;

1
2	// Adjusts the program behavior, based on whether the webpage is active or hidden
3	function onVisibilityChange() {
4	if( document.hidden && !video.paused ){
5	video.pause();
6	}else if( video.paused ){
7	video.play();
8	}
9	}

1
2	mainContext.beginPath();
3	for( var j = 0; i < imax; i++, j += 2 ){
4	mainContext.moveTo( x + j, y ); // define the subpaths starting point
5	mainContext.lineTo( x + j, y - speedLog[i] * graphScale ); // set the subpath as a line, and define its endpoint
6	mainContext.stroke(); // draw the subpath to the canvas
7	}

1
2	var mainCanvas = document.getElementById("mainCanvas"); // points to the on-screen, original HTML canvas element
3	var mainContext = mainCanvas.getContext('2d'); // the drawing context of the on-screen canvas element
4	var osCanvas = document.createElement("canvas"); // creates a new off-screen canvas element
5	var osContext = osCanvas.getContext('2d'); //the drawing context of the off-screen canvas element
6	osCanvas.width = mainCanvas.width; // match the off-screen canvas dimensions with that of #mainCanvas
7	osCanvas.height = mainCanvas.height;

1
2	// As the scripts main function, it controls the pace of the animation
3	function main(){
4	requestAnimationFrame( main, mainCanvas );
5	if( video.paused \|\| video.currentTime > 59 ){ return; }
6
7	var now = new Date().getTime();
8	if( frameStartTime ){
9	speedLog.push( now - frameStartTime );
10	}
11	frameStartTime = now;
12	if( video.readyState < 2 ){ return; }
13
14	frameCount++;
15	osCanvas.width = osCanvas.width; //clear the offscreen canvas
16	drawBackground();
17	drawFilm();
18	drawDescription();
19	drawStats();
20	drawBlade();
21	drawTitle();
22	mainContext.drawImage( osCanvas, 0, 0 ); // copy the off-screen canvas graphics to the on-screen canvas
23	}

1
2	// renders the canvas title
3	function drawTitle(){
4	if( titleCache == false ){ // create and save the title image
5	titleCache = document.createElement('canvas');
6	titleCache.width = osCanvas.width;
7	titleCache.height = 25;
8
9	var context = titleCache.getContext('2d');
10	context.fillStyle = 'black';
11	context.fillRect( 0, 0, 368, 25 );
12	context.fillStyle = 'white';
13	context.font = "bold 21px Georgia";
14	context.fillText( "SINTEL", 10, 20 );
15	}
16
17	osContext.drawImage( titleCache, 0, 0 );
18	}

1
2	if( titleCache == false ){ // If titleCache is false, the animation's title hasn't been drawn yet
3	drawTitle(); // we draw the title. This function will now be called just once, when the program starts
4	osContext.rect( 0, 25, osCanvas.width, osCanvas.height ); // this creates a path covering the area outside by the title
5	osContext.clip(); // we use the path to create a clipping region, that ignores the title's region
6	}

1	<div class="editor">
2	<div class="editor-header">SVG Code Editor</div>
3	<textarea
4	id="svgInput"
5	placeholder="Paste your SVG code here and watch the magic happen..."
6	></textarea>
7	</div>

1	<div class="preview">
2	<div class="preview-header">SVG Preview</div>
3	<div class="preview-content">
4	<div id="previewContainer" class="preview-container"></div>
5	</div>
6	</div>

1	<div class="main">
2	<header>
3	<h1>SVG Preview Tool</h1>
4	<p>Edit, preview, and export clean, scalable vector art</p>
5	</header>
6	<div class="container">
7	<div class="editor">
8	<div class="editor-header">SVG Code Editor</div>
9
10	<textarea
11	id="svgInput"
12	placeholder="Paste your SVG code here and watch the magic happen..."
13	></textarea>
14
15	</div>
16	<div class="preview">
17	<div class="preview-header">SVG Preview</div>
18	<div class="preview-content">
19	<div id="previewContainer" class="preview-container"></div>
20	</div>
21	</div>
22	</div>
23
24	<button id="exportBtn">Export SVG</button>
25	</div>

1	@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");
2
3	* {
4	margin: 0;
5	padding: 0;
6	box-sizing: border-box;
7	}
8
9	body {
10	display: flex;
11	min-height: 100vh;
12	justify-content: center;
13	padding: 20px;
14	font-family: "DM Mono", monospace;
15	}
16
17	header {
18	max-width: 420px;
19	text-align: center;
20	margin-bottom: 40px;
21	}
22
23	h1 {
24	font-size: 30px;
25	font-weight: 700;
26	margin-bottom: 8px;
27	}
28
29	header p {
30	font-size: 18px;
31	}

1	.main {
2	display: flex;
3	flex-direction: column;
4	align-items: center;
5	gap: 24px;
6	width: 100%;
7	max-width: 1000px;
8	height: 90vh;
9	min-height: 700px;
10	margin-top: 50px;
11	}
12	.container {
13	display: flex;
14	height: calc(100% - 84px);
15	gap: 20px;
16	width: 100%;
17	}

1	.editor {
2	border: 1px solid #7287f2;
3	}
4
5	.editor,
6	.preview {
7	width: 50%;
8	display: flex;
9	flex-direction: column;
10	border-radius: 16px;
11	overflow: hidden;
12	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
13	}
14
15	.editor-header,
16	.preview-header {
17	padding: 12px 20px;
18	font-weight: 600;
19	font-size: 14px;
20	text-align: center;
21	width: 100%;
22	color: white;
23
24	}
25
26	textarea {
27	/* width: 100%; */
28	height: 100%;
29	border: none;
30	padding: 20px;
31	font-size: 13px;
32	resize: none;
33	background: #2e3138;
34	color: white;
35	overflow-y: auto;
36	}
37
38	textarea:focus {
39	outline: none;
40	}
41
42	.preview-container {
43	width: 100%;
44	height: 100%;
45	border-radius: 16px;
46	background-color: #f9fafb;
47	overflow-y: auto;
48	}
49
50	.preview-content {
51	flex: 1;
52	padding: 16px;
53	overflow: hidden;
54	}
55
56	.svg-container {
57	display: flex;
58	justify-content: center;
59	overflow: hidden;
60	}

1	.error-message {
2	color: #dc2626;
3	background: #fef2f2;
4	border: 1px solid #fca5a5;
5	padding: 16px;
6	margin: 20px;
7	border-radius: 6px;
8	font-size: 13px;
9	}
10
11	button {
12	margin-top: 40px;
13	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
14	color: white;
15	padding: 12px 30px;
16	border: none;
17	border-radius: 8px;
18	cursor: pointer;
19	width: 150px;
20	}
21
22	@media (max-width: 768px) {
23	body {
24	padding: 20px;
25	}
26
27	.main {
28	width: 100%;
29	height: 100vh;
30	}
31
32	.container {
33	flex-direction: column;
34	height: 100%;
35	}
36
37	.editor,
38	.preview {
39	width: 100%;
40	height: 50%;
41	}
42	}

1	function loadSVG(svgCode) {
2	previewContainer.innerHTML = "";
3	if (!svgCode.trim()) {
4	showErrorMessage("Enter SVG code to see preview");
5	return;
6	}}

Envato Tuts+ Web Design

HTML5 Canvas Optimization: A Practical Example

Step 1: Play the Movie Trailer

Step 2: View the Source

Step 3: Code Optimization: Know the Rules

The first rule of code performance optimization is: Don't.

The second rule: Don't yet.

The third rule: Don't yet, and profile first.

Step 4: Set Some Performance Metrics

Step 5: Use requestAnimationFrame()

Step 6: Use the Page Visibility API

Step 7: For Custom Shapes, Draw the Whole Path At Once

Step 8: Use an Off-Screen Canvas To Build the Scene

Step 9: Cache Paths As Bitmap Images Whenever Possible

Step 10: Clear the Canvas With clearRect()

Step 11: Implement Layers

Step 12: Update Only The Changing Areas of an Animation Scene

Step 13: Minimize Sub-Pixel Rendering

Step 14: Measure the Results

How to create an SVG viewer in HTML, CSS, and JavaScript

HTML Markup

Styling with CSS

JavaScript functionality

SVG Code Validation

Add event listeners

Load sample SVG and export SVG

Export SVG

Final demo

How to create a Liquid Glass effect with SVG filters

What is an SVG filter?

In action

feImage Filter Element

feDisplacementMap Filter Element

Create a Liquid Glass button with SVG filters

Styling with CSS

Glass distortion

Final result

Conclusion

Create a color contrast checker with HTML, CSS, and JavaScript

How is contrast ratio calculated?

Here’s what we’re working towards

HTML Structure

Styling with CSS

Color contrast functionality with JavaScript

Color validation

Event listeners

Contrast checker

Update the results

The final demo

Conclusion

How to create a mesh gradient generator in HTML, CSS and JavaScript

What we’re building

Wait, what’s a mesh gradient?

Our simple HTML markup

Styling the mesh tool with CSS

How Radial Gradients Work

Add a default gradient to the preview

Generating random gradients

Generate random colors and X, Y coordinates

Update and Copy Generated CSS

Final Demo

Conclusion

How to edit text in Lottie images

1. How to edit text in Lottie images using an After Effects source file

Step 1

Step 2

2. How to edit text in Lottie images using a Figma source file

3. How to edit text in Lottie images using the Lottie Editor

Congrats! You're done

Want to Learn More?

How to create a Lottie loading animation

1. How to create a simple frame

2. How to create the main component of the Lottie loader animation​

Step 1

Step 2

Step 3

Step 4

3. How to add variants of the Lottie loading animation

Step 1

Step 2

Step 5: Use `requestAnimationFrame()`

Step 10: Clear the Canvas With `clearRect()`

`feDisplacementMap` Filter Element

2. How to create the main component of the Lottie loader animation

1	svgInput.addEventListener("input", function () {
2	loadSVG(this.value);
3	});
4	svgInput.addEventListener("paste", function () {
5	loadSVG(this.value);
6	});

1	function exportSVG() {
2	const blob = new Blob([svgInput.value], {
3	type: "image/svg+xml"
4	});
5	const url = URL.createObjectURL(blob);
6	const a = document.createElement("a");
7	a.href = url;
8	a.download = "svg-viewer.svg";
9	document.body.appendChild(a);
10	a.click();
11	document.body.removeChild(a);
12	URL.revokeObjectURL(url);
13	}
14	exportBtn.addEventListener("click", exportSVG);

1	<svg width="200" height="200">
2	<filter id="blur">
3	<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
4	</filter>
5	<circle cx="100" cy="100" r="80" fill="green" filter="url(#blur)"/>
6	</svg>

1	<feImage
2	href="https://example.com/image.png"
3	x="0" y="0"
4	width="100%" height="100%"
5	result="map" />

1	<feDisplacementMap
2	id="disp"
3	in="blur"
4	in2="map"
5	scale="0.8"
6	xChannelSelector="R"
7	yChannelSelector="G"
8	></feDisplacementMap>

1	body {
2	height: 150vh;
3	background: url("https://images.unsplash.com/photo-1683657535824-5b570c7a1749?q=80&w=764&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
4	background-size: cover;
5	}

1	.glass-button {
2	position: fixed;
3	top: 50%;
4	left: 50%;
5	transform: translate(-50%, -50%);
6	cursor: pointer;
7	outline: none;
8	width: 350px;
9	height: 180px;
10	border-radius: 999px;
11
12	}
13
14	.glass-button span {
15	font-family: "Orbitron", sans-serif;
16	color: white;
17	font-size: 2.5rem;
18	font-weight: 600;
19	text-transform: uppercase;
20	letter-spacing: 0.1em;
21
22	}

1	const feImage = document.querySelector('feImage');
2	fetch('https://essykings.github.io/JavaScript/map.png')
3	.then((response) => {
4	return response.blob();
5	})
6	.then((blob) => {
7	const objURL = URL.createObjectURL(blob);
8
9	feImage.setAttribute('href', objURL);
10	});

1	<svg style="position: absolute; width: 0; height: 0">
2	<filter id="glass" x="-50%" y="-50%" width="200%" height="200%" primitiveUnits="objectBoundingBox">
3	<feImage x="-50%" y="-50%" width="200%" height="200%" result="map"/>
4	<feGaussianBlur in="SourceGraphic" stdDeviation="0.02" result="blur"/>
5	<feDisplacementMap id="disp" in="blur" in2="map" scale="0.8" xChannelSelector="R" yChannelSelector="G"/>
6	</filter>
7	</svg>

1	<div class="container">
2	<h1>Color Contrast Checker</h1>
3	<div class="color-pickers">
4	<div class="color-picker">
5	<label for="text-color">Text Color:</label>
6	<input type="color" id="text-color" value="#000000" />
7	<input type="text" id="text-color-hex" value="#000000" />
8	<p id="text-color-error" class="error-message"></p>
9	</div>
10
11	<div class="color-picker">
12	<label for="bg-color">Background Color:</label>
13	<input type="color" id="bg-color" value="#FFFFFF" />
14	<input type="text" id="bg-color-hex" value="#FFFFFF" />
15	<p id="bg-color-error" class="error-message"></p>
16	</div>
17	</div>
18
19	<div class="output">
20	<div class="results">
21	<div class="results-item">
22	<h3>WCAG AA</h3>
23	<p>Normal Text: <span id="normal_text_aa">Pass</span></p>
24	<p>Large Text: <span id="large_text_aa">Pass</span></p>
25	</div>
26	<div class="results-item">
27	<h3>WCAG AAA</h3>
28	<p>Normal Text: <span id="normal_text_aaa">Pass</span></p>
29	<p>Large Text: <span id="large_text_aaa">Pass</span></p>
30	</div>
31	</div>
32
33	<div id="preview" class="preview">
34	<p>This is a preview text</p>
35	</div>
36
37	<div class="ratio">
38	<h2>Contrast Ratio: <span id="contrast-ratio"></span></h2>
39	</div>
40	</div>
41
42	<div class="error">
43	<p id="error-message"></p>
44	</div>
45	</div>