Skip to content

Instantly share code, notes, and snippets.

@anad-zeal
Created August 28, 2018 18:07
Show Gist options
  • Save anad-zeal/5273e689c9f93b70b7ef6959e0ef69d9 to your computer and use it in GitHub Desktop.
Save anad-zeal/5273e689c9f93b70b7ef6959e0ef69d9 to your computer and use it in GitHub Desktop.
airplane clock
<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>
(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);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment