Horloge a amour

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.29.0/date_fns.min.js"></script>
    <style type="text/css">
        svg{
        }
        path{
            fill: red;
            stroke: pink;
            stroke-width: 3px;
            stroke-linejoin': round
        }
        text{
            fill: pink;
            font-size: 26px
        }
        text tspan.name{
            font-size: 66px
        }
        text tspan.msg{
            font-size: 36px
        }
        text tspan.year{
            font-size: 64px
        }
    </style>
</head>
<body>
    <script type="text/javascript">

        var w = h = 700;

        var data = d3.range(-179, 180).map(function(d, i){
            var t = d/180*Math.PI;
            var x = w/16*Math.pow(Math.sin(t),3);
            var coeff = h/20;
            var y = coeff*Math.cos(t)-(coeff/3)*Math.cos(2*t)-(coeff/6)*Math.cos(3*t)-Math.cos(4*t);
            return {x: x, y: y};
        });

        var x = d3.scale.linear().range([0, w/100]),
            y = d3.scale.linear().range([h/100, 0]);

        var line = d3.svg.line()
            .x(function(d) { return x(d.x); })
            .y(function(d) { return y(d.y); })(data);

        var svg = d3.select('body')
            .append('svg')
            .attr({width: w, height: h});

        var now = new Date();
        var birth = new Date('June 23 2008');
        var sec = dateFns.differenceInSeconds(now, birth);
        var min = dateFns.differenceInMinutes(now, birth);
        var hour = dateFns.differenceInHours(now, birth);
        var day = dateFns.differenceInDays(now, birth);
        var month = dateFns.differenceInMonths(now, birth);
        var year = dateFns.differenceInYears(now, birth);

        var g = svg.append('g')
            .attr({transform: 'translate('+w/2+','+h/2+') scale(1)'});
        g.append('path')
            .attr({d: line});
        var text = g.append('text').attr({transform: 'translate(-100,-40)'});
        text.append('tspan')
            .attr('class', 'name')
            .text('Ennio');
        text.append('tspan')
            .attr('class', 'msg')
            .attr({x: 0, dy: '30px'})
            .text("Je t'aime depuis");
        text.append('tspan')
            .attr('class', 'year')
            .attr({x: 0, dy: '60px'})
        text.append('tspan')
            .attr('class', 'month')
            .attr({x: 0, dy: '40px'})
        text.append('tspan')
            .attr('class', 'day')
            .attr({x: 0, dy: '25px'})
        text.append('tspan')
            .attr('class', 'hour')
            .attr({x: 0, dy: '25px'})
        text.append('tspan')
            .attr('class', 'min')
            .attr({x: 0, dy: '25px'})
        text.append('tspan')
            .attr('class', 'sec')
            .attr({x: 0, dy: '25px'})
        updateTime();

        setInterval(function(){
            g.transition()
                .ease('bounce')
                .attr({transform: 'translate('+w/2+','+h/2+') scale(1)'})
            .transition()
                .duration(100)
                .attr({transform: 'translate('+w/2+','+h/2+') scale(0.8)'});

            updateTime();

        },1000);

        var now, birth, sec, min, hour, day;
        function updateTime(d, i){
            now = new Date();
            birth = new Date('June 23 2008');
            sec = (Date.parse(now) - Date.parse(birth))/1000
            min = ~~(sec/60);
            hour = ~~(min/60);
            day = ~~(hour/24);

            text.select('.year').text(year  + ' ans!!!');
            text.select('.month').text(month  + ' mois');
            text.select('.day').text(day  + ' jours');
            text.select('.hour').text(hour + ' heures');
            text.select('.min').text(min + ' minutes');
            text.select('.sec').text(sec + ' secondes');
        }

    </script>

</body>
</html>