HTML5 Cavas Rotating Rainbow Text Effect

Description

Check out this cool rainbow rotating text effect created using HTML5 canvas.

<!DOCTYPE HTML>
<html>

<head>
<meta charset="UTF-8">
<title>Rotating Rainbow Text Effect</title>
<style type="text/css">
	
	html,body,canvas {
   padding:0px;
   margin:0px;
   overflow:hidden;
   height:100%;
}

body {
   background-image: linear-gradient(to bottom,#C2CAE8,#8380B6);
}

canvas {
   display:block;
   margin:auto;
   width:100vmin;
   height:100vmin;
}

</style>
</head>

<body>
	<canvas width="400" height="400"></canvas>
	
<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/e75efa3478a228841b5878fac61e1ea1.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/d94d61c3c9378c3a73090741906359ca.css" media="all" data-minify="1" /><link rel="stylesheet" href="/libraries/codeMirror/lib/codemirror.css"></noscript></body>

Canvas Cheat Sheet

HTML5 Cavas Rotating Rainbow Text Effect

Description

Demo