React + mojs hot dogs2

index.html

<div id="js-app-root"></div>

react-mojs-hot-dogs2.markdown

React + mojs hot dogs2

A Pen by Sarah Drasner on CodePen.

License.

script.babel

const { Component, Children, PropTypes } = React;
const { render } = ReactDOM;

const Burger = React.createClass({
  render() {
    return (<div></div>);
  },
  
  shouldComponentUpdate () {
    this.props.isBurgerPlay && this._burger.replay();
    return false;
  },
  
  componentDidMount () {
    const dur = 3500,
          dur2 = dur - 500;
    
    //caching the hotdog shapes
    class BurgerBase extends mojs.CustomShape {
      getShape () { return '<path d="M96.9,52.2c-.4-2.1-2.8-2.8-4.6-3.3l-1.7-.4C89.5,29.9,74.5,18.9,50,18.9S10.5,29.9,9.3,48.5l-1.7.4c-1.8.5-4.1,1.2-4.6,3.3s1.2,3.5,3,4.2l3,.9a7.7,7.7,0,0,0,.7,12.8c1.6,7.7,7,12.8,14.4,12.8H76c7.3,0,12.7-5.1,14.3-12.8A7.7,7.7,0,0,0,91,57.3l3-.9C95.8,55.7,97.4,54.4,96.9,52.2Z" />'; }
    }
    mojs.addShape( 'burgerbase', BurgerBase ); 
    
    class Lettuce extends mojs.CustomShape {
      getShape () { return '<path d="M2.1 34.7L91.4 30.9 95.9 34.7 78.3 49.5 13.3 48.5 2.1 34.7z" />'; }
    }
    mojs.addShape( 'lettuce', Lettuce );
    
    class Cheese extends mojs.CustomShape {
      getShape () { return '<path d="M53 52.2L64.4 61.9 74.3 51.8 53 52.2z" />'; }
    }
    mojs.addShape( 'cheese', Cheese );
    
    class Tomato extends mojs.CustomShape {
      getShape () { return '<path d="M23,50.3l32.3.7S37.3,67,23,50.3Z" />'; }
    }
    mojs.addShape( 'tomato', Tomato ); 
    
    class BurgerTop extends mojs.CustomShape {
      getShape () { return ' <path d="M98.9,52.3c-.4-2.1-2.9-2.9-4.7-3.4l-1.8-.4C91.1,29,75.5,17.5,50,17.5S8.9,29,7.6,48.4l-1.8.4c-1.8.5-4.3,1.3-4.7,3.4s1.2,3.7,3.1,4.4l3.1.9A8,8,0,0,0,8.1,71C9.7,79,15.4,84.3,23,84.3h54c7.6,0,13.3-5.3,14.9-13.4a8,8,0,0,0,.8-13.4l3.1-.9C97.7,55.9,99.4,54.5,98.9,52.3ZM50,21.5c11.3,0,37.1,2.7,38.4,27.5H11.6C12.9,24.2,38.7,21.5,50,21.5Zm2,30.6a19.9,19.9,0,0,1-13,4.4,19.9,19.9,0,0,1-13-4.4Zm25,28.2H23c-5.1,0-9-3.2-10.6-8.3H51.7a33.8,33.8,0,0,1,10.9,7.4A2,2,0,0,0,64,80h0a2,2,0,0,0,1.4-.6A27.9,27.9,0,0,1,80.7,72h6.8C85.9,77.1,82.1,80.3,77.1,80.3ZM59.9,72h8.7A28.7,28.7,0,0,0,64,75.3,39.5,39.5,0,0,0,59.9,72ZM88,54.7a10.9,10.9,0,0,0-5.1,3.5c-1.1,1.2-2.7,3.5-4.6,3.4s-3.8-1.4-5.6-2a7.9,7.9,0,0,0-6.4.3c-2,1-3.5,2.8-5.5,3.7s-3.6-.5-5.1-1.4A11.5,11.5,0,0,0,50,60c-2.2,0-4.1,1.1-5.9,2.2s-3.4,2.1-5.4.9-3.5-2.7-5.5-3.6a8.3,8.3,0,0,0-6.2.1L23.6,61a4.7,4.7,0,0,1-2.4.5c-1.9-.4-3.2-2.3-4.4-3.6a10.8,10.8,0,0,0-5.2-3.3C9.7,54,7.8,53.6,5.9,53l2.2-.6a2,2,0,0,0,1.4.6h10c2.2,4.1,11.1,6,19.5,6s17.3-1.9,19.5-6h32a2,2,0,0,0,1.4-.6l2.2.6C92.1,53.7,90,54,88,54.7Z" />'; }
    }
    mojs.addShape( 'burgertop', BurgerTop ); 

    const burger_opts = {
      radius:   { 0: '-400' },
      count:    9,
    };
    
    const burger_child_opts = {
      angle:      { 750: 0 },
      duration:   dur,
      radius:     {75 : 20}
    };

    const burger1 = new mojs.Burst({
      ...burger_opts,
      children: {
        ...burger_child_opts,
        shape:      'burgerbase',
        fill:       '#e89221'
      }
    });
    
    const burger2 = new mojs.Burst({
      ...burger_opts,
      children: {
        ...burger_child_opts,
        shape:      'lettuce',
        fill:       '#1b8928'
      }
    });
    
    const burger3 = new mojs.Burst({
      ...burger_opts,
      children: {
        ...burger_child_opts,
        shape:      'cheese',
        fill:       '#f4de11'
      }
    });
    
    const burger4 = new mojs.Burst({
      ...burger_opts,
      children: {
        ...burger_child_opts,
        shape:      'tomato',
        fill:       '#f24314'
      }
    });
    
    const burger5 = new mojs.Burst({
      ...burger_opts,
      children: {
        ...burger_child_opts,
        shape:      'burgertop',
        fill:       '#7C0808'
      }
    });

    const burst4 = new mojs.Burst({
      radius:   { 0: 200 },
      angle:    { 200 : 0 },
      children: {
        shape:        'zigzag',
        fill:         'none',
        stroke:       'cyan',
        points:       '6',
        opacity:      { 1 : 0 },
        radius:       20,
        duration:     dur2
      }
    });

    this._burger = new mojs.Timeline()
    .add( burger1, burger2, burger3, burger4, burger5, burst4);
    }
      
});

