React + SVG Sawtooth

HTML

<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<div id="sawtooth--sm"></div>
<div id="sawtooth--med"></div>
<div id="sawtooth--lg"></div>

JavaScript 1.7

/** @jsx React.DOM */
'use strict';

var SawtoothSvgMixin = {

  renderSawtoothContainer: function () {
    return <div className="sawtooth-container" ref="sawtoothContainer"></div>;
  },

  insertSawtooth: function () {
    // Until React fully supports svg we simply append the svg portion after
    // React has rendered the component.
    var e = this.refs.sawtoothContainer.getDOMNode();
    e.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="8">'
    + ' <style type="text/css">'
    + ' '
    + ' .svg-triangle-rect {'
    + '   fill: url(#svg-triangle-pattern);'
    + ' }'
    + ' '
    + ' </style>'
    + ' <pattern id="svg-triangle-pattern" width="16" height="8" patternUnits="userSpaceOnUse">'
    + '   <path class="svg-triangle" d="M0,0 L8,8 16,0"></path>'
    + ' </pattern>'
    + ' <rect class="svg-triangle-rect" width="100%" height="100%"></rect>'
    + '</svg>';
  }

};

var MyComponent = React.createClass({
  
  mixins: [SawtoothSvgMixin],

  render: function () {
    return <div>
      {this.renderSawtoothContainer()}
    </div>;
  },

  componentDidMount: function () {
    this.insertSawtooth();
  }
  
});

React.renderComponent(
  <MyComponent />, 
  document.getElementById('sawtooth--sm')
);

React.renderComponent(
  <MyComponent />, 
  document.getElementById('sawtooth--med')
);

React.renderComponent(
  <MyComponent />, 
  document.getElementById('sawtooth--lg')
);