<head>
<meta name="viewport" content="height=device-height, width=500, initial-scale=1, maximum-scale=1.5, user-scalable=yes" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>element Countdown</title>
</head>
<body>
<svg>
<g id="logo" style="fill: #737373; fill-opacity: 0;">
<path
id="letter-1"
d="m 175.71544,679.66697 c 0,19.15198 15.12002,38.592 36,38.592 11.23199,0 25.05601,-6.19201 29.664,-17.856 l -3.08445,-0.003 c -4.46399,9.79199 -15.63556,14.97919 -26.57955,14.97919 -18.28798,0 -31.824,-16.12802 -33.12,-34.272 l 68.4,0 0,-1.584 c -0.288,-20.44798 -14.68802,-38.592 -36.576,-38.592 -20.87998,0 -34.128,18.72002 -34.704,38.736 m 2.88,-1.44 c 0.864,-16.41598 12.09602,-34.416 31.824,-34.416 19.15198,0 32.256,14.97602 33.552,34.416 l -65.376,0"/>
<path
id="letter-2"
d="m 262.46669,705.73097 c 0,6.33599 4.17601,11.808 11.376,11.808 5.04,0 6.45588,-0.005 6.45588,-0.005 l -0.003,-2.73438 c -0.144,0 -2.42113,0.003 -6.30913,0.003 -5.61599,0 -8.64,-4.896 -8.64,-9.072 l 0,-89.71959 -2.88,0 0,89.71959"/>
<path
id="letter-3"
d="m 288.7267,679.66697 c 0,19.15198 15.12002,38.592 36,38.592 11.23199,0 25.05601,-6.19201 29.664,-17.856 l -3.08445,-0.003 c -4.46399,9.79199 -15.63556,14.97919 -26.57955,14.97919 -18.28798,0 -31.824,-16.12802 -33.12,-34.272 l 68.4,0 0,-1.584 c -0.288,-20.44798 -14.68802,-38.592 -36.576,-38.592 -20.87998,0 -34.128,18.72002 -34.704,38.736 m 2.88,-1.44 c 0.864,-16.41598 12.09602,-34.416 31.824,-34.416 19.15198,0 32.256,14.97602 33.552,34.416 l -65.376,0" />
<path
id="letter-4"
d="m 480.00483,661.91807 c -2.1411,-10.79723 -12.84475,-20.9871 -26.47689,-20.9871 -14.17998,0 -24.434,10.32201 -25.414,21.744 -1.15199,-11.51999 -13.39001,-21.744 -27.358,-21.744 -12.23998,0 -21.91337,9.35801 -24.838,20.823 -1.42922,5.60275 -1.88,7.4632 -1.88,55.065 0,0 1.4395,0 2.88,0 0,-41.8953 0.0916,-45.01547 0.875,-50.732 1.83582,-12.08685 10.39881,-22.39971 22.963,-22.276 13.41599,0 26.304,8.64935 25.554,31.642 0,6.12323 0.1876,16.67926 0.1876,24.49811 0,8.76149 -0.1876,16.86789 -0.1876,16.86789 l 2.88,0 c 0,0 0.31042,-27.79495 0,-41.338 -0.5,-21.81385 11.27824,-31.64455 24.338,-31.67 13.60667,0.20485 24.06342,10.48085 24.87722,24.74555 0.41243,7.22924 0.17678,35.99384 0.17678,48.26245 1.41983,0 1.44422,0 2.88,0 0,-47.72177 -0.45288,-49.83673 -1.45711,-54.9009 z"/>
<path
id="letter-5"
d="m 496.23793,679.66688 c 0,19.15198 15.12002,38.592 36,38.592 11.23199,0 25.05601,-6.19201 29.664,-17.856 l -3.08445,-0.003 c -4.46399,9.79199 -15.63556,14.97919 -26.57955,14.97919 -18.28798,0 -31.824,-16.12802 -33.12,-34.272 l 68.4,0 0,-1.584 c -0.288,-20.44798 -14.68802,-38.592 -36.576,-38.592 -20.87998,0 -34.128,18.72002 -34.704,38.736 m 2.88,-1.44 c 0.864,-16.41598 12.09602,-34.416 31.824,-34.416 19.15198,0 32.256,14.97602 33.552,34.416 l -65.376,0" />
<path
id="letter-6"
d="m 610.66196,640.91272 c -21.02397,0 -28.96875,19.16126 -28.96875,34.28125 l 0,41.625 2.875,0 0,-41.625 c 0,-15.69598 8.52577,-31.40625 26.09375,-31.40625 17.56798,0 26.09375,15.71027 26.09375,31.40625 l 0,41.625 2.875,0 0,-41.625 c 0,-15.11999 -7.94478,-34.28125 -28.96875,-34.28125 z"/>
<path
id="letter-7"
d="m 682.82268,714.6745 c -1.45919,0 -2.35199,-0.0155 -8.97598,-0.0155 -5.04,0 -9.648,-3.02401 -10.08,-8.64 l 0,-61.056 20.82843,0 0,-2.88 -20.82843,0 0,-26.064 -2.88,0 0,26.064 c 0,1.33043 0,1.40828 0,2.88 l 0,61.056 c 0,6.91199 6.048,11.52 12.96,11.52 7.91999,0 8.82759,0.13909 8.97159,-0.005"/>
</g>
</svg>
</body>@import url(https://fonts.googleapis.com/css?family=Raleway:400,900,800,700,600,500,300,200,100);
body{width:1000px;height:800px;
overflow:hidden;}
svg{width:100%;height:100%;}
.clocklabel{font-family:Raleway;font-size:30px;text-anchor:middle;font-weight:200;opacity:0;fill:#736473;}
.clocktime{font-family:Raleway;font-size:40px;text-anchor:middle;font-weight:200;opacity:0;}var countdownDate=Date.UTC(2013,7,11,0,0,0);
var fields=[{name:"Days",value:0,size:17},{name:"Hours",value:0,size:24},{name:"Minutes",value:0,size:60},{name:"Seconds",value:0,size:60}];
var svg=d3.select("svg").append("svg:g");
var logo=d3.select("#logo");
var arc=d3.svg.arc().innerRadius(70).outerRadius(76).startAngle(2*Math.PI).endAngle(function(d){return((d.size- d.value)/d.size)*2*Math.PI;});
var init=false;var size={};
var layout="";runLoop();setTimeout(function(){setInterval(runLoop,1000);},2000);
function runLoop(){size={width:window.innerWidth||document.body.clientWidth,height:window.innerHeight||document.body.clientHeight};console.log(size);if(size.width>=900){layout="desktop"; var clock_x=((size.width/2)- 430+ 71);
var clock_y=((size.height/2)- 80+ 68);var logo_x=((size.width/2)- 177- 96);
var logo_y=((clock_y/2)- 67- 316);logo.attr("transform","translate("+ logo_x+","+ logo_y+") scale(0.5)");
svg.attr("transform","translate("+ clock_x+","+ clock_y+")");}else{layout="mobile";
var logo_x=((size.width/2)- 106- 61); var logo_y=(50- 193);var clock_x=((size.width/2)- 163+ 58);
var clock_y=200;logo.attr("transform","translate("+ logo_x+","+ logo_y+") scale(0.3)");
svg.attr("transform","translate("+ clock_x+","+ clock_y+") scale(0.8)");}
if(!init){logo.transition().duration(2000).style("fill-opacity",1);init=true;}
var diff=get_time_difference();fields[0].previous=fields[0].value;fields[0].value=diff.days;fields[1].previous=fields[1].value;fields[1].value=diff.hours;fields[2].previous=fields[2].value;fields[2].value=diff.minutes;fields[3].previous=fields[3].value;fields[3].value=diff.seconds;var path=svg.selectAll("path").data(fields,function(d){return d.name;});
path.attr("transform",translatePath).transition().ease("bounce").duration(750).attrTween("d",arcTween);
path.enter().append("svg:path").attr("transform",translatePath).style("fill","#3D9BDA").style("opacity",0).attr("d",function(d){if(d.name==="Seconds"){d.value=d.value- 3;}
return arc(d);}).transition().duration(3000).style("opacity",1); var text=svg.selectAll("text.clocklabel").data(fields,function(d){return d.name;});
text.attr("transform",translateText).text(clock_name);text.enter().append("svg:text").attr("class","clocklabel").attr("transform",translateText).text(clock_name).transition().duration(3000).style("opacity",1);
var label=svg.selectAll("text.clocktime").data(fields,function(d){return d.name;});
label.attr("transform",translateTime).text(countdown_label);label.enter().append("svg:text").attr("class","clocktime").attr("transform",translateTime).text(countdown_label).transition().duration(3000).style("opacity",1);}
function translatePath(d,i){if(layout==="desktop"){return"translate("+((240*i))+",0)";}else{if(i<2){return"translate("+((240*i))+",0)";}else{return"translate("+((240*(i-2)))+",280)";}}}
function translateText(d,i){if(layout==="desktop"){return"translate("+((240*i))+",150)";}else{if(i<2){return"translate("+((240*i))+",130)";}else{return"translate("+((240*(i-2)))+",410)";}}}
function translateTime(d,i){if(layout==="desktop"){return"translate("+((240*i))+",8)";}else{if(i<2){return"translate("+((240*i))+",8)";}else{return"translate("+((240*(i-2)))+",288)";}}}
function arcTween(b){var interpol=d3.interpolate({value:b.previous},b);return function(t){return arc(interpol(t));};}
function get_time_difference()
{var nTotalDiff=countdownDate- new Date().getTime();var oDiff={};oDiff.days=Math.floor(nTotalDiff/1000/60/60/24);nTotalDiff-=oDiff.days*1000*60*60*24;oDiff.hours=Math.floor(nTotalDiff/1000/60/60);nTotalDiff-=oDiff.hours*1000*60*60;oDiff.minutes=Math.floor(nTotalDiff/1000/60);nTotalDiff-=oDiff.minutes*1000*60;oDiff.seconds=Math.floor(nTotalDiff/1000);if(oDiff.seconds<=0&&oDiff.minutes>0){oDiff.seconds=60+ oDiff.seconds;oDiff.minutes--;}
if(oDiff.minutes===0&&oDiff.hours>0){oDiff.minutes=60+ oDiff.minutes;oDiff.hours--;}
if(oDiff.hours===0&&oDiff.days>0){oDiff.hours=24+ oDiff.hours;oDiff.days--;}
if(oDiff.days<=0&&oDiff.hours<=0&&oDiff.minutes<=0&&oDiff.seconds<=0){window.location="http://elementaryos.org";}
return oDiff;}
function countdown_label(d){if(d.value>9){return d.value;}
else{return"0"+ d.value;}}
function clock_name(d){return d.name;}
External CSS
This Pen doesn't use any external CSS resources.