JSFiddle - React, Tailwind, and code Playground

Clock Snap

by Jennifer Perrin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.2.0/snap.svg-min.js"></script>
<svg version="1.1" id="clock" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="600px" height="600px" viewBox="50 50 400 500" 
	 xml:space="preserve">
<circle id="face" fill="#F4F3ED" cx="243.869" cy="250.796" r="130.8"/>
<path id="rim" fill="#383838" d="M243.869,101.184c-82.629,0-149.612,66.984-149.612,149.612c0,82.629,66.983,149.612,149.612,149.612
	S393.48,333.425,393.48,250.796S326.498,101.184,243.869,101.184z M243.869,386.455c-74.922,0-135.659-60.736-135.659-135.659
	c0-74.922,60.737-135.659,135.659-135.659c74.922,0,135.658,60.737,135.658,135.659
	C379.527,325.719,318.791,386.455,243.869,386.455z"/>
<g id="inner">
	<g opacity="0.2">
		<path fill="#C4C4C4" d="M243.869,114.648c-75.748,0-137.154,61.406-137.154,137.153c0,75.749,61.406,137.154,137.154,137.154
			c75.748,0,137.153-61.405,137.153-137.154C381.022,176.054,319.617,114.648,243.869,114.648z M243.869,382.56
			c-72.216,0-130.758-58.543-130.758-130.758s58.542-130.758,130.758-130.758c72.216,0,130.758,58.543,130.758,130.758
			S316.085,382.56,243.869,382.56z"/>
	</g>
	<g>
		<path fill="#282828" d="M243.869,113.637c-75.748,0-137.154,61.406-137.154,137.153c0,75.749,61.406,137.154,137.154,137.154
			c75.748,0,137.153-61.405,137.153-137.154C381.022,175.043,319.617,113.637,243.869,113.637z M243.869,381.548
			c-72.216,0-130.758-58.542-130.758-130.757c0-72.216,58.542-130.758,130.758-130.758c72.216,0,130.758,58.543,130.758,130.758
			C374.627,323.005,316.085,381.548,243.869,381.548z"/>
	</g>
</g>
<g id="markings">
	<line fill="none" stroke="#3F3F3F" stroke-miterlimit="10" x1="243.5" y1="139" x2="243.5" y2="133"/>
	<line fill="none" stroke="#3F3F3F" stroke-miterlimit="10" x1="231.817" y1="139.651" x2="231.19" y2="133.684"/>
	<line fill="none" stroke="#3F3F3F" stroke-miterlimit="10" x1="220.266" y1="141.52" x2="219.018" y2="135.65"/>
	<line fill="none" stroke="#3F3F3F"...

CSS

body{
  background: #dcdcdc;
}
svg{
  display: block;
  margin: auto;
}

JavaScript

var s = Snap(document.getElementById("clock"));

		var seconds = s.select("#seconds"),
		    minutes = s.select("#minutes"),
		    hours   = s.select("#hours"),
		    rim     = s.select("#rim"), 
		    face    = {
		      elem: s.select("#face"),
		      cx: s.select("#face").getBBox().cx,
		      cy: s.select("#face").getBBox().cy,
		    },
		    angle   = 0,
		    easing = function(a) {
		      return a==!!a?a:Math.pow(4,-10*a)*Math.sin((a-.075)*2*Math.PI/.3)+1;
		    };

		var sshadow = seconds.clone(),
			mshadow = minutes.clone(),
			hshadow = hours.clone(),
			rshadow = rim.clone(),
			shadows = [sshadow, mshadow, hshadow];

		//Insert shadows before their respective opaque pals
		seconds.before(sshadow);
		minutes.before(mshadow);
		hours.before(hshadow);
		rim.before(rshadow);

		//Create a filter to make a blurry black version of a thing
		var filter = Snap.filter.blur(0.1) + Snap.filter.brightness(0);

		//Add the filter, shift and opacity to each of the shadows
		shadows.forEach(function(el){
			el.attr({
				transform: "translate(0, 2)",
				opacity: 0.2,
				filter: s.filter(filter)
			});
		})

		rshadow.attr({
			transform: "translate(0, 8) ",
      opacity: 0.5,
			filter: s.filter(Snap.filter.blur(0, 8)+Snap.filter.brightness(0)),
		})

		function update() {
		  var time = new Date();
		  setHours(time);
		  setMinutes(time);
		  setSeconds(time);
		}

		function setHours(t) {
		  var hour = t.getHours();
		  hour %= 12;
		  hour += Math.floor(t.getMinutes()/10)/6;
		  var angle = hour*360/12;
		  hours.animate(
		    {transform: "rotate("+angle+" 244 251)"},
		    100,
		    mina.linear,
		    function(){
		      if (angle === 360){
		        hours.attr({transform: "rotate("+0+" "+face.cx+" "+face.cy+")"});
		        hshadow.attr({transform: "translate(0, 2) rotate("+0+" "+face.cx+" "+face.cy+2+")"});
		      }
		    }
		  );
		  hshadow.animate(
		    {transform: "translate(0, 2) rotate("+angle+" "+face.cx+" "+face.cy+2+")"},
		    100,
		   ...