SVG

components.basic-svg.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.svg-circle.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'svg',
  classNames: ['circle'],
  attributeBindings: ['width:size', 'height:size', 'viewBox'],

  viewBox: '0 0 120 120',

  // Circle props
  size: 120,
  progress: null,

  center: Ember.computed('size', function() {
    return this.get('size') / 2;
  }),

  strokeWidth: Ember.computed('size', function() {
    return this.get('size') * 0.1;
  }),

  radius: Ember.computed('size', 'strokeWidth', function() {
    const { size, strokeWidth } = this.getProperties('size', 'strokeWidth');
    return (size / 2) - (strokeWidth / 2);
  }),

  circumference: Ember.computed('radius', function() {
    return 2 * Math.PI * this.get('radius');
  }),

  offset: Ember.computed('progress', 'circumference', function () {
    const { progress, circumference } = this;
    return ((100 - progress) / 100) * circumference;
  }),

  dashStyle: Ember.computed('offset', function() {
    return Ember.String.htmlSafe(`strokeDashoffset: ${this.get('offset')}`);
  })
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

  .circle {
    transform: rotate(-90deg);
    fill: none;
    stroke-linecap: round;
  }


 .circle .circle__background {
   stroke: #e6e6e6;
 }

 .circle .circle__fill {
   stroke: #65c3de;
 }

templates.application.hbs

{{svg-circle size=120 progress=0}}

templates.components.basic-svg.hbs

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

templates.components.svg-circle.hbs

<circle class="circle__background"
  cx={{center}}
  cy={{center}}
  r={{radius}}
  strokeWidth={{strokeWidth}}
>
</circle>
<circle class="circle__fill"
  style={{dashStyle}}
  cx={{center}}
  cy={{center}}
  r={{radius}}
  strokeWidth={{strokeWidth}}
  strokeDashArray={{circumference}}
>
</circle>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}