<svg>
	<defs>
		<pattern id="dotPattern"
						 x="0" y="0" width="10" height="10"
						 patternUnits="userSpaceOnUse">
				<circle class="bgDot" cx="5" cy="5" r="2" />
		</pattern>
		
		<radialGradient id="backHoleBelowClock" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
			<stop offset="50%"  style="stop-color:rgb(0,0,0);stop-opacity:0.7"/>
			<stop offset="100%"	style="stop-color:rgb(0,0,0);stop-opacity:0"/>
		</radialGradient>

		<radialGradient id="blackVignette" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="40%" style="stop-color:rgb(0,0,0);stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
    </radialGradient>

		<filter id="glow">
				<feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
				<feMerge>
						<feMergeNode in="coloredBlur"/>
						<feMergeNode in="SourceGraphic"/>
				</feMerge>
		</filter>		
		
		<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
			<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="shadow"/>
			<feOffset dx="1" dy="1"/>
			<feMerge>
				<feMergeNode/>
				<feMergeNode in="SourceGraphic"/>
			</feMerge>
		</filter>		
		
	</defs>
	
	<!-- Background objects -->
	<rect x="0" y="0" width="100%" height="100%" style="stroke: #000000; fill: url(#dotPattern);" /> 	
	<ellipse cx="500" cy="240" rx="300" ry="300" fill="url(#backHoleBelowClock)"/>	
	<ellipse cx="500" cy="240" rx="600" ry="600" fill="url(#blackVignette)"/>	
	
	<!-- Clock objects -->
	<circle class="clockCircle hour" cx="500" cy="240" r="150" stroke-width="6" />
	<path id="arcHour" class="clockArc hour" stroke-width="6" stroke-linecap="round" filter="url(#glow)" />
	<circle class="clockDot hour" r="8" filter="url(#glow)" />

	<circle class="clockCircle minute" cx="500" cy="240" r="170" stroke-width="3" />
	<path id="arcMinute" class="clockArc minute" stroke-width="3" stroke-linecap="round" filter="url(#glow)" />
	<circle class="clockDot minute" r="5" filter="url(#glow)" />
	
	<!-- Caption objects -->
	<text id="time" class="caption timeText" x="500" y="240" stroke-width="0" text-anchor="middle" alignment-baseline="middle"  filter="url(#shadow)"></text>
	
	<text id="day" class="caption dayText" x="300" y="210" stroke-width="0" text-anchor="end" alignment-baseline="middle"  filter="url(#shadow)"></text>
	<text id="date" class="caption dateText" x="300" y="250" stroke-width="0" text-anchor="end" alignment-baseline="middle" filter="url(#shadow)"></text>
	
</svg>
@import "compass";

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900|Dosis:300,400,600,700,800|Droid+Sans:400,700|Lato:300,400,700,900|PT+Sans:400,700|Ubuntu:300,400,500,700|Open+Sans:400,300,600,700|Roboto:400,300,500,700,900|Roboto+Condensed:400,300,700|Open+Sans+Condensed:300,700|Play:400,700|Maven+Pro:400,500,700,900&subset=latin,latin-ext);

$mainColor: #1bbccb; // Blue
//$mainColor: #de9235; // Orange
//$bgColor: darken($mainColor, 25%);
$bgColor: #215769;

$greyColor: #2a2a2a;
$textColor: White;

$fontClock: "Open Sans";
$fontCaptions: "Source Sans Pro";

body {
	padding: 0;
	margin: 0;
	background-color: #222;
	overflow: hidden;
}

svg {
	position: absolute;
	width: 800px;
	height: 480px;
	left: 0; right: 0; top: 0; bottom: 0;
	margin: auto;
	
	@include background-image(linear-gradient(Black 60%, $bgColor 100%));
	
	@include border-radius(10px);
	@include box-shadow(0 0 50px rgba(Black, 0.8));
}

.bgDot {
	stroke: none; 
	fill: $bgColor;
}

.clockCircle {
	fill: none;
	stroke: $greyColor;
}

.clockArc {
	fill: none;
	stroke: $mainColor;
}

.clockDot {
	fill: lighten($mainColor, 50%);
}

.caption {
	font-family: $fontCaptions;
	font-weight: 300;
	fill: $textColor;
}

.dayText {
	font-size: 1.7rem;
}

.dateText {
	font-size: 2.5rem;
	font-weight: 400;
}

.timeText {
	font-family: $fontClock;
	font-size: 5rem;
	font-weight: 600;
	fill: $textColor;
}
View Compiled
/*
Inspired by https://dribbble.com/shots/2004657-Alarm-Clock-concept
 */
var describeArc, polarToCartesian, setCaptions;

polarToCartesian = function(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians;
  angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
  return {
    x: centerX + radius * Math.cos(angleInRadians),
    y: centerY + radius * Math.sin(angleInRadians)
  };
};

describeArc = function(x, y, radius, startAngle, endAngle) {
  var arcSweep, end, start;
  start = polarToCartesian(x, y, radius, endAngle);
  end = polarToCartesian(x, y, radius, startAngle);
  arcSweep = endAngle - startAngle <= 180 ? '0' : '1';
  return ['M', start.x, start.y, 'A', radius, radius, 0, arcSweep, 0, end.x, end.y].join(' ');
};

setCaptions = function() {
  var dot, hour, hourArc, minArc, minute, now, pos;
  now = new Date();
  hour = now.getHours() % 12;
  minute = now.getMinutes();
  hourArc = (hour * 60 + minute) / (12 * 60) * 360;
  minArc = minute / 60 * 360;
  $('.clockArc.hour').attr('d', describeArc(500, 240, 150, 0, hourArc));
  $('.clockArc.minute').attr('d', describeArc(500, 240, 170, 0, minArc));
  $('.clockDot.hour').attr('d', describeArc(500, 240, 150, hourArc - 3, hourArc));
  $('.clockDot.minute').attr('d', describeArc(500, 240, 170, minArc - 1, minArc));
  dot = $(".clockDot.hour");
  pos = polarToCartesian(500, 240, 150, hourArc);
  dot.attr("cx", pos.x);
  dot.attr("cy", pos.y);
  dot = $(".clockDot.minute");
  pos = polarToCartesian(500, 240, 170, minArc);
  dot.attr("cx", pos.x);
  dot.attr("cy", pos.y);
  return $('#time').text(moment().format('H:mm'));
};

$('#day').text(moment().format('dddd'));

$('#date').text(moment().format('MMMM D'));

setCaptions();

setInterval(function() {
  return setCaptions();
}, 10 * 1000);

$(function() {
  TweenMax.staggerFrom(".clockArc", .5, {
    drawSVG: 0,
    ease: Power3.easeOut
  }, 0.3);
  TweenMax.from("#time", 1.0, {
    attr: {
      y: 350
    },
    opacity: 0,
    ease: Power3.easeOut,
    delay: 0.5
  });
  TweenMax.from(".dayText", 1.0, {
    attr: {
      y: 310
    },
    opacity: 0,
    delay: 1.0,
    ease: Power3.easeOut
  });
  return TweenMax.from(".dateText", 1.0, {
    attr: {
      y: 350
    },
    opacity: 0,
    delay: 1.5,
    ease: Power3.easeOut
  });
});

// ---
// generated by coffee-script 1.9.2

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js
  3. //cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js
  4. //s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=5