index.html

<?php include('header.php'); ?>
<?php include('menu.php'); ?>
<div class="demoarea" height="600px" width="600px">
<svg id="svgcontainer" width="100%" height="100%" viewBox="0 0 800 800" class="pivotblock"/>
</div>
<script>
//$( function() {
var s = Snap("#svgcontainer");
var myCharArray, textElArray, myTrans, offsetY = 50;

//var borderRect = s.rect(0,0,600,600,10,10).attr({ stroke: "silver", fill: "silver", strokeWidth: "3" });

//// DRAW RECT ANIMATION

var g = s.group().transform('t250,120');

var r0 = s.rect(150,150,100,100,20,20).attr({ fill: "orange", opacity: "0.8", stroke: "black", strokeWidth: "2" });
var c0 = s.circle(225,225,10).attr({ fill: "silver", stroke: "black", strokeWidth: "4"  }).attr({ id: 'c0' });
var g0 = s.group( r0,c0 ).attr({ id: 'g0' });
//g0.animate({ 'transform' : 't250,120r360,225,225' },4000);
g0.appendTo( g );
g0.animate({ 'transform' : 'r360,225,225' },4000);
g0.drag();


var r1 = s.rect(100,100,100,100,20,20).attr({ fill: "red", opacity: "0.8", stroke: "black", strokeWidth: "2" });
var c1 = s.circle(175,175,10).attr({ fill: "silver", stroke: "black" , strokeWidth: "4"}).attr({ id: 'c1' });
var g1 = s.group( r1,c1 ).attr({ id: 'g1' });;
g1.appendTo( g0 ).attr({ id: 'g1' });
g1.animate({ 'transform' : 'r360,175,175' },4000);


var r2 = s.rect(50,50,100,100,20,20).attr({ fill: "blue", opacity: "0.8", stroke: "black", strokeWidth: "2" });
var c2 = s.circle(125,125,10).attr({ fill: "silver", stroke: "black", strokeWidth: "4" }).attr({ id: 'c2' });
var g2 = s.group(r2,c2).attr({ id: 'g2' });

g2.appendTo( g1 );
g2.animate( { 'transform' : 'r360,125,125' },4000);


var r3 = s.rect(0,0,100,100,20,20).attr({ fill: "yellow", opacity: "0.8", stroke: "black", strokeWidth: "2" });
var c3 = s.circle(75,75,10).attr({ fill: "silver", stroke: "black", strokeWidth: "4" }).attr({ id: 'c3' });
var g3 = s.group(r3,c3).attr({ id: 'g3' });

g3.appendTo( g2 );
g3.animate( { 'transform' : 'r360,75,75' },4000);

var r4 = s.rect(-50,-50,100,100,20,20).attr({ fill: "green", opacity: "0.8", stroke: "black", strokeWidth: "2" });
var c4 = s.circle(25,25,10).attr({ fill: "silver", stroke: "black", strokeWidth: "4" }).attr({ id: 'c4' });
var g4 = s.group(r4,c4).attr({ id: 'g4' });
g4.appendTo( g3 );
g4.animate( { 'transform' : 'r360,25,25' },4000, mina.linear, blurInOut);

var f = s.filter(Snap.filter.blur(0, 0));
var filterChild = f.node.children[0];

r3.attr({ filter: s.filter( Snap.filter.blur(10,5) ) });

function blurInOut() {
	s.attr({ filter: f });
	Snap.animate( 0, 10, function( value ) { filterChild.attributes[0].value = value + ',' + value;  }, 2000, mina.linear, blurIn );
};

function blurIn() {
	Snap.animate( 10, 0, function( value ) { filterChild.attributes[0].value = value + ',' + value;  }, 2000, mina.linear, function() { s.attr({ filter: '' }) } );
};



/// SLOW TEXT 
var myTextStringArray = ["SVG code examples, click RUN on each page", ""];
var contactStringArray = ["Contact Me", ""];
var emailStringArray = ["gibbathehutt@gmail.com"];
var myGroup = s.g().attr({ fill: "red", "font-size": "25px" });

function slowDisplay(x, y, stringArray) {
        for( var a=0; a < stringArray.length; a++) {

                myCharArray = stringArray[a].split('');
                textElArray = myGroup.text(x, y, myCharArray).attr({ opacity : 1, y: (a * 20 + offsetY) });

        };
};

slowDisplay( 100,0, myTextStringArray );

myTspans = myGroup.selectAll("tspan").attr({
        opacity: 0
});

function animFunc( element ) {
        Snap.animate(0,1, function( value ) {
                element.attr({ opacity: value, rotate: (value * 360) });
        }, 600 );
}

for( var i=0; i < myTspans.length; i++ ) {
        setTimeout(
                        animFunc.bind(null, myTspans[i])
                , i * 60);
}

var contact = s.text(350,620,"ians.coding@gmail.com, twitter: @ianscoding");
//contact.hover( function() { 
//      this.node.textContent = 'ians.coding@gmail.com, twitter: @ianscoding';
//} );

//})();
</script>

<?php include('footer.php'); ?>