JSFiddle - React, Tailwind, and code Playground

HTML

<h1>SVG with Knockout</h1>
<a href="http://vuejs.org/examples/svg.html">Vue.js SVG Example</a> を Knockout に移植しました。

<div id="demo">

	<svg width="200" height="200">
		<polygon data-bind="attr: { points: points }"></polygon>
		<circle cx="100" cy="100" r="80"></circle>
		<!--ko foreach: stats-->
		<text data-bind="attr: { x: labelX, y: labelY }, text: label"></text>
		<!--/ko-->
	</svg>

	<div data-bind="foreach: stats">
        <div>
            <label data-bind="text: label"></label>
            <input type="range" data-bind="value: value" min="0" max="100" />
            <span data-bind="text: value"></span>
        </div>
	</div>

</div>

CSS

body {
	font-family: Helvetica Neue, Arial, sans-serif;
}

polygon {
	fill: #42b983;
	opacity: .75;
}

circle {
	fill: transparent;
	stroke: #999;
}

text {
	font-family: Helvetica Neue, Arial, sans-serif;
	font-size: 10px;
	fill: #666;
}

label {
	display: inline-block;
	margin-left: 10px;
	width: 20px;
}

CoffeeScript

AppViewModel = ->
  self = this
  self.stats = [
    label: "A"
    value: 100
  ,
    label: "B"
    value: 100
  ,
    label: "C"
    value: 100
  ,
    label: "D"
    value: 100
  ,
    label: "E"
    value: 100
  ,
    label: "F"
    value: 100
   ].map((stat, i) ->
    new StatViewModel(stat.label, stat.value, i)
  )
  self.points = ko.computed(->
    self.stats.map((stat, i) ->
      point = stat.point()
      point.x + "," + point.y
    ).join " "
  )
StatViewModel = (label, value, index) ->
  self = this
  self.label = ko.observable(label)
  self.value = ko.observable(value)
  self.point = ko.computed(->
    x = 0
    y = -self.value() * 0.8
    angle = Math.PI / 3 * index
    cos = Math.cos(angle)
    sin = Math.sin(angle)
    tx = x * cos - y * sin + 100
    ty = x * sin + y * cos + 100
    x: tx
    y: ty
  )
  self.labelX = ko.computed(->
    self.point().x - 4
  )
  self.labelY = ko.computed(->
    self.point().y + 4
  )
App = new AppViewModel()
ko.applyBindings App