svg filter

controllers.application.js

import Ember from 'ember';

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

styles.app.css

body {
    color: #fff; background: #666;
    font-family: serif; font-size: 30px;
    font-weight: bold;
}

p {
  	color: #000;
    -webkit-filter: url(#my-drop-shadow);
    filter: url(#my-drop-shadow);
    padding: 10px;
    border: 1px solid #fff;
}

.donut__arc {
  -webkit-filter: url(#my-drop-shadow);
  filter: url(#my-drop-shadow);
  fill: red;
  background-color: red;
}

.donut__background {
  fill: #fff;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>

<filter id="my-drop-shadow" x="0" y="0" width="200%" height="200%">

    <feColorMatrix type="matrix" values=
                "0 0 0 0   1
                 0 0 0 0   1
                 0 0 0 0   1
                 0 0 0 1   0" in="SourceGraphic" result="coloredOut" />
    <feMorphology operator="dilate" radius="2" in="coloredOut" result="dilatedOut" />
    <feGaussianBlur stdDeviation="2" in="dilatedOut" result="coloredBlur"/>
    <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>

<filter id="pie-shrink">
  <feMorphology in1="SourceAlpha" operator="erode" radius="1" result="morphAlpha"></feMorphology>
  <feComposite operator="in" in="SourceGraphic" in2="morphAlpha"></feComposite>
</filter>

</defs>
</svg>

<p>Hello there.</p>
{{partial "donut-chart"}}
{{outlet}}
<br>
<br>

templates.donut-chart.hbs

<svg width="200" height="180">
  <g transform="translate(90,90)">
    <circle class="donut__background" cx="0" cy="0" r="79" fill-opacity="0.995"></circle>
  </g>
  <g class="arc" transform="translate(90,90)">
    <g>    
      <path d="M0,85A85,85 0 1,1 0,-85A85,85 0 1,1 0,85M0,73A73,73 0 1,0 0,-73A73,73 0 1,0 0,73Z" id="arc-0" class="donut__arc" fill-opacity="1"></path>
    </g>
  </g>
</svg>

twiddle.json

{
  "version": "0.10.5",
  "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.8.0",
    "ember-data": "2.8.0",
    "ember-template-compiler": "2.8.0",
    "ember-testing": "2.8.0"
  },
  "addons": {}
}