React + SVG

by Jon Beebe

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="svg-container"></div>

SCSS

html, body {
  background-image: url(http://bglabs.evade.netdna-cdn.com/wp-content/uploads/2013/04/black-mosaic-tiles.png);
  width: 100%;
  height: 100%;
}

#svg-container {
  width: 400px;
  height: 400px; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript 1.7

/** @jsx React.DOM */
  'use strict';
  
  var substitute = function (str, obj) {
    var result = str;
    for(var key in obj) {
      if(obj.hasOwnProperty(key)) {
        var regex = new RegExp('\\${' + key + '}', 'g');
        result = result.replace(regex, obj[key]);
      }
    }
    return result;
  };

  var ReactLogo = React.createClass({

    getDefaultProps: function () {
      return {
        bgColor: '#222222',
        brandColor: '#61dafb',
        isInverse: false
      };
    },

    render: function () {
      return <div ref="svg" className="react-logo"></div>;
    },

    componentDidMount: function () {
      this.renderSvg();
    },

    componentDidUpdate: function () {
      this.renderSvg();
    },

    renderSvg: function () {
      var options = {
        bgColor: this.props.isInverse ? this.props.brandColor : this.props.bgColor,
        brandColor: this.props.isInverse ? this.props.bgColor : this.props.brandColor
      };
      var svgString = this.createSvgString(options);
      var elem = this.refs.svg.getDOMNode();
      elem.innerHTML = svgString;
    },

    createSvgString: function (options) {
      var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 400 400" version="1.1">'
        + '   <path'
        + '     fill="${bgColor}"'
        + '     d=" M 0.00 0.00 L 400.00 0.00 L 400.00 400.00 L 0.00 400.00 L 0.00 0.00 Z"'
        + '     id="path4" />'
        + '  <path'
        + '     d="M 162.59375 46.875 C 160.07946 46.887497 157.54609 47.099219 155.03125 47.5 C 144.51875 49.0375 134.80625 54.9125 128.40625 63.375 C 120.31875 73.9375 116.925 87.29375 115.625 100.34375 C 113.45 123.30625 117.5875 146.2375 122.625 168.5625 C 101.675 175.025 80.7375 182.5875 62.5 195 C 51.75 202.35 41.66875 211.475 35.84375 223.3125 C 30.31875 234.25 29.8875 247.5875 34.8125 258.8125 C 40.4375 271.8625 51.26875 281.8 62.84375 289.625 C 81.00625 301.7375 101.65 309.55625 122.5 315.65625 C 117.6125 338.63125...