Radical SVG Logo

by Kyrylo Slatin

HTML

<div id="clock-container">
<svg id="clock" viewBox="0 0 100 100">
  <defs>
    <clipPath id="cut-off-bottom">
      <rect x="50" y="50" width="50" height="50" transform="rotate(135 50, 50)"/>
    </clipPath>
  </defs>      
  <circle cx="50" cy="50" r="5" stroke="transparent" fill="red" stroke-width="0" />
  <circle cx="50" cy="50" r="10" stroke="yellow" fill="transparent" stroke-width="5" clip-path="url(#cut-off-bottom)" />
  <circle cx="50" cy="50" r="20" stroke="yellow" fill="transparent" stroke-width="5" clip-path="url(#cut-off-bottom)" />
  <circle cx="50" cy="50" r="30" stroke="yellow" fill="transparent" stroke-width="5" clip-path="url(#cut-off-bottom)" />
    <text x="50" y="100" style='fill:white; font-size:100;font-family:font-family: font-family: Rockwell'>R</text>
      
</svg>

CSS

#clock-container { 
  display: inline-block;
  position: relative;
  width: 100px;
  height: 100px;
  //padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
  background: midnightblue;
} 
#face { stroke-width: 2px; stroke: #fff; fill: #fff; }
#hour, #min, #sec { 
  stroke-width: 1px;
  fill: #333;
  stroke: #555;
}
#sec { stroke: #f55; }

body {
  margin: 0;
  //background: midnightblue;
}

JavaScript

setInterval(function() {
  function r(el, deg) {
    el.setAttribute('transform', 'rotate('+ deg +' 50 50)')
  }
  var d = new Date();
    var circles = document.getElementsByTagName('circle');
    for(var i = 0; i < circles.length; i++){
        r(circles[i], 6*6*d.getSeconds());
    }
}, 100);