Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="TabTest"></div>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);


.Root {
  height: 100vh;
}

.Tabs {
  height: 100%;
  display: flex;
}

.TabList {
  width: 10rem;
  background: #263238;
}

.TabPanel {
  flex: 1;
  display: none;
  padding: 1.5rem 2rem;
}
.TabPanel.is-active {
  display: block;
}

.Button {
  display: inline-block;
  width: 100%;
  padding: 1rem 2rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
}
.Button:focus,
.Button:hover {
  outline: 0;
  background: #37474F;
}
.Tab.is-active .Button {
  background: #0000ff;
}


.TabbedArea {
  margin: 30px auto;
  width: 80%;
  font-family: sans-serif;
  color: #555;
  font-size: 14px;
  line-height: 24px;
}

.centered {
    text-align: center;
}
.Tab li {
  float: left;
  width: 20%;
}
.Tab a {
  display: block;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: #888;
  padding: 10px 0;
  border-bottom: 2px solid #888;
  background: #f7f7f7;
}
.Tab a:hover {
  background: #e6e6e6;
}
.Tab a.active {
  background: #cccccc;
}
.TabPane {
  padding: 30px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

// BB-8
$d: 140px;
.bb8 {
    position: absolute;
    margin-left: -$d/2;
    width: $d;

    bottom: 15%;
    left: 0;
}
.antennas {
    position: absolute;

    transition: left .6s;

    left: 28%;

&.right {
     left: 6%;
 }
}
.antenna {
    background: #e0d2be;
    position: absolute;
    width: 2px;

&.short {
     height: 20px;

     top: -65px;
     left: 50px;
 }
&.long {
     border-top: 6px solid #020204;
     border-bottom: 6px solid #020204;
     height: 36px;

     top: -80px;
     left: 56px;
 }
}
.head {
    background-color: ghostwhite;
    border-radius: 90px 90px 25px 25px;
    -moz-border-radius: 90px 90px 25px 25px;
    -webkit-border-radius: 90px 90px 25px 25px;
    height: 63px;
    margin-left: -45px;
    overflow: hidden;
    position: absolute;
    width: 104px;
    z-index: 1;

    top: -56px;
    left: 53%;
.stripe {
    position: absolute;
    width: 100%;
}
.stripe.one {
    background: #7699B7;
    height: 7px;
    opacity: .8;
    z-index: 1;

    top: 3px;
}
.stripe.two {
    background: #CD7640;
    height: 4px;

    top: 14px;
}
.stripe.three {
    background: #999;
    height: 4px;
    opacity: .5;

    bottom: 3px;
}

.stripe.detail {
    display: flex;
    width: 200px;
    bottom: 7px;
    left: -38%;
    transition: left .6s;
}

.stripe.detail.right {
  left: 0;
}

.detail {
  height: 7px;

  &.zero {
    background-color: #CD7640;
    width: 2%;
    margin-left: 3px;
  }

  &.one {
    background-color: #CD7640;
    width: 8%;
    margin-left: 3px;
  }

  &.two {
    background-color: #CD7640;
    width: 6%;
    margin-left: 5px;
  }

  &.three {
    background-color: #CD7640;
    width: 4%;
    margin-left: 45px;
    height: 5px;
    margin-top: 2px;
  }

  &.four {
    background-color: #CD7640;
    width: 10%;
    margin-left: 4px;
  }

  &.five {
    background-color: #CD7640;
    width: 2%;
    margin-left: 3px;
  }
}

.eyes {
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;

    transition: left .6s;

    left: 0;
}
.eyes.right {
    left: 36%;
}
.eye {
    border-radius: 50%;
    display: block;
    position: absolute;


&.one {
     background: #020204;
     border: 4px solid lightgray;
     height: 30px;
     width: 30px;

     top: 12px;
     left: 12%;
 }
&.one:after {
     background: white;
     border-radius: 50%;
     content: "";
     display: block;
     height: 3px;
     position: absolute;
     width: 3px;

     top: 4px;
     right: 4px;
 }

&.two {
     background-color: lightgrey;
     border: 1px solid #020204;
     height: 16px;
     width: 16px;

     top: 30px;
     left: 40%;

&:after {
     background: #020204;
     border-radius: 50%;
     content: "";
     display: block;
     height: 10px;
     position: absolute;
     width: 10px;

     top: 2px;
     left: 2px;
 }
}
}
}
.ball {
    background-color: ghostwhite;
    border-radius: 50%;
    height: $d+25;
    overflow: hidden;
    position: relative;
    width: $d+25;
}
.lines {
    border: 2px solid #B19669;
    border-radius: 50%;
    height: 400px;
    opacity: .6;
    position: absolute;
    width: 400px;

&.two {
     top: -10px;
     left: -250px;
 }
}
.ring {
    background: #CD7640;
    border-radius: 50%;
    height: 70px;
    margin-left: -35px;
    position: absolute;
    width: 70px;
&:after {
     background-color: ghostwhite;
     border-radius: 50%;
     content: "";
     display: block;
     height: 73%;
     margin-top: -36%;
     margin-left: -36%;
     position: absolute;
     width: 73%;

     top: 50%;
     left: 50%;
 }
&.one {
     margin-left: -40px;
     height: 90px;
     width: 100px;

     top: 2%;
     left: 42%;
 }
&.two {
     height: 40px;
     width: 80px;
     -ms-transform: rotate(50deg);
     -webkit-transform: rotate(50deg);
     transform: rotate(50deg);

     top: 65%;
     left: 8%;

&:after {
     top: 100%;
 }
}
&.three {
     height: 37px;
     width: 80px;
     -ms-transform: rotate(-50deg);
     -webkit-transform: rotate(-50deg);
     transform: rotate(-50deg);

     top: 68%;
     left: 84%;

&:after {
     top: 110%;
 }
}
}
.shadow {
    background: #3A271C;
    box-shadow: 5px 0 50px #3A271C;
    border-radius: 50%;
    height: $d/6;
    opacity: .25;
    position: absolute;
    width: $d;
    z-index: -1;

    left: 10px;
    bottom: -8px;
}

.instructions p {
  position: fixed;
  bottom: 10px;
  width: 100%;
  text-align: center;
}
/*End of bb-8*/

/*Sine*/
@import url('https://fonts.googleapis.com/css?family=Droid+Sans+Mono');

$primary-color: #ff9900;
$secondary-color: #e68a00;
$tertiary-color: #0000ff;
$background-color: #0000cc;

#container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
}

