SVG Clock - PAKWAP.COM https://pakwap.com/ RSS - PAKWAP.COM https://pakwap.com/assets/img/images/logo.png RSS - PAKWAP.COM https://pakwap.com/ admin@pakwap.com (admin) admin@pakwap.com (admin) Sat, 28 Feb 2026 14:47:03 +0500 A beautiful website clock created using SVG and JavaScript. The finished demo is shown using Bootstrap.<br> * You can change the color of the watch components as you wish and download the ready-made code.<br> <br> <pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; href=&quot;https&#58;//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css&quot; /&gt; &lt;style&gt; body{ background&#58; #159957; /* fallback for old browsers */ background&#58; -webkit-linear-gradient(to right, #155799, #159957); /* Chrome 10-25, Safari 5.1-6 */ background&#58; linear-gradient(to right, #155799, #159957); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } &lt;/style&gt; &lt;div class=&quot;container&quot;&gt;&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;col-xs-12 text-center&quot;&gt; &lt;div class=&quot;filler&quot;&gt;&lt;/div&gt; &lt;svg width=&quot;200&quot; height=&quot;200&quot;&gt; &lt;filter id=&quot;innerShadow&quot; x=&quot;-20%&quot; y=&quot;-20%&quot; width=&quot;140%&quot; height=&quot;140%&quot;&gt; &lt;feGaussianBlur in=&quot;SourceGraphic&quot; stdDeviation=&quot;3&quot; result=&quot;blur&quot;/&gt; &lt;feOffset in=&quot;blur&quot; dx=&quot;2.5&quot; dy=&quot;2.5&quot;/&gt; &lt;/filter&gt; &lt;g&gt; &lt;circle id=&quot;shadow&quot; style=&quot;fill&#58;rgba(0,0,0,0.1)&quot; cx=&quot;97&quot; cy=&quot;100&quot; r=&quot;87&quot; filter=&quot;url(#innerShadow)&quot;&gt;&lt;/circle&gt; &lt;circle id=&quot;circle&quot; style=&quot;stroke&#58; <a href="https://pakwap.com/search?query=FFF">#FFF</a>; stroke-width&#58; 12px; fill&#58;#20B7AF&quot; cx=&quot;100&quot; cy=&quot;100&quot; r=&quot;80&quot;&gt;&lt;/circle&gt; &lt;/g&gt; &lt;g&gt; &lt;line x1=&quot;100&quot; y1=&quot;100&quot; x2=&quot;100&quot; y2=&quot;55&quot; transform=&quot;rotate(80 100 100)&quot; style=&quot;stroke-width&#58; 3px; stroke&#58; <a href="https://pakwap.com/search?query=fffbf9">#fffbf9</a>;&quot; id=&quot;hourhand&quot;&gt; &lt;animatetransform attributeName=&quot;transform&quot; attributeType=&quot;XML&quot; type=&quot;rotate&quot; dur=&quot;43200s&quot; repeatCount=&quot;indefinite&quot;/&gt; &lt;/line&gt; &lt;line x1=&quot;100&quot; y1=&quot;100&quot; x2=&quot;100&quot; y2=&quot;40&quot; style=&quot;stroke-width&#58; 4px; stroke&#58; <a href="https://pakwap.com/search?query=fdfdfd">#fdfdfd</a>;&quot; id=&quot;minutehand&quot;&gt; &lt;animatetransform attributeName=&quot;transform&quot; attributeType=&quot;XML&quot; type=&quot;rotate&quot; dur=&quot;3600s&quot; repeatCount=&quot;indefinite&quot;/&gt; &lt;/line&gt; &lt;line x1=&quot;100&quot; y1=&quot;100&quot; x2=&quot;100&quot; y2=&quot;30&quot; style=&quot;stroke-width&#58; 2px; stroke&#58; <a href="https://pakwap.com/search?query=C1EFED">#C1EFED</a>;&quot; id=&quot;secondhand&quot;&gt; &lt;animatetransform attributeName=&quot;transform&quot; attributeType=&quot;XML&quot; type=&quot;rotate&quot; dur=&quot;60s&quot; repeatCount=&quot;indefinite&quot;/&gt; &lt;/line&gt; &lt;/g&gt; &lt;circle id=&quot;center&quot; style=&quot;fill&#58;#128A86; stroke&#58; <a href="https://pakwap.com/search?query=C1EFED">#C1EFED</a>; stroke-width&#58; 2px;&quot; cx=&quot;100&quot; cy=&quot;100&quot; r=&quot;3&quot;&gt;&lt;/circle&gt; &lt;/svg&gt; &lt;/div&gt; &lt;/div&gt;&lt;/div&gt; &lt;script&gt; var hands = &#91;]; hands.push(document.querySelector(&#039;#secondhand &gt; *&#039;)); hands.push(document.querySelector(&#039;#minutehand &gt; *&#039;)); hands.push(document.querySelector(&#039;#hourhand &gt; *&#039;)); var cx = 100; var cy = 100; function shifter(val) { return &#91;val, cx, cy].join(&#039; &#039;); } var date = new Date(); var hoursAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2; var minuteAngle = 360 * date.getMinutes() / 60; var secAngle = 360 * date.getSeconds() / 60; hands&#91;0].setAttribute(&#039;from&#039;, shifter(secAngle)); hands&#91;0].setAttribute(&#039;to&#039;, shifter(secAngle + 360)); hands&#91;1].setAttribute(&#039;from&#039;, shifter(minuteAngle)); hands&#91;1].setAttribute(&#039;to&#039;, shifter(minuteAngle + 360)); hands&#91;2].setAttribute(&#039;from&#039;, shifter(hoursAngle)); hands&#91;2].setAttribute(&#039;to&#039;, shifter(hoursAngle + 360)); for (var i = 1; i &lt;= 12; i++) { var el = document.createElementNS(&#039;http&#58;//www.w3.org/2000/svg&#039;, &#039;line&#039;); el.setAttribute(&#039;x1&#039;, &#039;100&#039;); el.setAttribute(&#039;y1&#039;, &#039;30&#039;); el.setAttribute(&#039;x2&#039;, &#039;100&#039;); el.setAttribute(&#039;y2&#039;, &#039;40&#039;); el.setAttribute(&#039;transform&#039;, &#039;rotate(&#039; + (i * 360 / 12) + &#039; 100 100)&#039;); el.setAttribute(&#039;style&#039;, &#039;stroke&#58; <a href="https://pakwap.com/search?query=ffffff">#ffffff</a>;&#039;); document.querySelector(&#039;svg&#039;).appendChild(el); } &lt;/script&gt;</pre> https://pakwap.com/topics/484?pid=720 SVG Clock REHAN Thu, 26 Feb 2026 18:33:59 +0500 Messages https://pakwap.com/topics/484?pid=720