<div style="text-align: center; display: inline-block">
  <canvas id="clock-1" height="240"></canvas>
  <p>Modern Dark Preset</p>
</div>

<div style="text-align: center; display: inline-block">
  <canvas id="clock-2" height="240"></canvas>
  <p>Custom Configuration</p>
</div>
$("#clock-1").htAnalogClock(htAnalogClock.preset_modern_dark);

$("#clock-2").htAnalogClock({
  hasShadow: true,          // enable/disable shadow
  shadowColor: "#000",      // shadow color
  shadowBlur: 10,           // shadow blur size ( unit is pixel )

  drawSecondHand: true,     // draw second hand or not draw
  drawMajorTicks: true,     // draw major ticks or not draw
  drawMinorTicks: true,     // draw minor ticks or not draw
  drawBorder: true,         // draw border or not draw
  drawFill: true,           // draw fill or not draw ( transparent )
  drawTexts: true,          // draw hour text or not draw
  drawPin: true,            // draw pin or not draw

  majorTicksColor: "#f88",  // major ticks color
  minorTicksColor: "#fa0",  // minor ticks color

  majorTicksLength: 10.0,   // major ticks length ( percent )
  minorTicksLength: 7.0,    // minor ticks length ( percent )
  majorTicksWidth: 0.005,   // major ticks thickness ( percent )
  minorTicksWidth: 0.0025,  // minor ticks thickness ( percent )

  fillColor: "#444",        // fill color
  pinColor: "#f88",         // pin color
  pinRadius: 5.0,           // pin radius ( percent )

  borderColor: "#888",      // border color
  borderWidth: 2.0,         // border width ( percent )

  secondHandColor: "#f00",  // second hand color
  minuteHandColor: "#fff",  // minute hand color
  hourHandColor: "#fff",    // hour hand color

  fontColor: "#fff",        // font color
  fontName: "Tahoma",       // font name
  fontSize: 10.0,           // font size ( percent )

  secondHandLength: 90.0,   // second hand length ( percent )
  minuteHandLength: 70.0,   // minute hand length ( percent )
  hourHandLength: 50.0,     // hour hand length ( percent )

  secondHandWidth: 1.0,     // second hand width ( percent )
  minuteHandWidth: 2.0,     // minute hand width ( percent )
  hourHandWidth: 3.0        // hour hand width ( percent )
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://github.com/dexise/jQuery-Analog-Clock/blob/master/jquery.ht-analog-clock.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  3. https://static.xise.io/asset/js/cdn/jquery-analog-clock-v1.0.min.js