svg {
  stroke: $secondary-color;
  fill: transparent;
  stroke-width: 8px;
}
.grey {
  stroke: $tertiary-color;
  fill: transparent;
  stroke-width: 3px;
}
text {
  font-family: 'Droid Sans Mono', monospace;
  font-size: 20px;
  fill: $primary-color;
  stroke: $primary-color;
  stroke-width: 1px;
}


html, body {
  height: 100%;
}

body {
  font-family: 'Roboto';
  text-align: center;
  color: #f5f5f5;
}

/*end of sine*/


/*clock*/

$black: #ffffff;
$blue: #0000ff;
$dirtyWhite: #0000ff;
$darkPink: #e68a00;

.text {
	position: absolute;
	left: 10px;
	bottom: 10px;
}

.text, a {
	color: $dirtyWhite;
	font-weight: 100;
}

svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.textTime {
	fill: $dirtyWhite;
  stroke: $dirtyWhite;
	text-anchor: middle;
	alignment-baseline: middle;
	font-size: 1.5rem;
	font-weight: 100;
}

.outerRing {
	fill: none;
	stroke: $dirtyWhite;
	stroke-width: 2px;
	stroke-dasharray: 4px;
	opacity: .5;
}

.primCircle {
	fill: $black;
	stroke: $dirtyWhite;
	stroke-width: 10px;
}

.secCircle {
	fill: $blue;
	stroke: $black;
	stroke-width: 3px;
}

.spike {
	stroke: $dirtyWhite;
	stroke-width: 2px;
}

.triangle {
	fill: $darkPink;
}

/*end of clock*/
              
            
!

