Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Create Animated Glistening Gold Text With SVG

Glistening Gold

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">


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%">


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" />

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

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2021 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268