A Pen by Secret Sam.

An-Anonymous-Pen.markdown

An Anonymous Pen

A Pen by Secret Sam on CodePen.

License.

index.html

<!-- SVG SOURCE -->
    <svg height="0" width="0" style="position:absolute;margin-left: -100%;">
<g id="clock-icon">
  
  <g
   id="Background"
   transform="translate(0,0)">
	<circle
   cx="201.5"
   cy="201.5"
   r="201.5"
   id="Background-circle"
   style="fill:#ffd250"
   d="M 701.5,390.5 C 701.5,501.78538 611.28538,592 500,592 388.71462,592 298.5,501.78538 298.5,390.5 298.5,279.21462 388.71462,189 500,189 c 111.28538,0 201.5,90.21462 201.5,201.5 z" />
</g>
<g
   id="C"
   transform="translate(0,0)">
	<path
   id="C-path"
   stroke-miterlimit="10"
   d="m 323.5,252.159 c -20.637,44.526 -67.613,75.225 -121.693,74.322 -72.111,-1.204 -129.545,-58.135 -128.286,-127.161 1.257,-69.028 60.734,-124.006 132.841,-122.8 52.174,0.872 96.663,30.914 116.803,73.606"
   inkscape:connector-curvature="0"
   style="fill:none;stroke:#ffffff;stroke-width:27;stroke-linecap:round;stroke-miterlimit:10" />
</g>
<g
   id="Wijzer"
   transform="translate(0,0)">
   <line
   id="Wijzer-line"
   stroke-miterlimit="10"
   x1="202.5"
   y1="202.5"
   x2="316.5"
   y2="316.5"
   style="fill:none;stroke:#ffffff;stroke-width:27;stroke-linecap:round;stroke-miterlimit:10" />
</g>
      
<script type="text/javascript">
(function(undefined){
  var setTime = function(){
  var date = new Date(),
  MINUTE = 60, HOUR   = 60*MINUTE,
  seconds = date.getSeconds(),
  minutes = (date.getMinutes()*MINUTE) + seconds,
  hours = (date.getHours()*HOUR)+minutes;

  /*document.getElementById('Wijzer').setAttribute('transform', 'rotate('+360*(seconds/MINUTE*2)+',202.5,202.5)');*/
    document.getElementById('Wijzer').setAttribute('transform', 'rotate('+(360*(minutes/HOUR)-135)+',202.5,202.5)');
    document.getElementById('C').setAttribute('transform', 'rotate('+(360*(hours/(12*HOUR))-90)+',201.5,201.5)');
  }
setTime();
  document.getElementById('clock-icon').onmouseover=function(){
  document.getElementById('Wijzer').setAttribute('transform', 'rotate(0,202.5,202.5)');
  document.getElementById('C').setAttribute('transform', 'rotate(0,201.5,201.5)');
  };
var interval = setInterval(setTime,1000);
})();

</script>
</g>    
      
</svg>
<!-- SVG SOURCE ends-->





<svg class="icon is-x10" viewBox="0 0 403 403">
    <use xlink:href="#clock-icon"></use>
</svg>

style.css

.icon{
  width: 32px;
  height: 32px;
  fill: #ccc;
}

.icon.is-check{
  fill: #FE4365;
}

.icon.is-x10{
  width: 320px;
  height: 320px;
}