sensortoy/app/partials/cc2650_thermopile_dial.ejs

<div class="mui-row">
  <div class="mui-col-xs-3 mui--text-accent mui--text-right">Temp:</div>
  <div class="mui-col-xs-3 mui--text-light  mui--text-left"
       id="<%= data.baseID + '-t' %>">--
  </div>
  <div class="mui-col-xs-3 mui--text-accent mui--text-right">Ambient:</div>
  <div class="mui-col-xs-3 mui--text-light" id="<%= data.baseID + '-a' %>">--
  </div>
</div>
<ul class="mui-tabs__bar mui-tabs__bar--justified">
  <li class="tabOnWhite mui--is-active"><a data-mui-toggle="tab"
                                           data-mui-controls="<%= data.baseID + '-t-pane' %>">Temperature</a>
  </li>
  <li class="tabOnWhite"><a data-mui-toggle="tab"
                            data-mui-controls="<%= data.baseID + '-a-pane' %>">Ambient</a>
  </li>
</ul>
<div class="mui-tabs__pane mui--is-active" id="<%= data.baseID + '-t-pane' %>">

  <svg width='300' height='200' viewbox='0 0 300 220' background="#212121" id="<%= data.baseID + 'temp-svg' %>">
      <filter id="dropshadow" height="130%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
    <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
    <feMerge>
      <feMergeNode/> <!-- this contains the offset blurred image -->
      <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
    </feMerge>
  </filter>

      <g  transform="translate(-90,40) rotate(-120 180 90)" >
  <path id="<%= data.baseID + 'temp-arcB' %>" fill="none" stroke="rgb(61, 61, 61)" stroke-width="12" style="filter:url(#dropshadow)"/>
        <path id="<%= data.baseID + 'temp-arc' %>" fill="none" stroke="#00bfff" stroke-width="12"  />
      </g>
      <g transform="translate(150,100)">
        <text id="<%= data.baseID + 'temp-label' %>" class='textLabel' x='0' y='100' fill='#bad649' font-size='50' style="filter:url(#dropshadow)">--ºc</text>
      </g>
    </svg>


  <!--<svg id="<%= data.baseID + 'temp-svg' %>" width="300" height="150"
       fill="blue">
    <line x1="46" y1="12" x2="280" y2="12"
          style="stroke:#004c6d;stroke-width:2;"></line>
    <text id="<%= data.baseID + 'temp-txt1' %>" x="36" y="15"
          text-anchor="end">&#45;&#45;
    </text>
    <line x1="46" y1="136" x2="280" y2="136"
          style="stroke:#004c6d;stroke-width:2;"></line>
    <text id="undefined" x="36" y="139" text-anchor="end">0</text>
    <polyline id="<%= data.baseID + 'temp-line' %>" fill="none" stroke="#2196F3"
              text-anchor="end" stroke-width="2" points=""></polyline>
  </svg>-->
</div>
<div class="mui-tabs__pane" id="<%= data.baseID + '-a-pane' %>">
  <!--<svg id="<%= data.baseID + 'ambient-svg' %>" width="300" height="150"
       fill="blue">
    <line x1="46" y1="12" x2="280" y2="12"
          style="stroke:#004c6d;stroke-width:2;"></line>
    <text id="<%= data.baseID + 'ambient-txt1' %>" x="36" y="15"
          text-anchor="end">&#45;&#45;
    </text>
    <line x1="46" y1="136" x2="280" y2="136"
          style="stroke:#004c6d;stroke-width:2;"></line>
    <text id="undefined" x="36" y="139" text-anchor="end">0</text>
    <polyline id="<%= data.baseID + 'ambient-line' %>" fill="none"
              stroke="#2196F3" text-anchor="end" stroke-width="2"
              points=""></polyline>
  </svg>-->


  <svg width='300' height='200' viewbox='0 0 300 220' background="#212121" id="<%= data.baseID + 'ambient-svg' %>">
        <filter id="dropshadow" height="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
      <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
      <feMerge>
        <feMergeNode/> <!-- this contains the offset blurred image -->
        <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
      </feMerge>
    </filter>

    <!--  stroke-linecap="round" -->
        <g  transform="translate(-90,40) rotate(-120 180 90)" >
    <path id="<%= data.baseID + 'ambient-arcB' %>" fill="none" stroke="rgb(61, 61, 61)" stroke-width="12"  style="filter:url(#dropshadow)"/>
          <path id="<%= data.baseID + 'ambient-arc' %>" fill="none" stroke="#00bfff" stroke-width="12" />
        </g>
        <g transform="translate(150,100)">
          <text id="<%= data.baseID + 'ambient-label' %>" class='textLabel' x='0' y='100' fill='#bad649' font-size='50' style="filter:url(#dropshadow)">--ºc</text>
        </g>
      </svg>


</div>