Edit in JSFiddle

<div>
<svg id="cirBox" height="300" width="300">
    <circle cx="51" cy="75" r="30" 
        fill="orange"
        stroke="red"
        stroke-opacity=".5"
        stroke-width="10"
        id="myCircle"  
        onclick = "alternateColor()"
    />
</svg>
<svg id="text" height="300" width="300" >
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop class="c0" offset="0%"/>
            <stop class="c1" offset="100%"/>
        </linearGradient>
        
        <linearGradient id="myLinearGradient1"
                    x1="0%" y1="0%"
                    x2="0%" y2="100%"
                    spreadMethod="pad">
            <stop offset="0%"   stop-color="#00cc00" stop-opacity="1"/>
            <stop offset="100%" stop-color="#006600" stop-opacity="1"/>
        </linearGradient>  
        
        <path id="path2"
            d="m 63,258 c 0,0 -71,-217 171,-202 242,14 148,-45 148,-150"
            fill="none" stroke="black"
        />
    </defs>
         
    <text y="72" fill="url(#grad1)" title="clicking the text will change it's style">
        <textPath xlink:href="#path2">
            Feb 25, 2013
        </textPath>
    </text>
    <circle id="gradc" cx="200" cy="200" r="50" />
</svg>
   
    
</div>
<br>
MAX_X:<span id="mx"></span><br>
MAX_Y:<span id="my"></span><br>
R:<span id="r"></span><br>
X:<span id="x"></span><br>
Y:<span id="y"></span><br>
X Speed: <input id="xspeed" type="range" min=".1" max="10.0" step=".2" value="1"/><br>
Y Speed: <input id="yspeed" type="range" min=".1" max="10.0" step=".2" value="1"/><br>
<button onclick="moveCircle()">Move Circle</button>
<button onclick="startAnim()">Animate Circle</button>
<button onclick="stopAnim()">Stop Circle</button>
    
<br><br><br>
    



    

            

//by Troy Whorten Feb 25, 2014

//color function by Jennifer Yu at Mix11
//gradient code from http://stackoverflow.com/questions/11303740/svg-linear-gradient-doesnt-work-in-safari  and from http://tutorials.jenkov.com/svg/svg-gradients.html

var colors = ["orange", "black", "yellow", "red", "blue", "fuchsia"];

var curColor = 0;

function alternateColor() {
    var circle = document.getElementById("myCircle");
    random = Math.floor(Math.random() * 100);
    curColor = (curColor + 1) % colors.length;
    stkColor = (curColor + random) % colors.length;
    circle.setAttribute("fill", colors[curColor]);
    circle.setAttribute("stroke", colors[stkColor]);
}
 
var xdir = 1;
var ydir = 1;
var xfac = Math.random();
var yfac = Math.random();

function moveCircle() {
    var circle = document.getElementById("myCircle");
    var box = document.getElementById("cirBox");
    var curx = Number(circle.getAttribute("cx"));
    var cury = Number(circle.getAttribute("cy"));
    var rad = Number(circle.getAttribute("r")) + Number(circle.getAttribute("stroke-width"))/2;
    var max_x = box.getAttribute("width");
    var max_y = box.getAttribute("height");

    var xspeed = document.getElementById("xspeed").value;
    var yspeed = document.getElementById("yspeed").value
    
    //if edge touches, change direction
    if((curx >= (max_x - rad)) || curx <= rad)
    {
        xdir = -xdir;
        xfac = Math.random()/2;    
        
    }
        
    if((cury >= (max_y - rad)) || cury <= rad)
    {
        ydir = -ydir;
        yfac = Math.random()/2;
    }   
    
    var newx = (curx) + (xdir*(1+xfac)*xspeed)
    var newy = (cury) + (ydir*(1+yfac)*yspeed)

    if (newx > (max_y - rad))
        newx = max_y - rad;
    if (newy > (max_y - rad))
        newy = max_y - rad;
    if (newx < (rad))
        newx = rad;
    if (newy < (rad))
        newy = rad;   
    
    circle.setAttribute("cx",newx);
    circle.setAttribute("cy",newy);
    document.getElementById("x").innerHTML = (curx) + (xdir*(1+xfac));
    document.getElementById("y").innerHTML = (cury) + (ydir*(1+yfac));
    document.getElementById("my").innerHTML = max_x - rad;
    document.getElementById("mx").innerHTML = max_y - rad;
    document.getElementById("r").innerHTML = rad;
}

var myInterval = setInterval(function () {},10000);

function startAnim() {
    clearInterval(myInterval);
    myInterval = setInterval(moveCircle,33);
}

function stopAnim() {
    clearInterval(myInterval);
}

svg{
    border-style: dotted;
    border-width: 1px;
    display:inline-block;
}


circle:active {
    fill: red;
}

svg text {
    fill: url(#grad1);
    font-size: 72px;
    font-family: "Comic Sans MS", cursive;
    stroke: purple;
    stroke-width:1.5px;
}

svg text:active {
    fill:url(#myLinearGradient1);    
}

.c0 {
    stop-color: orange;
    stop-opacity:1;
}

.c1 {
    stop-color: red;
    stop-opacity:1;
}

#gradc {
    fill:url(#myLinearGradient1);
}

#gradc:hover {
       fill: url(#grad1);
}
}