Example for Colors, Fills and Transparency Home Page
The example to the left is implemented interactively, to show colors and transparency. The black circle is draggable: simply click on it and drag it within the square.
  • With horizontal movements the color is changing, more detailed: the red channel is changing, green and blue stay with value zero.
  • With vertical movements the transparency is changed between 1 (top) and 0 (bottom).
Transparency can also be used with raster images and strokes.

Gradients are also possible, two simple gradients are used in the example: from black to red (horizontally) in the rectangle and from black to white (vertically) within a text object. Those gradients are quite powerful and animatable, with any number of in between values and stop-values.

Fills can also be done with patterns (tiles), that can either consist of raster images or vector objects (not shown in this example).

The presentation quality in this interactive example depends on the power of your computing device!

Right-click, save ...
Technical Details

Uniform, opaque colors
colors, both fills and strokes, are assigned with CSS.

The syntax for a red filled circle is like the following:
<circle ... style="fill:#ff0000;"/>
For the definition of the color-values alternative notations exist (f.e. fill:red) beside the hexadezimal-system. One can use predefined color values (see before) or fill:rgb(255,0,0) the RGB system, probably well-known.

Transparency
For alpha-blending, the shine through of the objects below, the syntax is similar. The values are between zero and one, one is default.
<circle ... style="opacity:.3;"/>
The transparency is set to 30 percent.

Gradients
Gradients definitions demand several parameters, they are predefined and used for the concerned objectgs.
<defs>
  <linearGradient id="MyGradient" gradientTransform="rotate(45)">
    <stop offset="0%" style="stop-color:white"/>
    <stop offset="30%" style="stop-color:red"/>
    <stop offset="100%" style="stop-color:black"/>
  </linearGradient>
</defs>
Within the definitions section <defs> we define a gradient with the name MyGradient. The gradient leeds from white, over red to black, while the section for red is not exactly in the middle, but at 30 percent. The gradient is rotated with 45 degrees. Additional parameters are the gradient type (linear or radial), the definition of an abstract coordinate-system for describing the gradient, as well as the behaviour in case the gradient ends before the end of the object. (mirroring, repeating, running out)

The actual assignment is again done by using styles.
<rect style="fill:url(#MyGradient);" ... />