Code

At the top of this page there is a small multicoloured clock which represents my age in days, hours, minutes, and seconds in the America/Vancouver time zone. This clock is actually an SVG image that is generated dynamically in Javascript and updated each second.

The numerals are a custom font designed to represent numbers in a 5-segment digital glyph. The use of the custom font identifies the number as my datestamp, to avoid confusion with other numbers or written dates.

The script below has functions to generate the datestamp (adtime), generate custom SVG glyphs (Comp and astruneGlyph), and compose the final SVG document representing the datestamp (displayAstruneTime).


function adtime(showSeconds) {
  showSeconds = showSeconds || false;
  Today = new Date();
  raw = Date.parse(Today.toGMTString())/1000;
  spm = 60;
  sph = 60*spm;
  spd = 24*sph;
  raw -= spm*Today.getTimezoneOffset();  // compensate for time zone
  day = Math.floor(raw/spd);
  raw -= day*spd;
  hour = Math.floor(raw/sph);
  if (hour<10) {
    hour = '0'+String(hour);
  }
  raw -= Number(hour)*sph;
  min = Math.floor(raw/spm);
  if (min<10) {
    min = '0'+String(min);
  }
  if (showSeconds) {
    sec = String(Math.floor(raw%spm));
    if (sec<10) {
      sec = '0'+String(sec);
    }
    min += sec;
  }
  return (String(day+154)+String(hour)+String(min));
}

function newSVGElement(svgElement) {
  var svgNS = "http://www.w3.org/2000/svg";
  el = document.createElementNS(svgNS,svgElement);
  return el;
}

function Comp() {
  this.glyph = newSVGElement('path');
  this.glyph.setAttribute('fill','#FF0000');
  this.glyph.setAttribute('stroke','none');
  this.glyph.setAttribute('stroke-width','10');
  this.path = '';
};
Comp.prototype.dn = function () {
  this.path += 'q 55,-20,110,0 ';
  this.path += 'l 0,-400 ';
};
Comp.prototype.dr = function () {
  this.path += 'q 420,400,980,600 40,-12,80,0 -600,-240,-940,-600 ';
  this.path += 'l 0,-400 ';
};
Comp.prototype.dl = function () {
  this.path += 'q -340,360,-940,600 40,-12,80,0 560,-200,980,-600 ';
  this.path += 'l 0,-400 ';
};
Comp.prototype.an = function () {
  this.path += 'q -55,20,-110,0 ';
  this.path += 'z ';
};
Comp.prototype.ar = function () {
  this.path += 'q 340,-360,940,-600 -40, 12,-80,0 -560, 200,-980, 600 ';
  this.path += 'z ';
};
Comp.prototype.al = function () {
  this.path += 'q -420,-400,-980,-600 -40,12,-80,0 600,240,940,600 ';
  this.path += 'z ';
};
Comp.prototype.nu = function () {
  this.path += 'q 55,-20,110,0 ';
  this.path += 'l 0,-145 ';
  this.path += 'l 145,0 ';
  this.path += 'q -20,-55,0,-110 ';
  this.path += 'l -145,0 ';
  this.path += 'l 0,-145 ';
  this.path += 'q -55,20,-110,0 ';
  this.path += 'l 0,145 ';
  this.path += 'l -145,0 ';
  this.path += 'q 20,55,0,110 ';
  this.path += 'l 145,0 ';
  this.path += 'z ';
};

// a little ovoid at centre stave
Comp.prototype.dot = function () {
  this.path += 'm 0,-200 c 0,50 100,50 100,0 c 0,-50 -100,-50 -100,0';
  this.path += 'z ';
};

function astruneGlyph(glyphChar,x_pos) {
  var arGlyph = new Comp();
  arGlyph.path += 'M '+x_pos+',1000 ';
  switch (glyphChar) {
    case '0' : arGlyph.nu(); break;
    case '1' : arGlyph.dn(); arGlyph.an(); break;
    case '2' : arGlyph.dr(); arGlyph.al(); break;
    case '3' : arGlyph.dl(); arGlyph.al(); break;
    case '4' : arGlyph.dn(); arGlyph.ar(); break;
    case '5' : arGlyph.dl(); arGlyph.ar(); break;
    case '6' : arGlyph.dr(); arGlyph.an(); break;
    case '7' : arGlyph.dn(); arGlyph.al(); break;
    case '8' : arGlyph.dr(); arGlyph.ar(); break;
    case '9' : arGlyph.dl(); arGlyph.an(); break;
    case '.' : arGlyph.dot(); break;
  };
  arGlyph.glyph.setAttribute('d',arGlyph.path);
  return arGlyph.glyph;
}

function displayAstruneTime(divid,showSeconds) {
  showSeconds = showSeconds || false;
  // first remove existing AstruneTimeSvg node, if it exists
  if (existing = document.getElementById('AstruneTimeSvg')) {
    existing.parentNode.removeChild(existing);
  }
  // rebuild AstruneTimeSvg node
  var kern = 300;
  var left = 980 - (showSeconds ? (kern * 1.5) : 0);
  var div = document.getElementById(divid);
  var arSvg = newSVGElement('svg');
  arSvg.setAttribute("version", "1.2");
  arSvg.setAttribute("baseProfile", "tiny");
  arSvg.setAttribute("viewBox", "0 0 4360 1600");
  arSvg.id = 'AstruneTimeSvg';
  var ad = adtime(showSeconds);
  pad = 0;
  for (i = 0; i < ad.length; i++) {
    if (i == 5) {
      arSvg.appendChild(astruneGlyph('.',(((i + pad) * kern) + left)));
      pad++;
    }
    if (i == 9) {
      arSvg.appendChild(astruneGlyph('.',(((i + pad) * kern) + left)));
      pad++;
    }
    arSvg.appendChild(astruneGlyph(ad.substr(i,1),(((i + pad) * kern) + left)));
  }
  div.appendChild(arSvg);
}