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 Blooming Flowers Effect

Description

This tutorial from CodePen shows you how to use HTML5 to create a cool, 70s inspired effect with animated blooming flowers.

<!DOCTYPE HTML>
<html>

<head>
<meta charset="UTF-8">
<title>Canvas Blooming Flowers Effect</title>
<style type="text/css">
body {
  margin: 0;
  overflow: hidden;
  background: -webkit-radial-gradient( left bottom, circle farthest-corner, #e1fd3e, #174709);
  background: -moz-radial-gradient( left bottom, circle farthest-corner, #e1fd3e, #174709);
  background: -ms-radial-gradient( left bottom, circle farthest-corner, #e1fd3e, #174709);
  background: -o-radial-gradient( left bottom, circle farthest-corner, #e1fd3e, #174709);
  background: radial-gradient( farthest-corner circle at left bottom, #e1fd3e, #174709);
}

</style>

<body>
	
<canvas id="c"></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/e0f88052d8d58a2b52a0fce8f870e62d.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>

Demo