Slim SVG Clock In Vanilla JavaScript – pkclock.js

Preview:

Description:

pkclock.js is a JavaScript library for generating a slim animated SVG analog or text clock to display the current local time.

How to use it:

Import the necessary JavaScript and CSS files into the document.

<link rel="stylesheet" href="style.css">
<script src="lib/pkclock.js"></script>

Generate an analog clock on the page.

<div class="demo"></div>

var pkClock = {
    id: 1,
    className: 'demo',
    
    // Clock display
    displayHouresMinutes: false,
    displayHouresMinutesSeconds: true,

    // Graphical settings
    size: 200
};

Generate a text clock on the page.

var pkTxtClock = {
    id: 2,
    className: 'demo',
    //Text time
    TextTime: true,
    region: 'Athens',
    displayTextTime: "hh-mm-ss-date-region" 
};