The SVG file

by subacati

Remember that animated rectangle? Well, here is the code.

<?xml version="1.0" encoding="UTF-8"?>

<svg font-style="normal" font-weight="400" xml:space="preserve" baseProfile="tiny" height="100%" version="1.2" viewBox="0 0 160 121" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
	<g id="background">
		<g>
			<g>
				<path d="M158.472,115.563 C158.472,117.716 156.714,119.461 154.548,119.461 L5.452,119.461 C3.285,119.461 1.529,117.716 1.529,115.563 L1.529,5.436 C1.529,3.284 3.285,1.538 5.452,1.538 L154.548,1.538 C156.714,1.538 158.472,3.284 158.472,5.436 L158.472,115.563 Z"/>
			</g>
			<path fill="#7a7a7a" d="M5.452,0 C4,0 2.633,0.563 1.604,1.585 C0.57,2.613 0,3.98 0,5.436 L0,115.563 C0,118.562 2.446,121 5.452,121 L154.548,121 C157.555,121 160,118.562 160,115.563 L160,5.436 C160,3.98 159.431,2.613 158.396,1.585 C157.366,0.563 156,0 154.548,0 L5.452,0 Z M3.057,115.563 L3.057,5.436 C3.057,4.81 3.304,4.219 3.752,3.774 C4.205,3.324 4.809,3.076 5.452,3.076 L154.548,3.076 C155.192,3.076 155.794,3.324 156.248,3.774 C156.696,4.219 156.942,4.809 156.942,5.436 L156.942,115.563 C156.942,116.865 155.869,117.923 154.547,117.923 L5.452,117.923 C4.132,117.924 3.057,116.865 3.057,115.563 Z"/>
		</g>
	</g>
	<g id="cricle" transform="matrix(1,0,0,1,0,0)">
		<animateTransform begin="0" dur="1.1" restart="never" accumulate="none" additive="sum" calcMode="spline" keySplines="0 0 1 1;0 0 1 1;0 0 1 1" keyTimes="0;0;0;1" values="0,0;0,0;0,0;-3.02058e-005,-9.30737e-005" attributeName="transform" fill="freeze" type="translate" repeatCount="indefinite"/>
		<animateTransform begin="0" dur="1.1" restart="never" accumulate="none" additive="sum" calcMode="spline" keySplines="0 0 1 1;0 0 1 1;0 0 1 1" keyTimes="0;0;0;1" values="0 80 50.178;0 80 50.178;0 80 50.178;360 80 50.178" attributeName="transform" fill="freeze" type="rotate" repeatCount="indefinite"/>
		<linearGradient gradientUnits="userSpaceOnUse" id="XMLID_2_" x1="41" x2="119" y1="50.1777" y2="50.1777">
			<stop offset="0" stop-color="#ffffff" opacity="0"/>
			<stop offset="0.2175" stop-color="#c2c2c2" stop-opacity="1"/>
			<stop offset="0.6048" stop-color="#5b5b5b" stop-opacity="1"/>
			<stop offset="0.8739" stop-color="#191919" stop-opacity="1"/>
			<stop offset="1" stop-color="#000000" opacity="0.5"/>
		</linearGradient>
		<path fill="url(#XMLID_2_)" d="M80,11.178 C58.461,11.178 41,28.639 41,50.178 C41,71.717 58.461,89.178 80,89.178 C101.539,89.178 119,71.717 119,50.178 C119,28.639 101.539,11.178 80,11.178 Z M80,78.785 C64.201,78.785 51.393,65.978 51.393,50.18 C51.393,34.379 64.202,21.573 80,21.573 C95.798,21.573 108.606,34.38 108.606,50.18 C108.606,65.979 95.799,78.785 80,78.785 Z"/>
	</g>
</svg>

copy this code and paste it into a new file with an .svg extention. Then use any svg viewer to view it.
Of course, you could simply just download the Opera browser. :whistle:.
you can download the Adobe svg viewer to view svg files.

Advertisements