Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Black+Ops+One);
html,body {
  width:100%;
  min-height:100%;
  background:#181719;
  overflow:hidden;
  font-family: 'Black Ops One', cursive;
  margin:0;
  padding:0;
}


              
            
!

JS

              
                var $ = function(id) {return document.getElementById(id);};
var $$ = function(el){return(document.createElement(el));}
var h = function(){return window.innerHeight/1.5;}
var w = function(){return window.innerWidth/1.5;}
var maxsize = function(){return (h() < w()) ? h() : w();}
var main = $$('div');
main.id = "hidden";
document.body.appendChild(main);

function run(){
  hands();
  var outer_sec = setOuterSec();
  position(draw(outer_sec));
  var outer_min = setOuterMin();
  position(draw(outer_min));
  var outer_hour = setOuterHr();
  position(draw(outer_hour));
  var _hand = setHand();
  position(draw(_hand));
  midClock();
  rot();  
  $('mid_clock').style.display = "block";
  display(outer_sec);
  display(outer_min);
  display(outer_hour);
  var cnt = setInterval(function(){rot();}, 1000);
}

function rot(){
  var t = new Date();
  var sec = t.getSeconds();
  var min = t.getMinutes();
  var hour = t.getHours();
  if(hour > 12)hour = hour - 12;
  var str = realtime(t);
  $('mid_clock').textContent = str;
  var seconds = Number($('id_hand_sec_ofs_deg').textContent);
  var minutes = Number($('id_hand_min_ofs_deg').textContent);
  var hours = Number($('id_hand_hour_ofs_deg').textContent);
  var srot = 360 + seconds - (sec * (360 / 60));
  var mrot = 360 + minutes - (min * (360 / 60));
  var hrot = 360 + hours - ((hour * (360 / 12)) + min * (360 / (60 * 12)));

  var rots = "rotate(" + srot + "deg)";
  var rotm = "rotate(" + mrot + "deg)";
  var roth = "rotate(" + hrot + "deg)";

  draw('outer_sec').style.webkitTransform = rots;
  draw('outer_min').style.webkitTransform = rotm;
  draw('outer_hour').style.webkitTransform = roth;
  draw('outer_sec').style.MozTransform = rots;
  draw('outer_min').style.MozTransform = rotm;
  draw('outer_hour').style.MozTransform = roth;
}

function realtime(d) {
  var hour = d.getHours();
  var min = d.getMinutes();
  var sec = d.getSeconds();
  var currHr = hour % 12;
  currHr = currHr ? currHr : 12;
  var ts = currHr + ':' +numPad0(min) + ':' + numPad0(sec);
  return ts;
}

function numPad0(str) {
  var cStr = str.toString();
  if (cStr.length < 2) str = 0 + cStr;
  return str;
}
function build(thisc, w, h){
  var _c  = $('hidden');
  var c = $$('canvas');
  c.id = 'id_' + thisc;
  c.width = w;
  c.height = h;
  c.style.display = "none";
  _c.appendChild(c);
  return canv(thisc);
}

function remove(thisc){
  var _c = $('hidden');
  var thisid = 'id_' + thisc;
  var c = $(thisid);
  if(c !== null){
    _c.removeChild(c);
  }
}
function save(thisc){
  var _c  = $('hidden');
  var src = 'id_' + thisc;
  var _id = src + '_img';

  var img = new Image();
  img.id = _id;
  img.src = $(src).toDataURL();
  img.width = $(src).width;
  img.height = $(src).height;
  _c.appendChild(img);
}

function hide(thisc){
  var _id = 'id_' + thisc + '_img';
  var thisimg = $(_id);
  thisimg.style.display = "none";
}

function display(thisc){
  var _id = 'id_' + thisc + '_img';
  var thisimg = $(_id);
  thisimg.style.display = "block";
}

function canv(thisc){
  var thisid = 'id_' + thisc;
  return $(thisid).getContext('2d');
}

function getcnvsById(thisc){
  var thisid= 'id_' + thisc;
  return $(thisid);
}

