<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="-510 -510 1020 1020" version="1.1">
<script type="application/x-javascript">
<![CDATA[
var RingClock = new function()
{
window.addEventListener("load",init);
var frame = 0;
function init()
{
setClock();
}
function setClock()
{
var dt = new Date();
var hours = dt.getHours() % 12;
var min = dt.getMinutes();
var sec = dt.getSeconds();
node = document.getElementById("hhand");
var deg = 30*(hours + min/60);
node.setAttribute("transform","rotate("+deg+")");
node = document.getElementById("mhand");
deg = 6*(min + sec/60);
node.setAttribute("transform","rotate("+deg+")");
node = document.getElementById("shand");
deg = 6*sec;
node.setAttribute("transform","rotate("+deg+")");
// setTimeout(setClock,1000);
}
}();
]]>
</script>
<style type="text/css">
<![CDATA[
#hhand {fill:cyan;stroke:purple;}
#mhand {fill:lime;stroke:purple;}
#shand {fill:magenta;stroke:purple;}
.tics {stroke:purple;stroke-width:2px;}
.dots {fill:purple;stroke:none;}
text {fill:cyan;stroke:purple;stroke-width:0.75px;}
]]>
</style>
<defs>
<path id="z" opacity="0.3"
d="M-7.602,-125.7703 A126,126 0 1 1 -7.602 125.773 C134.17,148.46 369.32,68 504,0 C369.32,-68 134.17,-148.46 -7.602,-125.7703" />
<mask id="maske">
<rect x="-535" y="-535" width="1070" height="1070" fill="#fff" />
<use xlink:href="#z" fill="#000" />
</mask>
<radialGradient id="r" >
<stop offset="0" stop-opacity="0" />
<stop offset=".90" stop-opacity="0" />
<stop offset="0.90" stop-color="#e3e3e3" stop-opacity="1" />
<stop offset="0.914285" stop-color="#b8b8b8" />
<stop offset="0.928571" stop-color="#e3e3e3" />
<stop offset="0.942857" stop-color="#b8b8b8" />
<stop offset="0.957142" stop-color="#8f8f8f" />
<stop offset="0.971428" stop-color="#e3e3e3" />
<stop offset=".985714" stop-color="#8f8f8f" />
</radialGradient>
<line id="li" y1="98" y2="116" stroke="#999" stroke-width="5" />
<line id="t" y1="103" y2="116" stroke="#aaa" stroke-width="3" />
<g id="m">
<use xlink:href="#li" />
<use xlink:href="#t" transform="rotate(6)" />
<use xlink:href="#t" transform="rotate(12)" />
<use xlink:href="#t" transform="rotate(18)" />
<use xlink:href="#t" transform="rotate(24)" />
</g>
<g id="n">
<use xlink:href="#m" />
<use xlink:href="#m" transform="rotate(30)" />
<use xlink:href="#m" transform="rotate(60)" />
</g>
<radialGradient id="rg1">
<stop offset="0%" stop-color="magenta" />
<stop offset="100%" stop-color="purple" />
</radialGradient>
<radialGradient id="rx" >
<stop offset="0" stop-opacity="0" />
<stop offset=".86" stop-opacity="0" />
<stop offset="0.86" stop-color="#f00" stop-opacity="1" />
<stop offset="0.88" stop-color="#f80" />
<stop offset="0.90" stop-color="#ff0" />
<stop offset="0.92" stop-color="#0f0" />
<stop offset="0.94" stop-color="#0ff" />
<stop offset="0.96" stop-color="#00f" />
<stop offset=".98" stop-color="#f0f" />
</radialGradient>
<filter id="f1" filterUnits="objectBoundingBox"
x="-0.25" y="-0.25" width="1.5" height="1.5">
<feGaussianBlur in="SourceGraphic"
stdDeviation="10"/>
</filter>
<filter id="f2" filterUnits="objectBoundingBox"
>
<feGaussianBlur in="SourceAlpha"
stdDeviation="5"/>
</filter>
</defs>
<rect width="200%" height="200%" x="-100%" y="-100%" fill="#000" opacity="1" />
<circle r="480" fill="#fff" opacity="1" />
<g display="inline">
<g id="w" stroke="#fff" stroke-width="3" opacity="0.8" >
<use xlink:href="#z" transform="rotate(0)" fill="#f00" />
<use xlink:href="#z" transform="rotate(10)" fill="#f60" />
<use xlink:href="#z" transform="rotate(20)" fill="#fb0" />
<use xlink:href="#z" transform="rotate(30)" fill="#ff0" />
<use xlink:href="#z" transform="rotate(40)" fill="#bf0" />
<use xlink:href="#z" transform="rotate(50)" fill="#6f0" />
<use xlink:href="#z" transform="rotate(60)" fill="#0f0" />
<use xlink:href="#z" transform="rotate(70)" fill="#0f6" />
<use xlink:href="#z" transform="rotate(80)" fill="#0fb" />
<use xlink:href="#z" transform="rotate(90)" fill="#0ff" />
<use xlink:href="#z" transform="rotate(100)" fill="#0bf" />
<use xlink:href="#z" transform="rotate(110)" fill="#06f" />
<use xlink:href="#z" transform="rotate(120)" fill="#00f" />
<use xlink:href="#z" transform="rotate(130)" fill="#60f" />
<use xlink:href="#z" transform="rotate(140)" fill="#b0f" />
<use xlink:href="#z" transform="rotate(150)" fill="#f0f" />
<use xlink:href="#z" transform="rotate(160)" fill="#f0b" />
<use xlink:href="#z" transform="rotate(170)" fill="#f06" />
</g>
<g mask="url(#maske)">
<use xlink:href="#w" transform="rotate(180)" />
</g>
<g transform="scale(3.6)">
<use xlink:href="#n" />
<use xlink:href="#n" transform="rotate(90)" />
<use xlink:href="#n" transform="rotate(180)" />
<use xlink:href="#n" transform="rotate(270)" />
</g>
<circle r="126" fill="#fff" opacity="1" />
<circle r="126" style="fill: url(#rg1); stroke: #ccc; stroke-width: 4px; opacity: 1" />
<g id="hhand" >
<animateTransform attributeName="transform"
type="rotate" values="0; 360"
repeatDur="indefinite"
additive="sum" fill="freeze" />
<path d="M15,0 0,-340 -15,0 0,120 z" stroke-width="0.5" />
</g>
<g id="mhand" >
<animateTransform attributeName="transform"
type="rotate" values="0; 360"
repeatDur="indefinite" dur="3600s"
additive="sum" fill="freeze" />
<path d="M15,0 0,-400 -15,0 0,120 z" stroke-width="0.5" />
</g>
<g id="shand" >
<animateTransform attributeName="transform"
type="rotate" values="0; 360"
repeatDur="indefinite" dur="60s"
additive="sum" fill="freeze" />
<path d="M15,0 0,-420 -15,0 0,120 z" stroke-width="0.5" />
</g>
<circle r="8" fill="url(#rg1)" stroke="purple" stroke-width="0.5" />
<circle r="510" fill="none" stroke="#fff" opacity="0" stroke-width="30" />
<circle filter="url(#f1)" r="510" fill="url(#rx)" stroke="none" opacity="1" />
</g>
</svg>
Animated watch black background
Zur Navigation springen
Zur Suche springen
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="-510 -510 1020 1020" version="1.1">
<script type="application/x-javascript">
<![CDATA[
var RingClock = new function()
{
window.addEventListener("load",init);
var frame = 0;
function init()
{
setClock();
}
function setClock()
{
var dt = new Date();
var hours = dt.getHours() % 12;
var min = dt.getMinutes();
var sec = dt.getSeconds();
node = document.getElementById("hhand");
var deg = 30*(hours + min/60);
node.setAttribute("transform","rotate("+deg+")");
node = document.getElementById("mhand");
deg = 6*(min + sec/60);
node.setAttribute("transform","rotate("+deg+")");
node = document.getElementById("shand");
deg = 6*sec;
node.setAttribute("transform","rotate("+deg+")");
// setTimeout(setClock,1000);
}
}();
]]>
</script>
<style type="text/css">
<![CDATA[
#hhand {fill:cyan;stroke:purple;}
#mhand {fill:lime;stroke:purple;}
#shand {fill:magenta;stroke:purple;}
.tics {stroke:purple;stroke-width:2px;}
.dots {fill:purple;stroke:none;}
text {fill:cyan;stroke:purple;stroke-width:0.75px;}
]]>
</style>
<defs>
<path id="z" opacity="0.3"
d="M-7.602,-125.7703 A126,126 0 1 1 -7.602 125.773 C134.17,148.46 369.32,68 504,0 C369.32,-68 134.17,-148.46 -7.602,-125.7703" />
<mask id="maske">
<rect x="-535" y="-535" width="1070" height="1070" fill="#fff" />
<use xlink:href="#z" fill="#000" />
</mask>
<radialGradient id="r" >
<stop offset="0" stop-opacity="0" />
<stop offset=".90" stop-opacity="0" />
<stop offset="0.90" stop-color="#e3e3e3" stop-opacity="1" />
<stop offset="0.914285" stop-color="#b8b8b8" />
<stop offset="0.928571" stop-color="#e3e3e3" />
<stop offset="0.942857" stop-color="#b8b8b8" />
<stop offset="0.957142" stop-color="#8f8f8f" />
<stop offset="0.971428" stop-color="#e3e3e3" />
<stop offset=".985714" stop-color="#8f8f8f" />
</radialGradient>
<line id="li" y1="98" y2="116" stroke="#999" stroke-width="5" />
<line id="t" y1="103" y2="116" stroke="#aaa" stroke-width="3" />
<g id="m">
<use xlink:href="#li" />
<use xlink:href="#t" transform="rotate(6)" />
<use xlink:href="#t" transform="rotate(12)" />
<use xlink:href="#t" transform="rotate(18)" />
<use xlink:href="#t" transform="rotate(24)" />
</g>
<g id="n">
<use xlink:href="#m" />
<use xlink:href="#m" transform="rotate(30)" />
<use xlink:href="#m" transform="rotate(60)" />
</g>
<radialGradient id="rg1">
<stop offset="0%" stop-color="magenta" />
<stop offset="100%" stop-color="purple" />
</radialGradient>
<radialGradient id="rx" >
<stop offset="0" stop-opacity="0" />
<stop offset=".86" stop-opacity="0" />
<stop offset="0.86" stop-color="#f00" stop-opacity="1" />
<stop offset="0.88" stop-color="#f80" />
<stop offset="0.90" stop-color="#ff0" />
<stop offset="0.92" stop-color="#0f0" />
<stop offset="0.94" stop-color="#0ff" />
<stop offset="0.96" stop-color="#00f" />
<stop offset=".98" stop-color="#f0f" />
</radialGradient>
<filter id="f1" filterUnits="objectBoundingBox"
x="-0.25" y="-0.25" width="1.5" height="1.5">
<feGaussianBlur in="SourceGraphic"
stdDeviation="10"/>
</filter>
<filter id="f2" filterUnits="objectBoundingBox"
>
<feGaussianBlur in="SourceAlpha"
stdDeviation="5"/>
</filter>
</defs>
<rect width="200%" height="200%" x="-100%" y="-100%" fill="#000" opacity="1" />
<circle r="480" fill="#fff" opacity="1" />
<g display="inline">
<g id="w" stroke="#fff" stroke-width="3" opacity="0.8" >
<use xlink:href="#z" transform="rotate(0)" fill="#f00" />
<use xlink:href="#z" transform="rotate(10)" fill="#f60" />
<use xlink:href="#z" transform="rotate(20)" fill="#fb0" />
<use xlink:href="#z" transform="rotate(30)" fill="#ff0" />
<use xlink:href="#z" transform="rotate(40)" fill="#bf0" />
<use xlink:href="#z" transform="rotate(50)" fill="#6f0" />
<use xlink:href="#z" transform="rotate(60)" fill="#0f0" />
<use xlink:href="#z" transform="rotate(70)" fill="#0f6" />
<use xlink:href="#z" transform="rotate(80)" fill="#0fb" />
<use xlink:href="#z" transform="rotate(90)" fill="#0ff" />
<use xlink:href="#z" transform="rotate(100)" fill="#0bf" />
<use xlink:href="#z" transform="rotate(110)" fill="#06f" />
<use xlink:href="#z" transform="rotate(120)" fill="#00f" />
<use xlink:href="#z" transform="rotate(130)" fill="#60f" />
<use xlink:href="#z" transform="rotate(140)" fill="#b0f" />
<use xlink:href="#z" transform="rotate(150)" fill="#f0f" />
<use xlink:href="#z" transform="rotate(160)" fill="#f0b" />
<use xlink:href="#z" transform="rotate(170)" fill="#f06" />
</g>
<g mask="url(#maske)">
<use xlink:href="#w" transform="rotate(180)" />
</g>
<g transform="scale(3.6)">
<use xlink:href="#n" />
<use xlink:href="#n" transform="rotate(90)" />
<use xlink:href="#n" transform="rotate(180)" />
<use xlink:href="#n" transform="rotate(270)" />
</g>
<circle r="126" fill="#fff" opacity="1" />
<circle r="126" style="fill: url(#rg1); stroke: #ccc; stroke-width: 4px; opacity: 1" />
<g id="hhand" >
<animateTransform attributeName="transform"
type="rotate" values="0; 360"
repeatDur="indefinite"
additive="sum" fill="freeze" />
<path d="M15,0 0,-340 -15,0 0,120 z" stroke-width="0.5" />
</g>
<g id="mhand" >
<animateTransform attributeName="transform"
type="rotate" values="0; 360"
repeatDur="indefinite" dur="3600s"
additive="sum" fill="freeze" />
<path d="M15,0 0,-400 -15,0 0,120 z" stroke-width="0.5" />
</g>
<g id="shand" >
<animateTransform attributeName="transform"
type="rotate" values="0; 360"
repeatDur="indefinite" dur="60s"
additive="sum" fill="freeze" />
<path d="M15,0 0,-420 -15,0 0,120 z" stroke-width="0.5" />
</g>
<circle r="8" fill="url(#rg1)" stroke="purple" stroke-width="0.5" />
<circle r="510" fill="none" stroke="#fff" opacity="0" stroke-width="30" />
<circle filter="url(#f1)" r="510" fill="url(#rx)" stroke="none" opacity="1" />
</g>
</svg>