JS

              
                var CanvasChart = React.createClass({

    propTypes: {
        width: React.PropTypes.number.isRequired,
        height: React.PropTypes.number.isRequired,
        colorBar: React.PropTypes.string,
        animationSpeed: React.PropTypes.number,
        staggerDelay: React.PropTypes.number,
        hpadding: React.PropTypes.number,
        rotation: React.PropTypes.number,
        data: React.PropTypes.arrayOf(React.PropTypes.number)
    },

    componentDidMount: function () {
        // Init CreateJS
        var canvas = ReactDOM.findDOMNode(this.refs.canvas)
        this.stage = new createjs.Stage(canvas);
        createjs.Ticker.addEventListener('tick', this.stage);
        createjs.Ticker.setFPS(45);


        // Set Properties
        this.canvasWidth = this.stage.canvas.width;
        this.canvasHeight = this.stage.canvas.height;
        this.color = this.props.colorBar || '#0000ff';
        this.padding = this.props.hpadding || 1;
        this.animationSpeed = this.props.animationSpeed || 300;
        this.staggerDelay = this.props.staggerDelay || 20;
        this.rotation = this.props.rotation || 0;


        // Draw Chart first time
        if (this.props.data) {
            this.draw(this.props.data);
        }

    },

    /**
     * New Properties are received.
     * Remove previous Chart and draw a new one
     * @param nextProps
     */
    componentWillReceiveProps: function (nextProps) {
        this.hidePreviousChart(nextProps.data);
    },

    /**
     * Hide Current Chart with animations
     */
    hidePreviousChart: function (data) {

        // Remove previous tween applied to the chart
        createjs.Tween.removeTweens(this.group);

        var _grp = this.group;
        var _total = _grp.getNumChildren();

        // Remove previous chart
        for (var i = 0; i < _total; i++) {

            // Get a single bar reference and remove previous tweens
            var _bar = _grp.getChildAt(i);
            createjs.Tween.removeTweens(_bar);

            // Hide a Bar
            createjs.Tween.get(_bar)
                .wait(i * this.staggerDelay)
                .to({
                    y: this.canvasHeight,
                    scaleX: 3,
                    rotation: this.rotation
                }, this.animationSpeed, createjs.Ease.cubicInOut)
                .call(function(bar) {
                    _grp.removeChild(bar)
                }.bind(this),[_bar]);
        }

        // Draw next chart after previous animation
        var totalTime = this.animationSpeed + (_total * this.staggerDelay);
        createjs.Tween.get(_grp)
            .wait(totalTime)
            .call(this.draw,[data]);

    },

    /**
     * Draw a new chart
     * @param data
     */
    draw: function (data) {

        this.group = new createjs.Container();
        this.stage.addChild(this.group);

        // Total of bars
        var _total = data.length;

        // Bar width
        var _barWidth = (this.canvasWidth / _total) - this.padding;

        // Create and display bars
        for (var i = 0; i < _total; i++) {

            var _barHeight = this.canvasHeight * (data[i] / 100);

            // Draw a Rectangle
            var bar = new createjs.Graphics();
            bar.beginFill(this.color);
            bar.drawRect(0, 0, _barWidth, _barHeight);

            // Show the Bar and set the position (x,y)
            var barShape = new createjs.Shape(bar);
            barShape.x = (_barWidth + this.padding) * i;
            barShape.y = this.canvasHeight + _barHeight;
            barShape.rotation = this.rotation;

            // Add bar to this.stage
            this.group.addChild(barShape);

            // Show and animate the bar (with delay)
            createjs.Tween.get(barShape)
                .wait(i * this.staggerDelay)
                .to({
                    y: this.canvasHeight - _barHeight,
                    rotation: 0
                }, 1000, createjs.Ease.cubicInOut);
        }
    },


    /**
     * Render Function
     * @returns {XML}
     */
    render: function () {
        return (
            <canvas ref="canvas"
                    width={this.props.width}
                    height={this.props.height}></canvas>
        );
    }


});


/**
 * App (main component)
 * Render two <CanvasChart> components and generate random data
 */
var App = React.createClass({
    // Initial state
    getInitialState: function () {
        return {chartData: []};
    },
    // Component Mount (init)
    componentDidMount: function () {
        this.updateData(10, 15, 30, 100);
    },
    // Generate random data
    updateData(minBars, maxBars, minValue, maxValue) {
        var elements = [];
        // Random Total of Bars
        var totalBars = this.random(minBars, maxBars);
        for (var i = 0; i < totalBars; i++) {
            elements.push(this.random(minValue, maxValue)); // Random Value
        }
        this.setState({
            chartData: elements
        })
    },
    // Random between numbers
    random(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    },
    // render func
    render: function () {

        return <div>

            <CanvasChart colorBar="#e68a00"
                         width={500}
                         height={300}
                         animationSpeed={300}
                         staggerDelay={100}
                         hpadding={4}
                         rotation={90}
                         data={this.state.chartData}></CanvasChart>

            <hr/>
            <button className="btn btn-info"
                    onClick={this.updateData.bind(this, 10, 50, 10, 100)}>
                      Generate new data</button>
        </div>

    }
});

// I've seen a few of these BB-8 animations about, so I thought I'd take a shot at building one using React as a bit of an exercise. My favorite thing to do is draw circles around him to make him do a little jig, but I'm easily amused.

