text: // based on https://codepen.io/mohebifar/pen/KwdeMz
  class ClockElement extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
    }
  
    set hass(hass) {
    }
  
    setConfig(config) {
      const root = this.shadowRoot;
      if (root.lastChild) root.removeChild(root.lastChild);
      root.appendChild(this._buildWire());
      this._updateCLock(root.querySelector('svg'));
    }
  
    getCardSize() {
      return 1;
    }
  
    _buildWire() {
      const elemContainer = document.createElement('div');
      elemContainer.appendChild(this._htmlToElement(`
        <svg width="200" height="200">
          <filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
            <feOffset in="blur" dx="2.5" dy="2.5" />
          </filter>
          <g>
            <circle id="shadow" style="fill:rgba(0,0,0,0.1)" cx="97" cy="100" r="87" filter="url(#innerShadow)"></circle>
            <circle id="circle" style="stroke: #FFF; stroke-width: 12px; fill:#20B7AF" cx="100" cy="100" r="80"></circle>
          </g>
          <g>
            <line x1="100" y1="100" x2="100" y2="55" transform="rotate(80 100 100)" style="stroke-width: 3px; stroke: #fffbf9;" id="hourhand">
              <animatetransform attributeName="transform" attributeType="XML" type="rotate" dur="43200s" repeatCount="indefinite" />
            </line>
            <line x1="100" y1="100" x2="100" y2="40" style="stroke-width: 4px; stroke: #fdfdfd;" id="minutehand">
              <animatetransform attributeName="transform" attributeType="XML" type="rotate" dur="3600s" repeatCount="indefinite" />
            </line>
            <line x1="100" y1="100" x2="100" y2="30" style="stroke-width: 2px; stroke: #C1EFED;" id="secondhand">
              <animatetransform attributeName="transform" attributeType="XML" type="rotate" dur="60s" repeatCount="indefinite" />
            </line>
          </g>
          <circle id="center" style="fill:#128A86; stroke: #C1EFED; stroke-width: 2px;" cx="100" cy="100" r="3"></circle>
        </svg>`));
  
      const style = document.createElement('style');
      style.textContent = this._buildStyle();
      elemContainer.appendChild(style);
  
      return elemContainer
    }
  
  
    _updateCLock(svg) {
      let hands = [];
      hands.push(svg.querySelector('#secondhand > *'));
      hands.push(svg.querySelector('#minutehand > *'));
      hands.push(svg.querySelector('#hourhand > *'));
  
      const cx = 100;
      const cy = 100;
  
      const date = new Date();
      const hoursAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2;
      const minuteAngle = 360 * date.getMinutes() / 60;
      const secAngle = 360 * date.getSeconds() / 60;
  
      hands[0].setAttribute('from', [secAngle, cx, cy].join(' '));
      hands[0].setAttribute('to', [secAngle + 360, cx, cy].join(' '));
      hands[1].setAttribute('from', [minuteAngle, cx, cy].join(' '));
      hands[1].setAttribute('to', [minuteAngle + 360, cx, cy].join(' '));
      hands[2].setAttribute('from', [hoursAngle, cx, cy].join(' '));
      hands[2].setAttribute('to', [hoursAngle + 360, cx, cy].join(' '));
  
      for (let i = 1; i <= 12; i++) {
        const el = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        el.setAttribute('x1', '100');
        el.setAttribute('y1', '30');
        el.setAttribute('x2', '100');
        el.setAttribute('y2', '40');
        el.setAttribute('transform', 'rotate(' + (i * 360 / 12) + ' 100 100)');
        el.setAttribute('style', 'stroke: #ffffff;');
        svg.appendChild(el);
      }
    }
  
    _buildStyle() {
      return `
        :host {
  
        }
        svg {
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
  
        .filler {
          background: #20B7AF;
          position: absolute;
          bottom: 50%;
          top: 0;
          left: 0;
          right: 0;
        }`;
  
    }
  
    _htmlToElement(html) {
      var template = document.createElement('template');
      html = html.trim(); // Never return a text node of whitespace as the result
      template.innerHTML = html;
      return template.content.firstChild;
    }
  
  
  }
  
  window.customElements.define('clock-element', ClockElement);
  