LayoutTests/svg/as-background-image/resources/hearts.svg

<svg width="100%" height="100%" preserveAspectRatio="none" viewBox="0 200 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title>Suzanne's Hearts V1.0</title><desc>Author: http://richard.warburton.it - Licence: http://creativecommons.org/licenses/publicdomain</desc>
<rect x="-200" y="0" width="600" height="600" fill="black" />
<path d="M0 0A10 10 0 1 1 17.0711 7.0711L0 24.142L-17.0711 7.0711A10 10 0 1 1 0 0" transform="translate(100,265) scale(4,5.2)" fill="#500" />
<g id="hearts" style="text-anchor: middle;" font-family="sans-serif" font-size="4">
<g font-size="20">
	<text x="100" y="280" fill="#ffffff">Richard</text>
	<text x="100" y="300" fill="#ffffff">4</text>
	<text x="100" y="320" fill="#ffffff">Suzanne</text>
</g>
</g>
<script type="text/ecmascript"><![CDATA[
var hearts=new Array(8),r1=10,r2=25,fps=10;

var messages=new Array(
	new Array("I Love You"),
	new Array("You Light Up","My Life"),
	new Array("You Mean So","Much To Me"),
	new Array("I Wouldn't Be","Without You"),
	new Array("You Make Life","So Much Fun"),
	new Array("You're So","Special"),
	new Array("My Lady","In Red"),
	new Array("Time Flies When","I'm With You"),
	new Array("Richard","4","Suzanne"),
	new Array("I Don't Know","What I'd Do","Without You"),
	new Array("Never Want","This To End"),
	new Array("My Soul Mate"),
	new Array("You're","Everything","I Want"),
	new Array("You're So","Beautiful"),
	new Array("You're So","Smart"),
	new Array("Being With You","Makes Me Want","You More"),
	new Array("You're","Soooooo","Sexy"),
	new Array("Meeting You Was","The Best Thing","That Happened","To Me"),
	new Array("I Live For","Your Smile"),
	new Array("A Dream","Come True")
);

for(x=0;x<hearts.length;x++) hearts[x] = new heart(); timer();
function timer() { for(x=0;x<hearts.length;x++) hearts[x].move(); setTimeout("timer()",1000/fps); }

function heart() {
	this.svgHeart=document.createElementNS("http://www.w3.org/2000/svg","path");
	this.svgHeart.setAttributeNS(null,"d",'M0 0A10 10 0 1 1 17.0711 7.0711L0 24.142L-17.0711 7.0711A10 10 0 1 1 0 0');
	this.svgHeart.setAttributeNS(null,"transform",'scale(1,1.3)'); // Better shape for minor overhead
	this.svgElement=document.createElementNS("http://www.w3.org/2000/svg","g");
	this.regenerate=heartRegenerate;
	this.move=heartMove;
	this.svgMessage=new Array();
	this.svgElement.appendChild(this.svgHeart);
	this.regenerate();
	document.getElementById("hearts").appendChild(this.svgElement);
}

function heartRegenerate() {
	this.speedSize=Math.random()/20+0.03;
	this.speedRotation=10*Math.random()-5;
	this.currentRotation=0;
	this.currentSize=0;
	this.x=Math.floor(Math.random()*200);
	this.y=Math.floor(Math.random()*200)+200;
	var red=Math.floor(Math.random()*128+128);
	this.svgElement.setAttributeNS(null,"fill","rgb("+red+","+Math.floor(Math.random()*red/4)+","+Math.floor(Math.random()*red/4)+")");
	if(this.svgMessage.length>0) {
		for(var i=0;i<this.svgMessage.length;i++)
			this.svgElement.removeChild(this.svgMessage[i]);
	}
	var text=messages[Math.floor(messages.length*Math.random())];
	this.svgMessage=new Array(text.length);
	for(var i=0;i<text.length;i++) {
		this.svgMessage[i]=document.createElementNS("http://www.w3.org/2000/svg","text");
		this.svgMessage[i].setAttributeNS(null,"y",11-4*(text.length/2-i));
		this.svgMessage[i].setAttributeNS(null,"fill","#ffffff");
		this.svgMessage[i].appendChild(document.createTextNode(text[i]));
		this.svgElement.appendChild(this.svgMessage[i]);
	}
}

function heartMove() {
	this.currentRotation+=this.speedRotation;
	this.currentSize+=this.speedSize;
	if(this.currentSize<0) this.regenerate();
	else if(this.currentSize>1.5) {
		this.currentSize-=2*this.speedSize;
		this.speedSize=-this.speedSize;
	}
	this.svgElement.setAttributeNS(null,"transform","translate("+this.x+","+this.y+") scale("+this.currentSize+") rotate("+this.currentRotation+")");
}
]]></script>
</svg>