Radial Gradient Visual Effects Tutorial
Create Fire, Halo, Rainbow, Ball, Torus, Sun, Explosion Effects
Introduction
This tutorial demonstrates how to create a set of visual effects with HTML5 radial gradients. This article explains how to create a fire effect, halo effect, donut or torus, ball, explosion, sun, and rainbow with JavaScript radial gradients alone. If you're unfamiliar with radial gradients see the introduction to radial gradients tutorial.
Learn to generate fire effects, halos, rainbows, donut torus, and explosion particle, fireball effect, and the appearance of three dimensional balls with JavaScript and HTML5.
Fire Effects
Select colors for fire effects
with Photoshop's Color Picker dialog or
a similar graphics application.
Create a gradient with a number of opaque
stops ranging from black
through yellow to red.
However radial gradients with rgba
(Red, Green, Blue, and Alpha)
color stops provide the appearance of more realistic fire.
The example moves the origin of the center
radius down 60 pixels. However consider more responsive Web design with
coordinates scaled based on screen dimensions.
Either way move the origin down or
call method drawArc(), to render only a portion of a circle.
See the fire effect code
for details.
Torus or Donut Effects
Donut or Torus effects were created with a relatively
sharp division between the inner radius and
the start of the outer radius.
The example uses a black canvas,
therefore most of the inner radius
includes black or near black color stops.
The final radius is opaque black as well.
The donut includes a highlight around the
center
of the outer radius.
See the donut effect code
for more details.
Rainbow Effect
The rainbow effect was generated with colors of the rainbow. Select the colors with Photoshop's Color Picker Dialog. Move the origin of the inner radius down by 30 pixels. Also crop the height in half. Cropping the height displays just the top half of the radial gradient as an arc. See the rainbow effect code for more details. Once again, consider applying scaled, rather than hard coded, dimensions for responsive Web design.
Ball
Modifying the color and location of the inner circle, provided a highlight for the ball. The highlight was declared with a light inner color and relatively sharp contrast between the inner color and outer colors. Additionally the origin of the inner circle was moved left 16 pixels and up 32 pixels. Moving the bright colored origin up and left, gives the illusion of light shining on the ball from the upper left. The outer gradient eases off in color. There's a a relatively sharp definition between the background color of the canvas, and the edge of the ball. See the ball effect code for more details.
Halo Effects
This example includes a couple of halo effects. The goal was to display a circle with gently fading color. The first effect displays a blue halo. The second effect displays a white halo with more gentle gradations. See the halo effect code for more details.
Bright Sun Effect
The bright sun or fireball effect
demonstrates adding color stops.
Use fractions of 1.0 to place additional color stops
within the radius of the gradient.
For example 1.0 displays along the perimeter of the circle.
0.0 displays at the origin of the circle.
0.50 displays between
the origin and perimeter of the circle.
See the sun effect code
for more details.
Explosion One Particle
The explosion particle is useful for explosion visual effects when applied alone or with multiple particle explosions and global composition. This example introduces the most basic gradient where the origin of the circle starts at red, then gradually changes to black as it reaches the outside of the circle. See the explosion particle code for more details.
Tips
Experiment with radial gradients for a wide range of special effects. Try various colors, stops, and settings to discover new effects. For example consider creating more realistic fire effects with cropped bottom gradients, alpha transparency, and flame height greater than flame width. The flame could extend upward and blend with the background.
Perhaps the most compelling effects are generated with animated gradients. However be careful. Some mobile devices slow down when processing too many gradients.
Summary
This tutorial demonstrated how to create a set of effects with HTML5 radial gradients. This article explained how to create a fire effect, halo effect, donut or torus, ball, fireball, explosion, and rainbow effect, with radial gradients alone.
Web Development Company
Seven Thunder Software's Web programming skills include HTML5, CSS3, JavaScript, WebGL, GLSL and some PHP with MySQL and Python 3. Web design skills include Web graphics with Photoshop, animation with After Effects and 3ds Max.
