airplane clock

airplane-clock.markdown

airplane clock

A Pen by Sawa:D on CodePen.

License.

index.html

<svg viewBox="0 0 402 402">
	<circle class="circle_bg" cx="201.3" cy="201.3" r="201.3"/>
  <circle class="circle_hour" cx="201.3" cy="201.3" r="174.3"/>
		<circle class="circle_sec" cx="201.3" cy="201.3" r="148.7"/>
		<circle class="circle_min" cx="201.3" cy="201.3" r="127"/>
	<path id="planePath" class="planePath" d="M350,201.3c0,82.1-66.6,148.7-148.7,148.7S52.7,283.4,52.7,201.3c0-53.4,28.1-100.2,70.4-126.4
		c22.7-14.1,49.6-22.3,78.3-22.3C283.4,52.7,350,119.2,350,201.3z"/>
	<line class="hand_hour" x1="201.3" y1="201.3" x2="201.3" y2="112.6"/>
	<line class="hand_min" x1="201.3" y1="201.3" x2="201.3" y2="88.3"/>
	<circle class="center01" cx="201.3" cy="201.3" r="5.8"/>
	<circle class="center02" cx="201.3" cy="201.3" r="3.4"/>
	<g class="hand_sec">
		<path class="plane" d="M213.1,51.3c-1.9-0.1-4.5-0.3-7.3-0.3l-2.3-4.7h1c0.4,0,0.7-0.6,0.7-1s-0.3-1-0.7-1h-1.7l-0.9-2h1
			c0.4,0,0.7-0.6,0.7-1s-0.3-1-0.7-1h-1.7l-2.2-3h-2.2l1.4,10.3v4c-4,0.1-4.7,0.2-6.5,0.2c-1.1,0-2.2-0.2-3.4,0l-3.5-5.5H184
			l1.6,6.3c-0.6,0.3-1,0.7-1,1c0,0.2,0.4-0.5,1.1-0.3l-1.6,4.9h0.9l3.7-4c1.2,0.3,2.1,1,3.2,1c1.7,0,2.5,0.7,6.5,0.8v4l-1.4,8.2h2.2
			l2.2-4h1.7c0.4,0,0.7-0.6,0.7-1s-0.3-1-0.7-1h-1l0.9-2h1.7c0.4,0,0.7-0.6,0.7-1s-0.3-1-0.7-1h-1l2.3-3.2c2.8,0.1,5.4,0.7,7.2,0.7
			c5.4-0.3,6.1-1.8,6.1-2.2C219.1,53.1,218.4,51.6,213.1,51.3z"/>
		<line class="line" x1="201.3" y1="52.7" x2="201.3" y2="201.3"/>
	</g>
</svg>

script.js

(function($) {
  $(function() {
    var now = new Date(),
      hour = now.getHours(),
      min = now.getMinutes(),
      sec = now.getSeconds(),
      $hourHand = $('.hand_hour'),
      $minuteHand = $('.hand_min'),
      $secondHand = $('.hand_sec');

    $hourHand.css('transform', 'rotate(' + hour * 30 + 'deg)');
    $minuteHand.css('transform', 'rotate(' + min * 6 + 'deg)');
    $secondHand.css('transform', 'rotate(' + sec * 6 + 'deg)');
  });
})(jQuery);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.less

body {
  background: #3b9ce1;
}

.circle_bg {
  fill: white;
  opacity: .05;
}
.circle_hour {
  fill: none;
  stroke: white;
  stroke-width:13;
  stroke-dasharray: 1, 90.2;
}
.circle_sec {
  fill: none;
  stroke: white;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0, 10.0445;
}
.circle_min {
  fill: none;
  stroke: white;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0, 66.5;
}
.planePath {
  fill: none;
}
.hand_sec {
  animation: rotate 60s linear infinite;
}
.hand_min {
  fill: none;
  stroke: white;
  stroke-width: 2;
  stroke-linecap: round;
  animation: rotate 3600s linear infinite;
}
.hand_hour {
  fill: none;
  stroke: white;
  stroke-width: 5;
  stroke-linecap: round;
  animation: rotate 86400s linear infinite;
}

.hand_sec, .hand_min, .hand_hour {
  transform-origin: bottom center;
}
.center01 {
  fill: white;
}
.center02 {
  fill:#C5E9FF;
}
.plane {
  fill: #0B76B7;
}
.line {
  opacity: 0;
  fill:none;
  stroke:white;
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}