SVG Annulus interface

Prototype for the Interface UI framework.

by Julien Etienne

HTML

<svg class="i disc" data-i="annulus(inner:80;x:100;y:100;)">
  <path></path>
</svg>

<svg class="i disc second" data-i="annulus(inner:60;x:100;y:100;)">
  <path></path>
</svg>

CSS

.disc {
  position: absolute;
  top:0;
  left:0;
}

.disc path {
  fill: rgba(220, 140, 80, 0.9);
}

.second {
  left: 20%;
  top: 20vw;
  width: 60%;
}
.second path {
  fill: red;
  transition: all 1s ease;
}

.second path:hover {
  fill: yellowgreen;
}

JavaScript

var i = document.getElementsByClassName('i');
var iArray = [].slice.call(i);
var shapes = {};

shapes.annulus = function annulus(element, geoProperties) {
  var defaults = {
    inner: 50,
    x: 100,
    y: 100
  };

  element.setAttribute('viewBox', '0 0 200 200');
  var path = element.firstElementChild;
  var inner = geoProperties.inner || defaults.inner;
  var inner2 = inner * 2;
  var x = geoProperties.x || defaults.x;
  var y = geoProperties.y || defaults.y;

  path.setAttribute('d', 'M100 100m-100,0a75,75,0 1,0 200,0a 75,75 0 1,0 -200,0zM' + x + ' ' + y + 'm-' + inner + ',0a' + inner + ',' + inner + ',0 0,1 ' + inner2 + ',0a ' + inner + ',' + inner + ' 0 0,1 -' + inner2 + ',0z');
}

iArray.forEach(function(element) {
  var geoData = element.getAttribute('data-i').split('(');
  var geoProps = geoData[1].slice(0, -2).split(';');
  var geoProperties = {};
  geoProps.forEach(function(pair) {
    var pairArray = pair.split(':');
    geoProperties[pairArray[0]] = pairArray[1];
  });
  var geoName = geoData[0];
  shapes[geoName](element, geoProperties);
});