Simple example of an template-less Ember component expanding on https://gist.github.com/kselden/8301014. Requires https://gist.github.com/kselden/7586144 to add min/max to input helper

color-swatch.js

var ColorSwatchComponent = Ember.Component.extend({
  width: 100,
  height: 100,
  r: 0,
  g: 0,
  b: 0,

  color: function () {
    return 'rgb('+this.get('r')+','+this.get('g')+','+this.get('b')+')';
  }.property('r','g','b'),

  tagName: 'svg',
  attributeBindings: ['width', 'height'],

  beforeRender: function (buffer) {
    buffer.attr('version','1.1');
    buffer.attr('viewBox', '0 0 36 31');
    this._super(buffer); // renders tag
  },

  render: function (buffer) {
    buffer.push('<path fill="'+ this.get('color')+'" d="M31.432,14.631c1.067-1.623,0.521-3.378-1.007-4.392c-1.684-1.115-3.489-0.815-5.125,0.26,c1.048-0.688-1.7-3.339-1.725-3.322c1.766-1.256,2.819-2.936,1.541-5.029c-2.525-4.138-7.545,0.398-9.873,2.388,c-0.909-1.969-3.646-3.224-5.721-1.271c-2.059,1.938-3.606,4.096-5.33,6.309c-1.75,2.248-7.033,9.83-1.172,10.842,c-1.257,2.27-2.388,4.994,0.423,6.645c3.096,1.815,4.635-1.351,5.911-3.623c-0.277,2.65,2.648,5.021,5.179,3.854,c1.672-0.771,1.666-3.165,2.438-4.634c-0.538,1.021,0.688,2.708,1.476,3.246c2.081,1.422,3.68-0.104,5.181-1.452,c1.968,1.478,4.54,1.009,5.616-1.32c0.535-1.157,1.002-2.083,1.855-3.053C32.527,18.454,33.131,16.35,31.432,14.631z"/>');
  },

  colorDidChange: function () {
    this.$('path').attr('fill', this.get('color'));
  }.observes('color')
});

export default ColorSwatchComponent;

index.hbs

<p>
  red: {{input type="range" value=red min="0" max="255"}} {{red}}
</p>

<p>
  green: {{input type="range" value=green min="0" max="255"}} {{green}}
</p>

<p>
  blue: {{input type="range" value=blue min="0" max="255"}} {{blue}}
</p>

<p>
  size: {{input type="range" value=size min="100" max="200"}} {{size}}
</p>

{{color-swatch r=red g=green b=blue width=size height=size}}