function draw(thisc){
  var _id = 'id_' + thisc + '_img';
  return $(_id);
}


function hands(){
  var calcs = $$('div');
  calcs.style.display = "none";
  calcs.appendChild(subs('hand_hour', (0 * 60 / 12)));
  calcs.appendChild(subs('hand_min', 0));
  calcs.appendChild(subs('hand_sec', 0));
  document.body.appendChild(calcs);
}

function subs(thisid, ofs){
  var _c = $$('span');
  _c.id = 'id_' + thisid + '_ofs_deg';
  _c.style.display = "none";
  _c.textContent = ofs * 360 / 60;
  return _c;
}


function midClock(){
  var sz = Math.round(maxsize() * 0.95);
  var pos = Math.round(sz / 2);
  var fontsz = 32;
  var digiclock = $$('div');
  digiclock.id = "mid_clock";
  digiclock.style.position = "absolute";
  digiclock.style.top = "0";
  digiclock.style.left = "0";
  digiclock.style.bottom = "0";
  digiclock.style.right = "0";
  digiclock.style.margin ="auto";
  digiclock.style.width="150px";
  digiclock.style.height="50px";
  digiclock.style.textAlign="center";
  digiclock.style.fontFamily = "monospace";
  digiclock.style.fontSize = fontsz + "px";
  digiclock.style.color = "#181719";
  digiclock.style.textShadow="1px -1px #F58D91";
  digiclock.textContent = "--:--:--";
  digiclock.style.display = "none";

  var t = new Date();
  var str = realtime(t);
  digiclock.textContent = str;
  document.body.appendChild(digiclock);
}


function setHand() {
  var thisid = "hand_sec";
  var stroke = "#F58D91";
  var fill = "transparent";
  var offset = 10;
  var thickness = 300;
  return drawhand(thisid, stroke, fill, offset, thickness);
}

function drawhand(thisid, stroke, fill, offset, thickness){
  if(draw(thisid) !== null){
    return thisid;
  }
  var sz = Math.round(maxsize() * 0.95);
  var pos = Math.round(sz / 2);
  var _$_ = build(thisid, sz, sz);

  _$_.strokeStyle = stroke;
  _$_.fillStyle = fill;

  var roffs = Math.PI * 2 * (Number($('id_' + thisid + '_ofs_deg').textContent) / 360);
  var rad = Math.round(pos * 0.95) - offset;
  var innerrad = rad  - 12;
  var midsect = 36;

  var sttr = (Math.PI * 2 * (((thickness * 0.75) + 1) / thickness)) + roffs;
  var midr = (Math.PI * 2 * ((thickness * 0.75) / thickness)) + roffs;
  var endr = (Math.PI * 2 * (((thickness * 0.75) - 1) / thickness)) + roffs;

  var x = pos + Math.round(midsect * Math.cos(sttr));
  var y = pos + Math.round(midsect * Math.sin(sttr));

  _$_.beginPath();
  _$_.lineWidth = 1.5;
  _$_.shadowColor='#FF548F';
  _$_.shadowBlur=5;
  _$_.moveTo(x, y);

  x = pos + Math.round(innerrad * Math.cos(sttr));
  y = pos + Math.round(innerrad * Math.sin(sttr));
  _$_.lineTo(x, y);

  x = pos + Math.round(rad * Math.cos(midr));
  y = pos + Math.round(rad * Math.sin(midr));
  _$_.lineTo(x, y);

  x = pos + Math.round(innerrad * Math.cos(endr));
  y = pos + Math.round(innerrad * Math.sin(endr));
  _$_.lineTo(x, y);

  x = pos + Math.round(midsect * Math.cos(endr));
  y = pos + Math.round(midsect * Math.sin(endr));
  _$_.lineTo(x, y);

  _$_.stroke();
  _$_.fill();

  save(thisid);
  remove(thisid);
  return thisid;
}

