timer.css

html, body {
    margin: 0;
    height: 100%;
}
  
svg#clock {
    display: block;
    margin: 0 auto;
    background-color: #000;
}
  
#hand {
    fill: #fff;
    stroke: #fff;
    animation: time 3s ease infinite;
}
  
#hand line {
    stroke-linecap: round;
}
  
@keyframes time {
    0%   { transform: rotate(  0deg); stroke-width: 24; }
    4%   { transform: rotate(  0deg); stroke-width:  6; }
    33%  { transform: rotate(120deg); stroke-width:  6; }
    66%  { transform: rotate(240deg); stroke-width:  6; }
    88%  { transform: rotate(360deg); stroke-width:  6; }
    92%  { transform: rotate(360deg); stroke-width: 24; }
    96%  { transform: rotate(360deg); stroke-width:  6; }
    100% { transform: rotate(360deg); stroke-width: 24; }
}

timer.svg

<svg id="clock" version="1.1" width="40px" height="40px" preserveAspectRatio="xMidYMid meet" viewBox="-50 -50 100 100">
    <g id="hand">
        <line x1="0" y1="0" x2="0" y2="-40" />
        <circle cx="0" cy="0" r="8" />
    </g>
</svg>