Clock - With and Without Animation

Clock with and without animation

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Clock using only Animation</title>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>
    <div class="container">
        <center><h3>With Animation</h3></center>
        <div id="clock_animation">

</div>
    </div>

<div class="container">
        <center><h3>Without Animation</h3></center>
        <div id="clock_no_animation">

</div>
    </div>
</body>

var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();

var config_animation = {
        animation: true,
        margin : {top: 0, right: 50, bottom: 0, left: 50},
        radius : 100,
        height: 300,
        width: 300,
        clock_stroke_color : "black",
        clock_stroke_width : 2,
        clock_fill_color : "#efefef",
        x : 150,
        y : 150,
        mh_x : 150,
        mh_y : 75,
        sh_x : 150,
        sh_y : 75,
        hh_x : 150,
        hh_y : 90,
        hh_interval : 1000*60*60*12,
        mh_interval : 1000*60*60,
        sh_interval : 1000*60,
        sh_start_angle : s*6,
        mh_start_angle : m*6,
        hh_start_angle : (h*60 + m)/2,
        sh_stroke_color : "black",
        sh_stroke_width : 1,
        mh_stroke_color : "black",
        mh_stroke_width : 2,
        hh_stroke_color : "black",
        hh_stroke_width : 2,
        dom_element : "#clock_animation"
    };

var config_no_animation = {
        animation: false,
        margin : {top: 0, right: 50, bottom: 0, left: 50},
        radius : 100,
        height: 300,
        width: 300,
        clock_stroke_color : "black",
        clock_stroke_width : 2,
        clock_fill_color : "#efefef",
        x : 150,
        y : 150,
        mh_x : 150,
        mh_y : 75,
        sh_x : 150,
        sh_y : 75,
        hh_x : 150,
        hh_y : 90,
        hh_interval : 1000*60*60*12,
        mh_interval : 1000*60*60,
        sh_interval : 1000*60,
        sh_start_angle : s*6,
        mh_start_angle : m*6,
        hh_start_angle : (h*60 + m)/2,
        sh_stroke_color : "black",
        sh_stroke_width : 1,
        mh_stroke_color : "black",
        mh_stroke_width : 2,
        hh_stroke_color : "black",
        hh_stroke_width : 2,
        dom_element : "#clock_no_animation"
    };

drawClock(config_animation);
    drawClock(config_no_animation);

</script>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://code.jquery.com/jquery-3.1.1.min.js

https://d3js.org/d3.v3.min.js