ðŸ§
klik untuk menyalin
👇
<svg width="200" height="200" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="90" fill="white" stroke="#333" stroke-width="4"/>
<text x="95" y="30" font-size="14">12</text>
<text x="170" y="105" font-size="14">3</text>
<text x="98" y="185" font-size="14">6</text>
<text x="25" y="105" font-size="14">9</text>
<circle cx="100" cy="100" r="5" fill="#333"/>
<!-- JAM -->
<line id="jam" x1="100" y1="100" x2="100" y2="60" stroke="#333" stroke-width="4"/>
<!-- MENIT -->
<line id="menit" x1="100" y1="100" x2="100" y2="45" stroke="#555" stroke-width="3"/>
<!-- DETIK -->
<line id="detik" x1="100" y1="105" x2="100" y2="35" stroke="red" stroke-width="2"/>
</svg>
<style>
#jam, #menit, #detik {
transform-origin: 100px 100px;
transform-box: fill-box;
}
#jam {
animation: rotasi 43200s linear infinite;
}
#menit {
animation: rotasi 3600s linear infinite;
}
#detik {
animation: rotasi 60s linear infinite;
}
@keyframes rotasi {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
Komentar untuk Script tampilan Gambar Jam SVG
Posting Komentar