Blog Design Development Mobile Inspiration CSS Javascript News Opinions Politics Menu

Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet

HTML5 Canvas Text Font, Size, and Style Tutorial

HTML5 Canvas Aurora Borealis Effect

Description

This canvas tutorial from CodePen mimics the effect of the Aurora Borealis (more commonly known as the northern lights), in both the colors and the way that the lights are known to "dance" across the sky.

<!DOCTYPE HTML>
<html>

<head>
<meta charset="UTF-8">
<title>Canvas Aurora Effect</title>
<style type="text/css">
body {
  background: #000;
  overflow: hidden;
}

canvas {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

#c1 {
  opacity: 0;
}

#c2 {
  background: #000;
}
</style>

<body>
	
<canvas></canvas>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	
  
	
<script>"use strict";var wprRemoveCPCSS=function wprRemoveCPCSS(){var elem;document.querySelector('link[data-rocket-async="style"][rel="preload"]')?setTimeout(wprRemoveCPCSS,200):(elem=document.getElementById("rocket-critical-css"))&&"remove"in elem&&elem.remove()};window.addEventListener?window.addEventListener("load",wprRemoveCPCSS):window.attachEvent&&window.attachEvent("onload",wprRemoveCPCSS);</script><script src="https://www.html5canvastutorials.com/wp-content/cache/min/1/70cf79856c9fa07485493ff34f098e8e.js" data-minify="1"></script><noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT%20Sans%7CLato%3A400%2C700%2C400italic%2C700italic%7COswald%3A400%2C700&display=swap" /><link rel="stylesheet" href="https://www.html5canvastutorials.com/wp-content/cache/min/1/53177405dd11d11274238888a830f07b.css" media="all" data-minify="1" /><link rel="stylesheet" href="/libraries/codeMirror/lib/codemirror.css"></noscript></body>

Demo