class App2 extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            droidX: 0,
            mouseX: 0,
            toTheRight: true,
            speed: 2,
            accelMod: 1
        }
    }

    // Keep track of the mouse position.
    handleMouseMove(event) {
        this.setState({
            mouseX: event.pageX
        })
    }

    // Speed Mod Bar
    handleSpeedChange(e) {
        if(parseFloat(e.target.value)) {
            this.setState({
                speed: e.target.value
            })
        }
    }

    // Acceleration Mod Bar
    handleAccelChange(e) {
        if(parseFloat(e.target.value)) {
            this.setState({
                accelMod: e.target.value
            })
        }
    }

    // Get moving!
    movement() {
        let {droidX, mouseX, speed, accelMod} = this.state;

        // Need a pretty strict if statement to make sure React doesn't end up in a 
        // render loop with all the state changes / re-rendering going on.
        if(Math.abs(Math.round(droidX)-mouseX) !== 1){
          
            let distance = mouseX - droidX;
            let acceleration = Math.abs(distance * accelMod) / 100;

            // Move to the right
            if (droidX < mouseX) {
                this.setState({
                    droidX: droidX+(speed*acceleration),
                    toTheRight: true
                });
            }
          
            // Move to the left
            else {
                this.setState({
                    droidX: droidX-(speed*acceleration),
                    toTheRight: false
                });
            }
        }
    }

    // Get some initial movement on first mount. 
    componentWillMount() {
        this.setState({
            mouseX: 300
        });
    }

    // Set up the mouse event listener and fire up the movement function.
    componentDidMount() {
        document.addEventListener('mousemove', (e) => this.handleMouseMove(e));
        setInterval(this.movement.bind(this), 1);
    }
  
    // Clean up.
    componentWillUnmount() {
        document.removeEventListener('mousemove', (e) => this.handleMouseMove(e));
    }

    // Away we go.
    render() {
      let {speed, accelMod, droidX, mouseX, toTheRight} = this.state;
      
      return (
       
         <div>
          <div className="bb8" style={{WebkitTransform: `translateX(${droidX}px)`}}>
            <div className={'antennas ' + (toTheRight ? 'right' : '')}
                 style={{WebkitTransform: `translateX(${(mouseX - droidX) / 25}px) rotateZ(${(mouseX - droidX) / 80 }deg)`}}>
              <div className="antenna short"></div>
              <div className="antenna long"></div>
            </div>
            <div className="head"
                 style={{WebkitTransform: `translateX(${(mouseX - droidX) / 15}px) rotateZ(${(mouseX - droidX) / 25}deg)`}}>
              <div className="stripe one"></div>
              <div className="stripe two"></div>
              <div className={'eyes ' + (toTheRight ? 'right' : '')}>
                <div className="eye one"></div>
                <div className="eye two"></div>
              </div>
              <div className={'stripe detail ' + (toTheRight ? 'right' : '')}>
                <div className="detail zero"></div>
                <div className="detail zero"></div>
                <div className="detail one"></div>
                <div className="detail two"></div>
                <div className="detail three"></div>
                <div className="detail four"></div>
                <div className="detail five"></div>
                <div className="detail five"></div>
              </div>
              <div className="stripe three"></div>
            </div>
            <div className="ball" style={{WebkitTransform: `rotateZ(${droidX / 2}deg)`}}>
              <div className="lines one"></div>
              <div className="lines two"></div>
              <div className="ring one"></div>
              <div className="ring two"></div>
              <div className="ring three"></div>
            </div>
            <div className="shadow"></div>
          </div>
          
          <div className="instructions">
            <p>move your mouse.</p>
          </div>
          
        </div>
         
      );
    }
}
class Sinus extends React.Component {
  constructor() {
        super();

        this.state = {
            degree: 0
        };

        setInterval(this._tick.bind(this), 30);
    }
    _tick() {
      if(this.state.degree < 360) {
        this.setState({degree: this.state.degree+1});
      }else{
        this.setState({degree: 0});
      }
    }
    render() {
      return (<SinusDraw degree={this.state.degree}/>);
    }
    
}

  const SinusDraw = ({degree}) => (
  <div id='container'>
      <svg width='940' height='240' xmlns='http://www.w3.org/2000/svg' >
        <g transform='translate(20 20)'>
          
          <text x="0" y="100">
              sin(
          </text>
          
          <line className='grey' x1={Math.cos(degree/180*Math.PI)*100 +  100+110} y1={-Math.sin(degree/180*Math.PI)*100 + 100}
            x2={degree+460} y2={-Math.sin(degree/180*Math.PI)*100 + 100} />
          
          <g transform='translate(110 0)'>
            <line className='grey' x1="100" y1="100" x2="200" y2="100" />
            
            
            <circle className='grey' cx="100" cy="100" r="100"/>
            <path d={'M 130 100 A 30 30 0 ' +(degree <=180 ? '0': '1')+ ' 0' + (Math.cos(degree/180*Math.PI)*30 + 100) + ' ' + (-Math.sin(degree/180*Math.PI)*30 + 100)} />
            <line className='grey' x1="100" y1="100" x2={Math.cos(degree/180*Math.PI)*100 + 100} y2={-Math.sin(degree/180*Math.PI)*100 + 100} />
            <text x={Math.cos(degree/180*Math.PI)*100 + 100+10} y={-Math.sin(degree/180*Math.PI)*100 + 100}>
              {degree}°
            </text>
          </g>
          
          <text x="370" y="100">
              ) =
          </text>
          
          <g transform='translate(460 0)'>
            <line className='grey' x1="0" y1="100" x2="360" y2="100" />
            
            <polyline className='grey'
              points={Array.from({length: 360}, (value, key) => {
                return key + " " + (-Math.sin(key/180*Math.PI)*100 + 100)
              })} />
            <polyline 
              points={Array.from({length: degree}, (value, key) => {
                return key + " " + (-Math.sin(key/180*Math.PI)*100 + 100)
              })} />
            <text x={degree+10} y={-Math.sin(degree/180*Math.PI)*100 + 100}>
              {parseFloat(Math.sin(degree/180*Math.PI)).toFixed(4)}
            </text>
          </g>
        </g>
      </svg>
    </div>
)
  
