<?xml version="1.0" encoding="utf-8"?> <!-- INSERT onload=…

Twetch ·

<?xml version="1.0" encoding="utf-8"?>
<!--
INSERT onload="s(evt)" DIRECTYLY AFTER <svg
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 512 512">
<title>SVG analog clock</title>
<desc>Displays the client's current system time. This SVG was made with highest compability and readability of the source code in mind. SVG performance and size were not important.</desc>
<defs>
<!-- Hour clockhand -->
<polygon id="p1" points="252.5,156 252.5,256 252.5,286 259.5,286 259.5,256 259.5,156" />
<!-- Minute clockhand -->
<polygon id="p2" points="253.5,141 253.5,256 253.5,301 258.5,301 258.5,256 258.5,141" />
<!-- Second clockhand -->
<polygon id="p3" points="258,271 257,271 257,256 257,126 255,126 255,256 255,271 254,271 252,321 260,321" />
<!-- Linear gradient 1 -->
<linearGradient id="f1" gradientUnits="userSpaceOnUse" x1="2.2783" y1="511.3906" x2="2.2783" y2="510.3906" gradientTransform="matrix(444.416 0 0 -444.416 -756.208 227305.7031)">
<stop offset="0" stop-color="#FFFFFF" />
<stop offset="1" stop-color="#FFFFFF" stop-opacity="0.4" />
</linearGradient>
<!-- Linear gradient 2 -->
<linearGradient id="f2" gradientUnits="userSpaceOnUse" x1="2.1045" y1="511.3457" x2="2.6799" y2="510.349" gradientTransform="matrix(416.552 0 0 -416.5325 -666.0963 212992.0938)">
<stop offset="0" stop-color="#FFFFFF" />
<stop offset="1" stop-color="#FFFFFF" stop-opacity="0.25" />
</linearGradient>
<!-- Drop shadow -->
<filter id="f3" x="-20%" y="-20%" width="150%" height="150%">
<feGaussianBlur in="SourceAlpha" stdDeviation="7" result="out1" />
<feOffset in="out1" dx="-5" dy="5" result="out2" />
<feMerge>
<feMergeNode in="out2" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<!-- Gaussian blur 1 -->
<filter id="f4">
<feGaussianBlur in="SourceGraphic" stdDeviation="0.75" />
</filter>
<!-- Gaussian blur 2 -->
<filter id="f5">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
<!-- Straight drop shadow -->
<filter id="f6" x="-100%" y="-100%" width="400%" height="400%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="out1" />
<feOffset in="out1" dx="-2" dy="2" result="out2" />
<feMerge>
<feMergeNode in="out2" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<!-- Radial gradient -->
<radialGradient id="f7" cx="258.25" cy="253.75" r="3" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFFFFF" stop-opacity="0.8" />
<stop offset="1" stop-color="#000000" />
</radialGradient>
<!-- JavaScript for setting the clockhands on load. -->
<!--
UNCOMMENT THIS TO MAKE USE OF THE JAVASCRIPT!
<script type="text/javascript">
<![CDATA[
/**
* Set the clock to the client's system time, directly after the SVG is loaded.
*
* @param evt e
*/
function s(e) {
// Create new Date() object.
var d = new Date();
// Get current seconds.
var s = d.getSeconds();
// Get current minutes and add the current second.
var m = d.getMinutes() + s / 60;
// Get current hours and add the current minute.
var h = d.getHours() + m / 60;
// Get the current document, so we can alter the DOM.
var svg = e.target.ownerDocument;
// Rotate the second clockhand to the current seconds.
svg.getElementById("Second").setAttribute("transform", "rotate(" + (s * 6) + ", 256, 256)");
svg.getElementById("SecondShadow").setAttribute("transform", "rotate(" + (s * 6) + ", 253, 259)");
// Rotate the minute clockhand to the current minute.
svg.getElementById("Minute").setAttribute("transform", "rotate(" + (m * 6) + ", 256, 256)");
svg.getElementById("MinuteShadow").setAttribute("transform", "rotate(" + (m * 6) + ", 254, 258)");
// Rotate the hour clockhand to the current hour.
svg.getElementById("Hour").setAttribute("transform", "rotate(" + (h * 30) + ", 256, 256)");
svg.getElementById("HourShadow").setAttribute("transform", "rotate(" + (h * 30) + ", 255, 257)");
}
//]]>
</script>
-->
</defs>
<circle fill="#E6F1DD" cx="256" cy="256" r="215.04" />
<path filter="url(#f3)" d="M256,10.24C120.271,10.24,10.24,120.271,10.24,256c0,135.729,110.031,245.76,245.76,245.76
c135.729,0,245.76-110.031,245.76-245.76C501.76,120.271,391.729,10.24,256,10.24z M256,471.04
c-118.763,0-215.04-96.276-215.04-215.04c0-118.763,96.277-215.04,215.04-215.04c118.764,0,215.04,96.277,215.04,215.04
C471.04,374.764,374.764,471.04,256,471.04z" />
<path opacity="0.5" fill="url(#f1)" filter="url(#f4)" d="M256,35.84c120.46,0,218.112,97.652,218.112,218.112
c0,120.459-97.652,218.112-218.112,218.112S37.888,374.411,37.888,253.952C37.888,133.492,135.54,35.84,256,35.84
c-122.722,0-222.208,99.486-222.208,222.208c0,122.724,99.486,222.208,222.208,222.208c122.724,0,222.208-99.484,222.208-222.208
C478.208,135.326,378.724,35.84,256,35.84z" />
<path opa…