<svg class="animate" width="502px" height="264px" viewBox="0 0 502 264" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="band">
<rect id="band-base" fill="#151E28" x="25" y="75" width="452" height="114"></rect>
<g id="left" fill="#29394B">
<rect id="1" x="27" y="73" width="34" height="118"></rect>
<rect id="2" x="66" y="73" width="34" height="118"></rect>
<rect id="3" x="104" y="73" width="34" height="118"></rect>
<rect id="4" x="141" y="73" width="34" height="118"></rect>
</g>
<g id="right" fill="#29394B">
<rect id="1" x="327" y="73" width="34" height="118"></rect>
<rect id="2" x="365" y="73" width="34" height="118"></rect>
<rect id="3" x="403" y="73" width="34" height="118"></rect>
<rect id="4" x="441" y="73" width="34" height="118"></rect>
</g>
<circle id="face-base" fill="#29394B" cx="251" cy="132" r="103"></circle>
</g>
<!-- Face bg -->
<circle id="face_dark" fill="#151E28" cx="251" cy="132" r="90"></circle>
<circle id="face_light" fill="#E6E7E8" cx="251" cy="132" r="80.5"></circle>
<circle id="face_white" fill="#FFFFFF" cx="251" cy="132" r="74.5"></circle>
<!-- Tick Marks -->
<g id="tick-marks-primary" fill="#151E28">
<path d="M91 -2V23.5238H87V-2H91Z"/>
<path d="M24 90H-1.5238V86H24V90Z"/>
<path d="M91 152V177.524H87V152H91Z"/>
<path d="M178 90H152.476V86H178V90Z"/>
</g>
<g id="tick-marks-secondary" stroke="#8D8B8B" stroke-width="2">
<path d="M30 1C30 1 32.4432 5.22883 33.0019 6.19574"/>
<path d="M6.28902 32.6997L1.09442 29.7028"/>
<path d="M0.598083 110.477L5.85647 107.443"/>
<path d="M33.1895 135.052C33.1895 135.052 31.2053 138.487 30.2132 140.204"/>
<path d="M107.81 135.052C107.81 135.052 109.795 138.487 110.787 140.204"/>
<path d="M140.588 110.181C138.849 109.178 135.37 107.171 135.37 107.171"/>
<path d="M134.882 33.0036C134.882 33.0036 138.42 30.9624 140.102 29.9919"/>
<path d="M110.778 0.761047C110.778 0.761047 108.335 4.98988 107.776 5.95679"/>
</g>
<!-- Hands -->
<g id="hands" stroke-width="4">
<path class="hand" id="minute" d="M33,72 L90.7151184,72" stroke="#151E28"></path>
<path class="hand" id="hour" d="M33,72 L0.483875155,102.516125" stroke="#151E28"></path>
<path class="hand" id="second" d="M33,72 L13.7162324,0.0319997074" stroke="#F07F75"></path>
</g>
<!-- Center -->
<circle class="center" fill="#E6E7E8" cx="251" cy="132" r="12"></circle>
<circle class="center" fill="#151E28" cx="251" cy="132" r="9"></circle>
<circle class="center" fill="#29394B" cx="251" cy="132" r="6"></circle>
<!-- Buttons -->
<rect class="watch_button" fill="#29394B" x="243" y="20" width="16" height="11"></rect>
<rect class="watch_button" fill="#29394B" x="241" y="24" width="20" height="8"></rect>
</svg>
<button>Replay</button>
// COLORS
$green: #CCDAB4;
$gray_dark: #11171E;
$gray_mid: #1F2A3B;
$gray_light: #E1E2E4;
$red: #EB6B65;
// BACKGROUND
body {
background: $green;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
float: left;
gap: 10vh;
width: 100vw;
height: 100vh;
}
button {
font-size: 18px;
color: #29394B;
text-decoration: none;
font-family: monospace;
border: 2px solid #29394B;
// border-radius: .5em;
padding: .5em 1em;
opacity: .8;
background: hsla(0,0,100,0);
cursor: pointer;
&:hover {
opacity: 1;
background: white;
transition: all 150ms ease-in-out 0s;
}
}
@keyframes animate_band-base {
0%,4.9% {
opacity: 0;
transform: scale(1,0.05);
}
5% {
opacity: 1;
transform: scale(1,0.05);
}
15%,100% {
transform: scale(1,1);
}
}
@keyframes animate_band-digits {
0% {
transform: scale(1,0);
}
0.1% {
transform: scale(1,0.05);
}
8%,100% {
transform: scale(1,1);
}
}
@keyframes animate_face-circle-1 {
0% {
transform: scale(0,0);
}
0.1% {
transform: scale(.1,.1);
}
25%,100% {
transform: scale(1,1);
}
}
@keyframes animate_face-circle-2{
0%,3.4% {
transform: scale(0,0);
}
3.5% {
transform: scale(.1,.1);
}
25%,100% {
transform: scale(1,1);
}
}
@keyframes animate_face-circle-3 {
0%,4.9% {
transform: scale(0,0);
}
5% {
transform: scale(.1,.1);
}
25%,100% {
transform: scale(1,1);
}
}
@keyframes animate_face-circle-4 {
0%,7.9% {
transform: scale(0,0);
}
8% {
transform: scale(.1,.1);
}
25%,100% {
transform: scale(1,1);
}
}
@keyframes animate_face-hand {
0%,15.9% {
transform: scale(0,0) translate(219px, 60.5px);
}
18% {
transform: scale(.1,.1) translate(219px, 60.5px);
}
35%,100% {
transform: scale(1,1) translate(219px, 60.5px);
}
}
@keyframes animate_face-tick-marks-primary {
0%,11.9% {
transform: scale(0,0) translate(162px, 44px);
}
12% {
transform: scale(.1,.1) translate(162px, 44px);
}
30%,100% {
transform: scale(1,1) translate(162px, 44px);
}
}
@keyframes animate_face-tick-marks-secondary {
0%,11.9% {
transform: scale(0,0) translate(181px, 62px);
}
12% {
transform: scale(.1,.1) translate(181px, 62px);
}
30%,100% {
transform: scale(1,1) translate(181px, 62px);
}
}
@keyframes animate_hand-rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
* {
transform-origin: center;
}
.animate {
#band-base {
transform: scale(1,0.05);
animation: animate_band-base 5s cubic-bezier(0,1,1,1) forwards;
}
#left, #right {
transform: scale(1,0.05);
animation: animate_band-digits 5s cubic-bezier(0,1,1,1) forwards;
}
#face-base, .watch_button {
animation: animate_face-circle-1 5s cubic-bezier(0,1,1,1) forwards;
}
#face_white {
animation: animate_face-circle-4 5s cubic-bezier(0,1,1,1) forwards;
}
#face_light {
animation: animate_face-circle-3 5s cubic-bezier(0,1,1,1) forwards;
}
#face_dark {
animation: animate_face-circle-2 5s cubic-bezier(0,1,1,1) forwards;
}
.center {
animation: animate_face-circle-4 5s cubic-bezier(0,1,1,1) forwards;
}
#tick-marks-primary {
animation: animate_face-tick-marks-primary 5s cubic-bezier(0,1,1,1) forwards;
}
#tick-marks-secondary {
animation: animate_face-tick-marks-secondary 5s cubic-bezier(0,1,1,1) forwards;
}
#hands {
animation: animate_face-hand 5s cubic-bezier(0,1,1,1) forwards;
}
#second {
transform-origin: 33px 72px;
animation:
animate_hand-rotation 60s linear infinite;
}
#minute {
transform-origin: 33px 72px;
animation: animate_hand-rotation 3600s linear infinite;
}
#hour {
transform-origin: 33px 72px;
animation: animate_hand-rotation 86400s linear infinite;
}
}$(document).ready(function() {
// Instantly remove and re-apply a class to restart animations
$('button').click(function() {
$('svg').removeClass('animate');
setTimeout(
function() {
$('svg').addClass('animate');
},1
)
});
});
External CSS
This Pen doesn't use any external CSS resources.