const Hotdog = React.createClass({
  render() {
    return (<div></div>);
  },
  
  shouldComponentUpdate () {
    this.props.isDogPlay && this._dog.replay();
    return false;
  },
  
  componentDidMount () {
    const dur = 3500,
          dur2 = dur - 500;
    
    //caching the hotdog shapes
    class DogBase extends mojs.CustomShape {
      getShape () { return '<path d="M81.9,6.9c-2.5-2.5-5.1-3.7-7.8-3.7c-7.5,0-14.2,9.1-21.9,19.5c-4.1,5.5-8.4,11.4-12.9,16 c-4.7,4.7-10.5,8.9-16.1,13C13,59.2,4.2,65.7,3.7,73c-0.2,3,1,5.9,3.7,8.5c2.1,2.1,4.4,3.4,6.9,3.9c0.5,2,1.6,3.9,3.5,5.8 c2.9,2.9,6.3,4.3,10,4.3c10.9,0,23.5-11.8,40.3-28.5c10.2-10.2,19.1-19.4,24.2-27.6c5.9-9.4,5.9-16.8,0.1-22.7 C84.2,16.3,81.9,6.9,81.9,6.9z"/>'; }
    }
    mojs.addShape( 'dogbase', DogBase ); 
    
    class DogMid extends mojs.CustomShape {
      getShape () { return '<path d="M93.6,16.3c-2.2-2.2-4.6-3.6-7.1-3.9c-0.7-2.1-1.8-4.3-3.7-6.2c-2.6-2.6-5.3-3.8-8.1-3.8 c-7.7,0-14.7,9.4-22.6,20.2c-4.3,5.7-8.6,11.8-13.3,16.5c-4.8,4.8-10.9,9.2-16.6,13.4C11.7,60.2,2.6,66.9,2,74.4 c-0.2,3.1,1,6.1,3.8,8.7c2.1,2.1,4.6,3.5,7.2,4c0.6,2,1.7,4,3.6,5.9c3,3,6.5,4.5,10.3,4.5c11.2,0,24.3-12.2,41.6-29.5 c10.5-10.5,19.7-20.1,25-28.5C99.5,29.9,99.5,22.3,93.6,16.3z M12.8,83.7c-1.7-0.6-3.1-1.5-4.6-2.9c-2-2-3-4-2.8-6.2 c0.4-5.9,9.4-12.5,18.8-19.5c5.8-4.4,12-8.7,16.8-13.7c4.9-4.9,9.3-11,13.7-16.8C61.9,15,68.6,5.9,74.6,5.9c1.9,0,3.8,0.9,5.7,2.8 c1.2,1.2,2.1,2.6,2.7,3.9c-2.2,0.4-4.4,1.7-6.4,3.4c-0.4-0.7-1-1.3-1.7-2c-2.8-2.8-6.4-3.1-10.3,0.8c-3.8,3.8,0.7,2.8-24.9,28.5 C14.1,68.7,15.1,64.2,11.3,68c-3.8,3.8-3.6,7.5-0.8,10.3c1,1,2,1.7,3.1,2.2C13.2,81.6,12.9,82.7,12.8,83.7z M62.4,32 c0,0.3,0,0.6,0,0.9c-1.6,2-3,4.1-4.6,6.2c-1,0.3-2,0.4-3,0.2c-1.6-0.3-3.6-2-5.5-0.2c-2,2-0.4,4.4-0.2,6.2c0.2,1.7-0.3,3.2-1.7,4.9 c0,0.1-0.1,0.1-0.2,0.2l-0.1,0.1L47,50.6c0,0,0,0-0.1,0.1c-1.8,1.6-3.4,2-5.2,1.6c-1.6-0.3-3.6-2-5.5-0.2c-2,2-0.4,4.4-0.2,6.2 c0.1,0.6,0,1.1,0,1.7c-1,0.8-2,1.5-3,2.2c-1.6,1.1-3.1,2.2-4.6,3.4c-1.6-0.3-3.5-2-5.4-0.1c-1.6,1.5-1,3.2-0.6,4.8 c-1.1,0.9-2.1,1.9-3.1,2.8c-0.1-1.5-0.9-3.1-0.9-4.1c0-1.9,0.8-3.9,2.5-5.6c1.7-1.7,3.7-2.5,5.7-2.4c1.2,0.1,3.8,1.9,5.2,0.8 c0.1-0.1,0.1-0.1,0.2-0.2c0.1-0.1,0.1-0.1,0.2-0.2c1.2-1.5-0.4-4.4-0.4-5.7c0-1.9,0.8-3.9,2.5-5.6c1.7-1.7,3.7-2.5,5.7-2.4 c1.2,0.1,3.8,1.9,5.2,0.8l0.1-0.1l0.1-0.1c1.2-1.5-0.4-4.4-0.4-5.7c0-1.9,0.8-3.9,2.5-5.6c1.7-1.7,3.7-2.5,5.7-2.4 c1.2,0.1,3.8,1.9,5.2,0.8c0.1-0.1,0.1-0.1,0.2-0.2c0.1-0.1,0.1-0.1,0.2-0.2c1.2-1.5-0.4-4.4-0.4-5.7c0-1.9,0.8-3.9,2.5-5.6 c1.7-1.7,3.7-2.5,5.7-2.4c0.9,0.1,2.7,1.1,4,1.1c-0.9,1-1.7,2.1-2.6,3.2c-1.7-0.1-3.5-1.3-5.2,0.3C60.6,27.8,62.2,30.2,62.4,32z M90.6,38c-5,8.2-14.1,17.4-24.5,27.8C50,81.9,36.9,94.3,26.9,94.3c-3,0-5.6-1.1-8-3.5c-1.1-1.1-1.9-2.2-2.4-3.4 c-0.1-0.2-0.2-0.6-0.3-0.8l0,0c0-0.1,0-0.1,0-0.2C16.1,86,16,85.5,16,85.1c-0.2-2.5,0.9-5.9,7.6-11.7l0,0c3.2-2.8,7.1-5.6,11.1-8.5 c5.9-4.3,12-8.7,16.9-13.7s9.3-11,13.7-16.9c2.2-3,4.5-6.1,6.6-8.7l-0.1,0.1c0.1-0.1,0.2-0.2,0.2-0.3c-1.7,2.1-3.4,4.4-5.2,6.8 c1.8-2.5,3.5-4.8,5.2-6.8c0.1-0.1,0.1-0.2,0.2-0.3c0-0.1,0.1-0.1,0.1-0.2c0-0.1,0.1-0.1,0.1-0.2c1.5-1.8,3-3.5,4.7-4.9l0.1-0.1 c0.2-0.2,0.4-0.3,0.7-0.6c0.4-0.3,0.8-0.7,1.1-0.9c0,0,0,0,0.1,0c0,0,0,0-0.1,0c1.5-1.1,2.9-1.9,4.3-2.2c0.6-0.1,1-0.2,1.6-0.2 s1.1,0.1,1.8,0.2c1.3,0.4,2.8,1.3,4.1,2.7C96,23.6,95.8,29.5,90.6,38z"/>'; }
    }
    mojs.addShape( 'dogmid', DogMid );
    
    class Mustard extends mojs.CustomShape {
      getShape () { return '<path d="M58.1,29.4c0-1.9,0.8-3.9,2.5-5.6c1.7-1.7,3.7-2.5,5.7-2.4c0.9,0.1,2.7,1.1,4,1.1c-0.9,1-1.7,2.1-2.6,3.2 c-1.7-0.1-3.5-1.3-5.2,0.3c-2,2-0.4,4.4-0.2,6.2c0,0.3,0,0.6,0,0.9c-1.6,2-3,4.1-4.6,6.2c-1,0.3-2,0.4-3,0.2 c-1.6-0.3-3.6-2-5.5-0.2c-2,2-0.4,4.4-0.2,6.2c0.2,1.7-0.3,3.2-1.7,4.9c0,0.1-0.1,0.1-0.2,0.2L47,50.8l-0.1,0.1c0,0,0,0-0.1,0.1 c-1.8,1.6-3.4,2-5.2,1.6c-1.6-0.3-3.6-2-5.5-0.2c-2,2-0.4,4.4-0.2,6.2c0.1,0.6,0,1.1,0,1.7c-1,0.8-2,1.5-3,2.2 c-1.6,1.1-3.1,2.2-4.6,3.4c-1.6-0.3-3.5-2-5.4-0.1c-1.6,1.5-1,3.2-0.6,4.8c-1.1,0.9-2.1,1.9-3.1,2.8c-0.1-1.5-0.9-3.1-0.9-4.1 c0-1.9,0.8-3.9,2.5-5.6c1.7-1.7,3.7-2.5,5.7-2.4c1.2,0.1,3.8,1.9,5.2,0.8c0.1-0.1,0.1-0.1,0.2-0.2c0.1-0.1,0.1-0.1,0.2-0.2 c1.2-1.5-0.4-4.4-0.4-5.7c0-1.9,0.8-3.9,2.5-5.6c1.7-1.7,3.7-2.5,5.7-2.4c1.2,0.1,3.8,1.9,5.2,0.8l0.1-0.1l0.1-0.1 c1.2-1.5-0.4-4.4-0.4-5.7c0-1.9,0.8-3.9,2.5-5.6c1.7-1.7,3.7-2.5,5.7-2.4c1.2,0.1,3.8,1.9,5.2,0.8c0.1-0.1,0.1-0.1,0.2-0.2"/>'; }
    }
    mojs.addShape( 'mustard', Mustard ); 

    const dog_opts = {
      radius:   { 0: 400 },
      count:    12,
    };
    
    const dog_child_opts = {
      angle:      { 750: 0 },
      duration:   dur,
      radius:     {75 : 20}
    };

    const dog1 = new mojs.Burst({
      ...dog_opts,
      children: {
        ...dog_child_opts,
        shape:      'dogbase',
        fill:       '#E89221'
      }
    });
    
    const dog2 = new mojs.Burst({
      ...dog_opts,
      children: {
        ...dog_child_opts,
        shape:      'dogmid',
        fill:       '#7C0808'
      }
    });
    
    const dog3 = new mojs.Burst({
      ...dog_opts,
      children: {
        ...dog_child_opts,
        shape:      'mustard',
        fill:       '#F2D60A'
      }
    });

    const burst4 = new mojs.Burst({
      radius:   { 0: 200 },
      angle:    { 200 : 0 },
      count:    12,
      children: {
        shape:        'zigzag',
        fill:         'none',
        stroke:       'magenta',
        points:       '6',
        opacity:      { 1 : 0 },
        radius:       20,
        duration:     dur2
      }
    });

    this._dog = new mojs.Timeline()
    .add( dog1, dog2, dog3, burst4);
    }
});

