How to Build Vector Graphics Raindrops

As promised, I explain how to build these vector graphics raindrops with VG.net.

The raindrops are Splines. Any rounded Shape will do. It is best not to make them very convex.

A path gradient fill on each raindrop gives it a glowing, translucent effect. The idea is that the light is coming from the upper right, and refracted to focus on the lower left of each drop. Here are the Fill properties:

• Path Gradient fill type
• GradientType: TwoColorBell. This is very important, and one reason similar effects are difficult to acheive in SVG or Avalon (lack of path gradients is another reason). This creates a bell curve interpolation between the two colors; I will explain more in another blog entry.
• StartColor: darkest blue
• EndColor: white
• FocusPoint: here you have to use your eyeball a bit. I used (.7, .7) for the left drop and (.6, .6) for the right. You can also drag the green adornement in the sample box with the mouse, until it looks good.
• Bounds: (-.1, -.1, 1.2, 1.2). I decided to make the gradient bounds a bit bigger than the Spline, to reduce the intensity of the StartColor. I could have gotten the same effect by reducing the luminosity and saturation of the StartColor.
• GammaCorrection: false. To get a "glow" or interior lighting effect, gamma correction must be set to false. Gamma correction is necessary when trying to simulate rounded surfaces. You may remember we complained about the lack of gamma correction in the .NET PathGradientBrush. This is still a problem. However, we did find a slightly expensive way to simulate this with two GradientTypes: TwoColorBell and TwoColorTriangular. Since GammaCorrection defaults to true, you must set it to false here. If you do not see the combo box, download a new version of VG.net. The Gamma Correction combo box was added in the 2.2.1022 build.

The shine on the upper left corner of each drop was created by first drawing a Spline. The Spline was converted to a Path, and the control points were moved to make it look like the bent reflection of a rectangular light source:

The Fill property on the shine has these settings:

• Linear Gradient fill type
• GradientType: TwoColorBell. The bell curve is great for rounded surfaces using a linear gradient.
• StartOpacity: 0 (completely transparent)
• EndColor: white
• BlendFocus: .79. This pushes the most intense white to the upper-left, in the direction of Angle
• Angle: 235
• Bounds: (0, 0, .8, .8). I made the bounds smaller than the Shape because the Shape is nearly diagonal. This gives a tighter fit to the gradient.

The shadow for each raindrop in the original picture is an ellipse, with a PathGradientFill, the center a translucent black color, and the edge completely transparent. TwoColorBell must be used as a GradientType to get nice shadows. Later I changed from an ellipse to a copy of the Spline shape. Either shape looks great.

To see the details of the shadows, and to examine the Picture for yourself, download the raindrop sample code. You will need the 2.2.1022 VG.net build, or later, to view in the designer.