// small circle radius
const r1 = 5
const r2 = 10
const r3 = 15
const width = window.innerWidth
const height = window.innerHeight

const minWH = Math.min(width, height)

let maxSize
if (minWH < 430) {
	maxSize = minWH - 30
} else {
	maxSize = 400
}

// utils
// deg to radian
const rad = a => Math.PI * (a - 90) / 180

// relative polar coordinates
const rx = (r, a, c) => c + r * Math.cos(rad(a, c))

const ry = (r, a, c) => c + r * Math.sin(rad(a))

// get hours, minutes, and seconds
const HMS = t => ({
	h: t.getHours(),
	m: t.getMinutes(),
	s: t.getSeconds()
})

const pathStringVars = (c, r, time) => {
	// center, radius and time = this.props		
	// const {c,r,time} = p
	const {h, m, s} = HMS(time)

	// divide 360 deg by 12hrs, 60min, and 60s 
	const hAngFact = 30
	const mAngFact = 6
	const sAngFact = 6

	// calc relative coordinates 		
	const hx = rx((r - 30), (hAngFact * h), c)
	const hy = ry((r - 30), (hAngFact * h), c)
	const mx = rx((r - 30), (mAngFact * m), c)
	const my = ry((r - 30), (mAngFact * m), c)
	const sx = rx((r - 30), (sAngFact * s), c)
	const sy = ry((r - 30), (sAngFact * s), c)

	return { hx, hy, mx, my, sx, sy }
}

const TextTime = ({ x, y, time }) => {
	const str = time.toTimeString().slice(0, 8).replace(/:/g, " : ")
	return (
		<text x={x} y={y} className='textTime'>
			{str}
		</text>
	)
}

// Circle component
const Circle = ({cx, cy, r, cl}) => (
	<circle 
		cx={cx} 
		cy={cy} 
		r={r} 
		className={cl} 
	/>
)

// Single spike
const Spike = ({x1, x2, y1, y2}) => (
	<line
		className="spike" 
		x1={x1}
		x2={x2}
		y1={y1}
		y2={y2}
	/>
)

const spikeNodes = (c, r) => {
	const increment = 30
	const nodes = []
	
	for(let i=1; i<13; i++) {
		let ang = i * increment

		let temp = (
			<Spike 
				x1={rx(r-5, ang, c)}
				x2={rx((r-10), ang, c)}
				y1={ry(r-5, ang, c)}
				y2={ry((r-10), ang, c)}
				key={i}
			/>
		)
		nodes.push(temp)
	}
	return nodes
}