function setOuterHr() {
  var thisid = "outer_hour";
  var stroke = "#8EE696";
  var fill = "#8EE696";
  var offset = 110;
  var step = 1;
  var div = 12;
  return numpos(thisid, stroke, fill, offset, step, div);
}

function setOuterMin() {
  var thisid = "outer_min";
  var stroke = "#63D3FF";
  var fill = "#63D3FF";
  var offset = 52;
  var step = 5;
  var div = 60;
  return numpos(thisid, stroke, fill, offset, step, div);
}

function setOuterSec() {
  var thisid = "outer_sec";
  var stroke = "#BE80FF";
  var fill = "#BE80FF";
  var offset = 0;
  var step = 1;
  var div = 60;
  return numpos(thisid, stroke, fill, offset, step, div);
}

function outerpos(i, div){
  var ps;
  if(div == 60)ps = !(i % 15) ? 8 : 4;
  else ps = 6;
  return ps;
}

function outertext(i, x, y, div, step, fill, _$_){
  var txt = String(i);
  var rt;
  if(div == 60){
    rt = (i % 15);
    if(i < 45){
      txt = String(i + 15);
    }else{
      txt = String(i - 45);
    }
  }else{
    rt = false;
    if(i < 9){
      txt = String(i + 3);
    }else if(i > 9){
      txt = String(i - 9);
    }else{
      txt = 12;
    }
  }

  if(!(i % step)){
    if(rt) style(txt, x, y, 14, "normal", 14, "Black Ops One", fill, _$_);
    else style(txt, x, y, 14, "bold", 20, "Black Ops One", fill, _$_);
  }
}

function numpos(thisid, stroke, fill, offset, step, div){
  if(draw(thisid) !== null) return thisid;

  var sz = Math.round(maxsize() * 0.95);
  var pos = Math.round(sz / 2);
  var _$_ = build(thisid, sz, sz);
  _$_.strokeStyle = stroke;
  _$_.fillStyle = fill;

  var rad = Math.round(pos * 0.95) - offset;
  for(var i = 0; i < div; i++){
    var sttr = Math.PI * 2 * (0 + (i / div));
    var innerrad = rad  - 18;
    var midsect = innerrad - 24;
    var tx = pos + Math.round(rad * Math.cos(sttr));
    var ty = pos + Math.round(rad * Math.sin(sttr));
    var px = pos + Math.round(innerrad * Math.cos(sttr));
    var py = pos + Math.round(innerrad * Math.sin(sttr));
    var lx = pos + Math.round(midsect * Math.cos(sttr));
    var ly = pos + Math.round(midsect * Math.sin(sttr));
    outertext(i, tx, ty, div, step, fill, _$_);
    _$_.beginPath();
    _$_.lineWidth = 0.5;
    _$_.strokeStyle = stroke;
    _$_.moveTo(px, py);
    _$_.lineTo(lx, ly);
    _$_.stroke();
    var ps = outerpos(i, div);
    pts(px, py, ps, stroke, fill, _$_);
  }
  save(thisid);
  remove(thisid);
  hide(thisid);
  return thisid;
}

function style(str, x, y, maxw, fst, fontsz, ff, fc, _$_){
  _$_.font = fst + " " + fontsz + "px '" + ff + "'";
  _$_.fillStyle = fc;
  _$_.textAlign = "center";
  _$_.textBaseline = "middle";
  _$_.fillText(str, x, y, maxw);
}

function pts(x, y, s, stroke, fill, _$_){
  _$_.moveTo(x - s, y - s);
  _$_.beginPath();
  _$_.arc(x, y, s / 2, 0, Math.PI * 2, true);
  _$_.strokeStyle = stroke;
  _$_.fillStyle = fill;
  _$_.fill();
  _$_.closePath();
}

function position(_c){
  _c.style.position = "absolute";
  _c.style.top = "0px";
  _c.style.left = "0px";
  _c.style.bottom= "0px";
  _c.style.right= "0px";
  _c.style.margin="auto";
}

run();
              
            
!
999px

Console