SVG Sparkel Tutorial

I do not like the results of the original flash tutorial Sparkling Glass Effect in Flash. It is good do not get me wrong, but the sparkling effect is to strong - and its pattern is one that blinks! I don't like blinking graphics.

So I took liberty to tone it down and make the animation almost not noticeable unless you are looking at the image. Then to hold your attention near the brand name long enough that maybe you can recall the brand name.

A tutorial will be posted shortly - SVGweb which uses flash is being implemented on this page. The tutorial will be best viewed with an Ipad, chrome, safari, firefox beta, or IE beta.


SVG (flash like sparkel effect)

Step one the image.

Basicly it has a glass as a background image.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
      width="220" height="320">

   <image xlink:href="glass.jpg" 
    width="220"
    height="320" />

<!-- ... animated polygon ... -->


</svg>

This could be done in html5 using a divide and then embed the animated
svg polygon.

    <div style="background:url(glass.jpg);width:200; height:320">

<!-- ... animated polygon ... -->

    </div>

Step two the polygon

For the sparkel we will draw it with a polygon primitive. It is a filled in
shape with 8 points. When we animate shapes the center point is at zero ... we
are not forced when we draw an object to center it as we can do this later
by loading the object in another group which is offset moving the center ...
however, if we center it now it is less code; notepad programers all agree
that the method that uses the least code is better.

Starting from the top the eight points will are
 0,-10; 2,-2; 10,0; 2,2; 0,10; -2,2; -10,0; -2,-2
The polygon tag with a white fill looks like:

    <polygon
    points=" 0,-10 2,-2 10,0 2,2 0,10 -2,2 -10,0 -2,-2"
    style="fill:white;" />

I can place this with a transform; The animation for the transform attribute includes rotate and scale.


    <polygon
    points=" 0,-10 2,-2 10,0 2,2 0,10 -2,2 -10,0 -2,-2"
    style="fill:white;" transform="translate(150 105) rotate(0) scale(1)"/>


I drop this into the SVG after the rendering of the image placing it on top of the
image. Note the next step is adding animation to the polygon, so instead of closing the tag
at the end of the tag an open and closing tag is used.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
      width="220" height="320">
   <image xlink:href="glass.jpg" 
    width="220"
    height="320" />
   <polygon
    points=" 0,-10 2,-2 10,0 2,2 0,10 -2,2 -10,0 -2,-2"
    style="fill:white;" transform="translate(150 105) rotate(0) scale(1)">

<!-- ... animation markup goes inside polygon tag ... -->

    </polygon>

</svg>


Step three the animation.

    <animateTransform
    attributeName="transform" type="rotate"
    from="0" to="90" dur="2.5s"
    additive="sum"
    repeatCount="indefinite" />

This sayes to animate the attribute "transform," "rotate" value -- From 0 to 90 over
2 1/2 seconds and repeat forever. This code makes the animation begin at an assumed
time of 0 seconds.

The additive property of the animatedTransform tells the computer
if it should "replace" the rotation value or "add" to it -- replace is assumed but in this case "sum" is needed.

    <animateTransform
    attributeName="transform"
    type="scale"
    additive="sum"
    values="1.2;.7;1.0;.6;1.2" dur="2s"
    repeatCount="indefinite" />

A "values" attribute can be used instead of "from" and "to" properties. Each value or group
of values is seperated by a semicolon. to not blink on a repeating animation the begining and ending values need to be the same.


The SVG now becomes

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
      width="220" height="320">
   <image xlink:href="glass.jpg" 
    width="220"
    height="320" />
   <polygon
    points=" 0,-10 2,-2 10,0 2,2 0,10 -2,2 -10,0 -2,-2"
    style="fill:white;" transform="translate(150 105)">

      <animateTransform
    attributeName="transform" type="rotate"
    from="0" to="90" dur="2.5s"
    additive="sum"
    repeatCount="indefinite" />

      <animateTransform
    attributeName="transform"
    type="scale"
    additive="sum"
    values="1.2;.7;1.0;.6;1.2" dur="2s"
    repeatCount="indefinite" />

   </polygon>

</svg>

I want to use three sparkels at 150 105, 150 70, and 120 125. So I am just going to copy the polygon and change the translate value. I could use a pattern but I would not see any significant savings in this case because I am only dealing with a 8 point polygon.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
      width="220" height="320">

   <image xlink:href="glass.jpg" 
    width="220"
    height="320" />

   <polygon points=" 0,-10 2,-2 10,0 2,2 0,10 -2,2 -10,0 -2,-2"
    transform="translate(150 105)"
    style="fill:white;" >

      <animateTransform
    attributeName="transform" type="rotate"
    from="0" to="90" dur="2.5s"
    additive="sum"
    repeatCount="indefinite" />

      <animateTransform
    attributeName="transform"
    type="scale"
    additive="sum"
    values="1.2;.7;1.0;.6;1.2" dur="2s"
    repeatCount="indefinite" />

   </polygon>

   <polygon points=" 0,-10 2,-2 10,0 2,2 0,10 -2,2 -10,0 -2,-2"
    transform="translate(150 70)"
    style="fill:white;" >

      <animateTransform
    attributeName="transform" type="rotate"
    from="0" to="90" dur="2.5s"
    additive="sum"
    repeatCount="indefinite" />

      <animateTransform
    attributeName="transform"
    type="scale"
    additive="sum"
    values="1.2;.7;1.0;.6;1.2" dur="2s"
    repeatCount="indefinite" />

   </polygon>

   <polygon points=" 0,-10 2,-2 10,0 2,2 0,10 -2,2 -10,0 -2,-2"
    transform="translate(120 125)"
    style="fill:white;" >

      <animateTransform
    attributeName="transform" type="rotate"
    from="0" to="90" dur="2.5s"
    additive="sum"
    repeatCount="indefinite" />

      <animateTransform
    attributeName="transform"
    type="scale"
    additive="sum"
    values="1.2;.7;1.0;.6;1.2" dur="2s"
    repeatCount="indefinite" />

   </polygon>

</svg>