// populate Spikes
const Spikes = ({c, r}) => (
	<g>
		{spikeNodes(c, r)}
	</g>
)

// triangle component
const Triangle = ({c, r, time}) => {
	const {hx, hy, mx, my, sx, sy} = pathStringVars(c, r, time)
	const path = `M${hx},${hy} L${mx},${my} L${sx},${sy} L${hx},${hy}`
	return (
		<path 
			className='triangle'
			d={path}
		/>
	)
}

// Secondary circles
const SecCircle = ({c, r, time}) => {
	const {hx, hy, mx, my, sx, sy} = pathStringVars(c, r, time)
	return (
		<g>
			<Circle cl="secCircle" cx={hx} cy={hy} r={r3} />
			<Circle cl="secCircle" cx={mx} cy={my} r={r2} />
			<Circle cl="secCircle" cx={sx} cy={sy} r={r1} />
		</g>
	)
}

// main container
class Clock extends React.Component {
	constructor() {
		super()
		
		this.state = {
			time: new Date()
		}
	}

  render() {

		const size = maxSize

		const viewBox = `0 0 ${size} ${size}`

		const mid = size / 2
		
		const paddedRadius = (size - 30) / 2

		window.setTimeout(() => {
			this.setState({
				time: new Date()
			})
		}, 1000)

		return (
			<svg xmlns="http://www.w3.org/svg/2000"
					viewBox={viewBox}
					width={size}
					height={size}
				>
				<Circle
					cl="outerRing" 
					cx={mid} 
					cy={mid} 
					r={mid - 5}
				/>
				<Circle
					cl="primCircle" 
					cx={mid} 
					cy={mid} 
					r={mid - 15}
				/>
				<Spikes c={mid} r={paddedRadius} />
				<Triangle c={mid} r={paddedRadius} time={this.state.time} />
				<SecCircle c={mid} r={paddedRadius} time={this.state.time} />
				<TextTime 
					time={this.state.time} 
					x={mid}
					y={mid}
				/>
			</svg>
		)
  }
}


var tabData = [
  { name: 'Intro', isActive: true },
  { name: 'Data', isActive: false },
  { name: 'BB-8', isActive: false },
  { name: 'Sine', isActive: false },
  { name: 'Time', isActive: false }
];
var Tabs = React.createClass({
  render: function() {
    return (
      <ul className="nav nav-tabs">
        {tabData.map(function(tab){
          return (
            <Tab data={tab} isActive={this.props.activeTab === tab} handleClick={this.props.changeTab.bind(this,tab)} />
          );
        }.bind(this))}      
      </ul>
    );
  }
});
var Tab = React.createClass({
  render: function() {
    return (
      <li onClick={this.props.handleClick} className={this.props.isActive ? "active" : null}>
        <a href="#">{this.props.data.name}</a>
      </li>
    );
  }
});
var Content = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.activeTab.name === 'Intro' ? 
        <section className="panel panel-success">
          <h2 className="panel-heading">This is my test environment for react. Please go through the tabs to see the features.</h2>
        </section>
          
        :null} 
        {this.props.activeTab.name === 'Data' ? 
        <section className="panel panel-success">
          <h2 className="panel-heading">I contain randomly generated data. Click the button to generate more random data.</h2>
          <App/>
        </section>
        :null} 
        {this.props.activeTab.name === 'BB-8' ? 
        <section className="panel panel-success">
          <h2 className="panel-heading">Meet BB-8. Move your mouse and he will follow...</h2>
          <App2/>
        </section>
        :null} 
        {this.props.activeTab.name === 'Sine' ? 
        <section className="panel panel-success">
          <h2 className="panel-heading">An active depiction of a Sine graph with its relative angle</h2>
            <Sinus/>
        </section>
        :null}
        {this.props.activeTab.name === 'Time' ? 
        <section className="panel panel-success">
          <h2 className="panel-heading">A live clock just incase you forget Windows has one already</h2>
            <Clock/>
        </section>
        :null}
      </div>
    );
  }
});
var App3 = React.createClass({
  getInitialState: function() {
    return {
      activeTab: tabData[0]
    }
  }, 
  handleClick: function(tab) {
    this.setState({activeTab: tab});
  },
  render: function() {
    return (
      <div>
        <Tabs activeTab={this.state.activeTab} changeTab={this.handleClick} />
        <Content activeTab={this.state.activeTab} />
      </div>
    );
  }
});
ReactDOM.render(
  <App3 />,
  document.getElementById('TabTest')
);
              
            
!
999px

Console