Animated Global Composite Operations
Free Visual Tool: HTML5 Web Design
Select options from the menu below.
Use this free visual tool to see how global composite operations react with
a set of animated colorful circles.
Select then view,
globalCompositionOperation settings from the drop down
Color Composite Options menu.
Functions draw a set of colored circles at random locations with random diameters. Global composite operations apply based on the order each circle displays. Global composite operations compose each circle over the preceding circle. Colors are modified where circles overlap based on the type of operation selected.
The first circle is the
The second circle is the
The third circle becomes a new
overlays the second circle
as a new
and so on, until all circles display.
offers some great opportunities to
create visual effects.
lighter option adds light from color
channels in both circles.
Molten Lava Example
Interactive Particle Explosion
example apply global composite operation
lighter, for beautiful, unique effects.
See More Global Composite Examples.
- Twelve Global Composite Operations
- Radial Gradients and Color Stops
- Global Alpha
- How to Draw a Full Circle Arc
- How to Add a Background Graphic
- Basic Timed Animation
- HTML5 Color Formats
- Play an Audio File with Animation
- Combine Features for Stunning Animation