const App = React.createClass({
  getInitialState() {
    return { 
      isHotDogPlay: true,
      isBurgerPlay: true
    }
  },
  
  _dogPlay() { this.setState({ isHotDogPlay: true }); },
  _resetDogPlay() { this.setState({ isHotDogPlay: false }); },
  
  _burgerPlay() { this.setState({ isBurgerPlay: true }); },
  _resetBurgerPlay() { this.setState({ isBurgerPlay: false }); },
                              
  render() {
    return ( <div className="buttonGroup">
              <button onClick={this._dogPlay}>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="50" height="50">
                  <path d="M93.77,42.029c-1.897-3.231-5.761-4.589-9.179-3.449c-0.181-0.48-0.4-0.955-0.674-1.418 c-2.135-3.622-5.209-5.536-8.891-5.536c-1.444,0-2.974,0.306-4.547,0.91c-7.235,2.774-14.36,4.18-21.178,4.18 c-6.563,0-13.403-1.379-21.527-4.34c-1.363-0.497-2.713-0.75-4.012-0.75c-3.568,0-6.664,1.87-8.719,5.266 c-0.317,0.524-0.577,1.059-0.79,1.596c-3.343-0.842-6.963,0.615-8.714,3.773c-2.086,3.765-0.726,8.508,3.038,10.595 c0.604,0.334,1.214,0.658,1.828,0.975c-0.296,1.607-0.215,3.272,0.274,4.883c0.832,2.744,2.715,4.995,5.299,6.339 c9.402,4.887,21.243,7.578,33.341,7.578c12.027,0,23.374-2.527,32.814-7.309c2.6-1.315,4.505-3.547,5.368-6.283 c0.48-1.525,0.59-3.104,0.36-4.642c1.063-0.543,2.114-1.104,3.133-1.701C94.706,50.516,95.948,45.741,93.77,42.029z M23.762,36.007 c0.786,0,1.631,0.164,2.513,0.484c8.619,3.142,15.936,4.605,23.027,4.605c7.355,0,15.009-1.504,22.746-4.471 c1.07-0.41,2.072-0.619,2.979-0.619c2.073,0,3.795,1.138,5.118,3.38c0.239,0.407,0.404,0.809,0.5,1.204 c-8.121,4.149-18.069,6.384-29.633,6.635c-12.16,0.279-23.17-2.055-32.779-6.897c0.153-0.436,0.356-0.835,0.558-1.169 C19.661,37.722,21.23,36.007,23.762,36.007z M83.38,57.739c-0.51,1.618-1.646,2.941-3.199,3.727 c-8.838,4.478-19.511,6.844-30.862,6.844c-11.417,0-22.55-2.52-31.349-7.093c-1.543-0.802-2.665-2.138-3.156-3.759 c-0.478-1.574-0.303-3.241,0.494-4.69c1.2-2.185,3.926-2.644,6.001-2.644c1.292,0,2.674,0.186,3.996,0.535 c8.654,2.291,16.724,3.453,23.988,3.453c8.111,0,16.087-1.124,23.707-3.34c1.188-0.346,2.479-0.528,3.729-0.528 c1.416,0,4.854,0.272,6.208,2.802C83.717,54.503,83.874,56.171,83.38,57.739z"/>
                </svg>
              </button>
             <button onClick={this._burgerPlay}>
              <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100"><path d="M82.191,46.403c0.626-1.154,0.976-2.447,0.976-3.903c0-11.364-13.329-19-33.167-19 c-20.148,0-33.167,7.458-33.167,19c0,1.437,0.338,2.717,0.949,3.859c-0.624,1.604-0.949,3.321-0.949,5.141 c0,0.172,0.02,0.335,0.029,0.502c-0.014,0.252-0.029,0.502-0.029,0.758c0,7.987,2.404,13.955,6.953,17.259 c6.373,4.63,18.056,6.738,26.214,6.738s19.842-2.108,26.214-6.738c4.549-3.304,6.953-9.271,6.953-17.259 c0-0.249-0.016-0.494-0.03-0.74c0.01-0.173,0.03-0.342,0.03-0.52C83.167,49.703,82.831,47.999,82.191,46.403z M73.862,66.782 c-5.398,3.923-16.09,5.975-23.862,5.975c-7.771,0-18.464-2.052-23.863-5.975c-2.219-1.612-3.761-4.187-4.59-7.566 c1.791,1.159,3.988,2.075,6.418,2.792l1.841,4.497c0.314,0.767,1.056,1.242,1.851,1.242c0.174,0,0.35-0.022,0.525-0.07l12.149-3.302 C46.332,64.464,48.251,64.5,50,64.5c8.721,0,21.592-0.842,28.453-5.284C77.624,62.596,76.082,65.17,73.862,66.782z M50,27.5 c16.649,0,28.43,5.798,29.133,14.2c0.022,0.264,0.034,0.531,0.034,0.8c0,0.28-0.038,0.553-0.097,0.823 c-0.076,0.343-0.197,0.678-0.367,1.003c-0.156,0.301-0.353,0.594-0.586,0.879c-0.21,0.256-0.451,0.505-0.722,0.748 c-0.231,0.208-0.481,0.412-0.756,0.609C72.342,49.652,62.811,51.5,50,51.5c-12.878,0-22.439-1.868-26.704-4.987 c-0.277-0.203-0.533-0.411-0.765-0.624c-0.266-0.245-0.5-0.497-0.705-0.755c-0.23-0.289-0.42-0.586-0.571-0.892 c-0.17-0.346-0.29-0.701-0.355-1.066c-0.04-0.222-0.067-0.447-0.067-0.676c0-0.326,0.015-0.646,0.043-0.96 C21.755,31.851,35.939,27.5,50,27.5z M79.167,51.5c0,0.18-0.014,0.357-0.039,0.533c-0.566,4.046-7.613,6.948-18.881,8.016 l2.277-0.619c1.066-0.289,1.695-1.389,1.405-2.454c-0.289-1.066-1.386-1.696-2.454-1.405l-6.044,1.643l-11.536,3.136l-5.715,1.553 l-4.898,1.332l-0.443,0.12l-0.087-0.213l-0.916-2.237l-0.928-2.268l-1.04-2.54l-0.35-0.854c-0.419-1.021-1.583-1.511-2.609-1.093 c-1.022,0.418-1.512,1.586-1.093,2.608l0.094,0.229c-3.003-1.339-4.768-3.017-5.038-4.958c-0.024-0.174-0.038-0.35-0.038-0.528 c0-0.575,0.052-1.13,0.14-1.67c0.092,0.066,0.186,0.132,0.281,0.196C28.037,54.637,41.156,55.5,50,55.5 c8.836,0,21.938-0.862,28.727-5.461c0.1-0.067,0.196-0.135,0.293-0.203C79.116,50.379,79.167,50.934,79.167,51.5z"/><path d="M27.601,40.87c0.104,0.103,0.214,0.193,0.333,0.269c0.325,0.207,0.694,0.324,1.071,0.324c0.438,0,0.879-0.143,1.248-0.438 l0.625-0.5c0.351-0.281,0.575-0.657,0.68-1.061c0.022-0.084,0.042-0.168,0.053-0.254c0.064-0.516-0.07-1.057-0.421-1.496 c-0.053-0.066-0.116-0.121-0.175-0.179c-0.063-0.061-0.127-0.119-0.197-0.17c-0.711-0.53-1.713-0.545-2.439,0.037l-0.625,0.5 c-0.328,0.263-0.55,0.608-0.664,0.982c-0.049,0.163-0.07,0.331-0.077,0.5c-0.019,0.464,0.115,0.937,0.428,1.328 C27.49,40.772,27.548,40.817,27.601,40.87z"/><path d="M34.71,36.596c0.158,0.657,0.626,1.156,1.211,1.387c0.07,0.028,0.142,0.05,0.216,0.07c0.167,0.045,0.339,0.075,0.516,0.075 c0.155,0,0.312-0.018,0.469-0.056l0.64-0.154c0.295-0.071,0.555-0.208,0.777-0.386c0.038-0.03,0.072-0.064,0.108-0.097 c0.512-0.476,0.767-1.2,0.591-1.929c-0.012-0.049-0.034-0.092-0.048-0.139c-0.006-0.018-0.012-0.035-0.018-0.052 c-0.335-0.958-1.34-1.531-2.346-1.286l-0.64,0.154c-0.944,0.227-1.568,1.089-1.529,2.024c0.002,0.049,0.014,0.099,0.02,0.148 C34.686,36.436,34.69,36.516,34.71,36.596z"/><path d="M35.814,45.203c0.327,0,0.658-0.081,0.964-0.25l0.466-0.257c0.967-0.534,1.318-1.75,0.785-2.717 c-0.533-0.967-1.75-1.317-2.717-0.785l-0.466,0.257c-0.967,0.534-1.318,1.75-0.785,2.717C34.426,44.83,35.109,45.203,35.814,45.203z"/></svg>
              </button>
        
              <Hotdog isDogPlay={this.state.isHotDogPlay} onComplete={this._resetDogPlay}/>
              <Burger isBurgerPlay={this.state.isBurgerPlay} onComplete={this._resetBurgerPlay}/> 
            </div>);
  }
});

render(<App />, document.querySelector('#js-app-root'));

scripts

<script src="https://cdn.jsdelivr.net/mojs/0.288.1/mo.min.js"></script>
<script src="http://fb.me/JSXTransformer-0.14.0.js"></script>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>

style.css

html,
body {
  background: #333;
}

.buttonGroup {
  left: calc(50vw - 100px);
  bottom: 20px;
  position: absolute;
}

pre {
  color: grey;
}

button {
  background: orange;
  display: inline-block;
  box-shadow: none;
  border: none;
  padding: .25em 1em;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  margin: 0 5px;
}