Usually to put graphics on a webpage you use a compressed bitmaped image file such as .jpg or .png. These files create an image by defining the color of each pixel on the display. However, a more sophisticated way to put graphics on a webpage is to code that defines how to draw the image. For example, code could define to draw a line from one screen coordinate location to another screen coordinate location. That code would be called a "vector".
One nice thing about vectors is that you can manipulate them mathematically, for example you could scale a vector by dividing the length of its x and y coordinates by a scaling factor. That's why the code used is called Scalable Vector Graphics (SVG). One nice thing about SVG is that it is compatible with most modern browsers. In this article I'll show you how to use SVG to create animated glistening gold text.
The first thing you have to do to use SVG is to use the opening and closing svg tags to define your drawing area and enclose your code, as shown below.
<svg height="40" width="340"> </svg>
Next, within the SVG tags you need to place opening and closing defs tags, which will enclose definitions that will be used by graphic elements. This example uses a linearGradient, so we put the linearGradient tags inside the defs tags, as shown below.
<svg height="40" width="330">
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
</linearGradient>
</svg>
To define a linear gradient, you set a starting point and a stopping point, here defined in percentages. Then you can define color stops within the gradient area. Color stops define a color at points in the gradient, and the color will transition smoothly from one stop to another. In this example we define a beginning stop, a middle stop, and an ending stop, as shown below.
<stop offset="0%" style="stop-color:rgb(212,175,55);" stop-opacity:1" /> <stop offset="50%" style="stop-color:rgb(255,255,0);" stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(212,175,55);" stop-opacity:1"/>
In order to create the animated glistening effect, we have to modify the defintion of the middle stop as shown below.
<stop offset="50%" style="stop-color:rgb(255,255,0);" stop-opacity:1">> <animate attributeName="offset" values=".20;.40;.60;.80;.90;.80;.60;.40;.20;" dur="10s" repeatCount="indefinite" /> </stop>
The animate tag specifies that the attribute we're going to animate is the offset. We then provide a list of offest values to use in the animation. We should be able to use percentages for these values as we did in the rest of the code, but Chrome will not render the animation unless numbers are used. For example .20 represents 20%.
The dur attribute specifies the length of the animation, which can be expressed in hours (h), minutes (m), seconds (s) or milliseconds (ms). Then the repeatCount attribute specifies how many times the animation should repeat, in this case it should repeat indefinite.
Now we need to define a graphic element to which to apply the linear gradient. The text element shown below defines the location, font-family, font-size, and font-weight of the text, and specifies to use the linear gradient we defined to fill the text. Then we provide the text.
<text x="0" y="30" font-family="Verdana" font-size="40px" font-weight="bold" fill="url(#gradient)"> Glistening Gold </text>
That's all there is to it, shown below is the entire code for this example, which you can cut and paste into your webpage.
<svg height="40" width="340">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(212,175,55);" stop-opacity:1" />
<stop offset="50%" style="stop-color:rgb(255,255,0);" stop-opacity:1">
<animate attributeName="offset" values=".20;.40;.60;.80;.90;.80;.60;.40;.20;" dur="10s" repeatCount="indefinite" />
</stop>
<stop offset="100%" style="stop-color:rgb(212,175,55);" stop-opacity:1"/>
</linearGradient>
</defs>
<text x="0" y="30" font-family="Verdana" font-size="40px" font-weight="bold" fill="url(#gradient)">
Glistening Gold
</text>
</svg>
More Graphics Design Tips:
• Building an Image with a Logo
• How to Place Greek Letters in an Inkscape Drawing
• How to Install the Free, Open-Source, Blender 3D Animation Application
• Inkscape: Combine the Paths of Multiple Shapes
• Graphics Design for Beginners - Blur Filters
• The Browser Safe Palette
• An Insight to Logos
• Export Inkscape Drawing as an Image
• Getting Started with Blender
• How to Create a Simple Video with Windows Movie Maker