CodePen Embed - React Responsive Layout with SVG and some React-Motion

<svg class="background" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1009.8 705.5">
  <polygon points="1009.8 0 504.1 704.2 1009.8 704.2 1009.8 0"/>
  <polygon fill="#fcfafa" points="0 705.5 979.6 705.5 0 23.5 0 705.5"/>
</svg>

<div id="app"></div>

@font-face {
    font-family: 'arconregular';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/arcon-regular-webfont.eot');
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/arcon-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/arcon-regular-webfont.woff2') format('woff2'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/arcon-regular-webfont.woff') format('woff'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/arcon-regular-webfont.ttf') format('truetype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/arcon-regular-webfont.svg#arconregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body {
  background: #EAEDEF;
  width: 100%;
  height: 100%;
  font-family: 'arconregular', sans-serif;
  font-size: 12px;
  -webkit-overflow-scrolling: touch;
  overflow: auto;
}

.container-fluid {
  margin-bottom: 25px;
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  position: relative;
}

.itals {
  font-family: 'Crimson Text', serif;
  font-style: italic;
}

h3 {
  font-size: 25px;
  padding-bottom: 1px !important;
  margin: 12px 0 8px 12px !important;
}

.pR {
  position: relative;
}

.stripe-vt {
  position: absolute;
  left: 50%;
  height: 110%;
  border-left: 2px solid #000;
  width: 1px;
}

.stripe-hz {
  position: absolute;
  width: 100%;
  top: 400px;
  height: 1%;
  border-top: 2px solid #898989;
  z-index: 40;
  opacity: 0.75;
}

.background {
  position: absolute;
  width: 100%;
  height: 110%;
}

.printArea {
  border: 2px solid #000;
  margin: 25px 0;
  .printrow {
    display: flex;
    flex-flow: row wrap;
    >div {
      border: 1px solid #000;
      padding: 5px;
    }
  }
}

.lg-top {
  width: 60%;
}

.sm-top {
  width: 40%;
}

.sm-bot {
  width: 50px;
}

.lg-bot {
  float: left;
  width: calc(100% - 50px);
  padding: 0 !important;
  .two-print-rows {
    .tr {
      padding: 5px;
    }
    .first {
      border-bottom: 2px solid;
      height: 32px;
    }
  }
}

@mixin photoCol($height) {
  width: 100%;
  height: $height;
  margin-top: 25px;
  background-size: cover !important;
}

.long {
  @include photoCol(300px);
}

.short {
  @include photoCol(100px);
}

h2 {
  font-size: 15px;
  border-top: 2px solid;
  border-bottom: 2px solid;
  padding: 8px 0 5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.long1 {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/gugg.jpg") no-repeat 15% top;
}

.long2 {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/ramp.jpg") no-repeat center center;
  margin-top: 200px;
}

.long3 {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/window.jpg") no-repeat bottom left;
}

.long4 {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/gugg.jpg") no-repeat center top;
  margin-top: 200px;
}

.short1 {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/spike.jpg") no-repeat center center;
}

.short2 {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/ramp.jpg") no-repeat bottom right;
}

@media screen and (min-width:600px) {
  .long {
    height: 300px !important;
  }

  .short {
    height: 150px !important;
  }
}

@media screen and (max-width:750px) {
  .stripe-hz {
    border-top: none !important;
  }
}

button.slide {
  border: 2px solid;
  padding: 6px 20px 5px;
}

@mixin circles($size, $top, $padding) {
  width: $size;
  height: $size;
  position: absolute;
  top: $top;
  left: calc(50% - (#{$size}/2));
  border-radius: 50%;
  z-index: 500;
  text-align: center;
  padding: $padding;
}

.circ-lg {
  @include circles(100px, 25px, 0);
  border: 1px solid #ccc;
}

.circled {
  animation: circlesMove 0.7s 3s ease both;
  @include circles(90px, 30px, 23px 0 0 0px);
  border: 1px solid #000;
  transform-origin: 50% 50%;
  transition: all 0.3s ease;
   h1 {
    margin-top: 2px;
    font-size: 28px;
    letter-spacing: 0.1em;
  }
  &.c1 {
    background: #EAEDEF;
    color: #000;
  }
  &.c2 {
    background: #FCFAFA;;
    color: #000;
  }
  &.c3 {
    background: #FCFAFA;
    color: #000;
  }
  &.c4 {
    background: #000000;
    color: #FCFAFA;
    border: 1px solid #777;
  }
  &.back {
    background: black;
    color: white;
  }
  &.grey {
    background: #EAEDEF;
    color: black;
  }
}

@media screen and (min-width:750px) {
  .mt {
    margin-top: 150px !important;
  }
  .circ-lg {
    @include circles(140px, 330px, 0);
  }
  .circled {
    @include circles(130px, 335px, 37px);
    h1 {
      font-size: 35px;
      margin-top: 5px !important;
      letter-spacing: 0.1em;
    }
  }
  .circleMove {
    @include circles(130px, 335px, 37px);
  }
}

.slide {
  position: relative;
  background: transparent;
  -webkit-transition: .3s ease;
  transition: .3s ease;
  z-index: 1;
  backface-visibility: hidden;
  perspective: 1000px;
  transform: translateZ(0);
  cursor: pointer;

  &:hover {
    color: #fff;
  }

  &:hover:before {
    right: -1px;
  }
}

.slide::before {
  content: "";
  display: block;
  position: absolute;
  background: #000;
  transition: right .3s ease;
  z-index: -1;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: 108%;
  backface-visibility: hidden;
}

.short, .long {
  border: 6px solid black;
}

.grey {
  color: #8F8F8F;
  margin-bottom: 30px;
  button.slide {
    border: 2px solid #8F8F8F;
  }
  .slide::before {
    background: #8F8F8F;
  }
}

@media screen and (max-width:750px) {
  .sm-grey {
    color: #8F8F8F;
    margin-bottom: 30px;
    button.slide {
      border: 2px solid #8F8F8F;
    }
    .slide::before {
      background: #8F8F8F;
    }
  }
  .circled.back {
    padding-top: 28px !important;
  }
}

.circ-lg, .circled {
  transform-style: preserve-3d;
}

.circ-lg {
  transition: 0.5s transform ease;
  z-index: 1000;
  cursor: pointer;
}

.circled {
  transition: 0.5s transform ease;
}

.front {
	backface-visibility: hidden;
}

.circled.circle-svg {
  padding: 0 !important;
}

View Compiled

const { Component, Children, PropTypes } = React
const { StaggeredMotion, Motion, spring } = ReactMotion

//Circled
const Circled = React.createClass({
  getInitialState() {
    return {open: false, opacity: 1};
  },

  handleMouseOver() {
    this.setState({open: !this.state.open});
  },

  handleTouchStart(e) {
    e.preventDefault();
    this.handleMouseOver();
  },
  
  getStyles(prevStyles) {
    // we're using the previous style to update the next ones placement
    const endValue = prevStyles.map((_, i) => {
      let staggerStiff = 100, staggerDamp = 19;
      return i === 0
        ? { opacity: spring(this.state.open ? 0 : 1, {stiffness: staggerStiff, damping: staggerDamp}) }
        : { opacity: spring(this.state.open ? 0 : 1, {stiffness: (staggerStiff - (i * 7)), damping: staggerDamp + (i * 0.2)}) }
    });
    return endValue;
  },

  render() {
    const circNum = this.props.circNum || 5,
          classNum = this.props.classNum || "c1",
          circBk = this.props.circBk || "black",
          pathColor = this.props.pathColor || "#eaedef",
          settings = {stiffness: 200, damping: 20};

    const pathData = ["M48.8,0A48.8,48.8,0,1,0,97.6,48.8,48.8,48.8,0,0,0,48.8,0Zm0,88.6A39.8,39.8,0,1,1,88.6,48.8,39.8,39.8,0,0,1,48.8,88.6Z",
          "M48.8,9.1A39.8,39.8,0,1,0,88.6,48.8,39.8,39.8,0,0,0,48.8,9.1Zm0,67.9A28.1,28.1,0,1,1,77,48.8,28.1,28.1,0,0,1,48.8,77Z",
          "M48.8,20.7A28.1,28.1,0,1,0,77,48.8,28.1,28.1,0,0,0,48.8,20.7Zm0,50.1a22,22,0,1,1,22-22A22,22,0,0,1,48.8,70.8Z",
          "M48.8,26.8a22,22,0,1,0,22,22A22,22,0,0,0,48.8,26.8Zm0,39.1A17.1,17.1,0,1,1,66,48.8,17.1,17.1,0,0,1,48.8,66Z",
          "M48.8,31.7A17.1,17.1,0,1,0,66,48.8,17.1,17.1,0,0,0,48.8,31.7Zm0,29A11.9,11.9,0,1,1,60.7,48.8,11.9,11.9,0,0,1,48.8,60.7Z",
          "M48.8,36.9A11.9,11.9,0,1,0,60.7,48.8,11.9,11.9,0,0,0,48.8,36.9Zm0,19.9a8,8,0,1,1,8-8A8,8,0,0,1,48.8,56.8Z",
          "M48.8,40.8a8,8,0,1,0,8,8A8,8,0,0,0,48.8,40.8Zm0,12.6a4.6,4.6,0,1,1,4.6-4.6A4.6,4.6,0,0,1,48.8,53.5Z",
          "M48.8,44.2a4.6,4.6,0,1,0,4.6,4.6A4.6,4.6,0,0,0,48.8,44.2Zm0,7.1a2.5,2.5,0,1,1,2.5-2.5A2.5,2.5,0,0,1,48.8,51.3Z",
          "M51.3 48.8c0 1.38-1.12 2.5-2.5 2.5s-2.5-1.12-2.5-2.5 1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5z"]
    
    let arr = [];
    for (var i = 0; i < pathData.length; i++) {
      arr.push({opacity: 1});
    }
  
    return (
      <div onClick={this.handleMouseOver}
           onTouchStart={this.handleTouchStart}
           className="circ-contain">

       <div className="circ-lg"></div>
        <div className={"circled back " + circBk}>
          Lorem Ipsum Dolor Sit
        </div>
          <div>


         <svg className="circled circle-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.6 97.6">
              <StaggeredMotion
                defaultStyles = {arr} 
                styles={this.getStyles}>
                {circ =>
                  <g fill={pathColor} className="cPath">
                    {circ.map(({opacity}, i) =>
                      <path
                        key={i}
                        d={pathData[i]}
                        className={`things s${i}`}
                        style={{
                          opacity: opacity
                        }} />
                    )}
                  </g>
                }
              </StaggeredMotion>
          </svg>

            <Motion style={{
            op: spring(this.state.open ? 0 : 1, settings)
              }}>
              {({op}) =>

              <div className={"circled front " + classNum}
                style={{
                    opacity: op
                  }}>
                <span className="itals">Printed</span>
                <h1>{circNum}</h1>
              </div>
              }
            </Motion>
            
        </div>
      </div>
    );
  },
});

//App
const App = React.createClass({
 render() {
   return (
     <div>
       <div className="pR">
          <div className="stripe-vt"></div>
          <div className="stripe-hz"></div>
       </div>
       
       <div className="container-fluid">
          <div className="row">
            <ColumnOne />
            <ColumnTwo />
            <ColumnThree />
            <ColumnFour />
          </div>
       </div>
     </div>
   )
 }
})

//ColumnOne
const ColumnOne = React.createClass({
 render() {
   return (
      <div className="column 
                col-xs-16 col-xs-offset-3
                col-sm-8 col-sm-offset-2 
                col-md-8 col-md-offset-2">
      <Picture />
      <Circled />
      <PrintArea margin="mt"/>
      <Picture length="short"/>
    </div>
   )
 }
})

//ColumnTwo
const ColumnTwo = React.createClass({
 render() {
   return (
      <div className="column 
                col-xs-16 col-xs-offset-2
                col-sm-8 col-sm-offset-1
                col-md-8 col-md-offset-1">
      
       <Circled classNum="c2" circNum="36"/>
      <Picture picNum="2" />
      <Text />
    </div>
   )
 }
})

//ColumnThree
const ColumnThree = React.createClass({
 render() {
   return (
      <div className="column 
                col-xs-16 col-xs-offset-3
                col-sm-8 col-sm-offset-2
                col-md-8 col-md-offset-2">
      
      <Circled classNum="c3" circNum="12"/>
      <Picture length="short" picNum="2" />
      <PrintArea />
      <Picture picNum="3" margin="mt"/>
    </div>
   )
 }
})

//ColumnFour
const ColumnFour = React.createClass({
 render() {
   return (
      <div className="column 
                col-xs-16 col-xs-offset-2
                col-sm-8 col-sm-offset-1
                col-md-8 col-md-offset-1">
      
      <Circled classNum="c4" circNum="2" circBk="grey" pathColor="black"/>
      <Picture picNum="4" />
      <Text grey="grey"/>
    </div>
   )
 }
})

// Text
function Text(props) {
  const grey = props.grey || "sm-grey";
  
  return (
    <div className={grey}>
      <h2>Lorem Ipsum</h2>
      <p>Man braid iPhone locavore hashtag pop-up, roof party forage heirloom chillwave brooklyn yr 8-bit gochujang blog. Gastropub locavore crucifix.</p>
      <button className="slide">See More ⟶</button>
    </div>
  )
}

// Picture
function Picture(props) {
  const picNum = props.picNum || 1,
        length = props.length || "long",
        margin = props.margin || "";
  
  return (
    <div className={length + " " + length + picNum + " " + margin}>
    </div>
  )
}

// PrintArea
function PrintArea(props) {
  const margin = props.margin || "";
  
  return (
      <div className={"printArea " + margin}>
        <div className="printrow">
          <div className="lg-top slide">
            <span className="itals">Date </span>
            Picture
          </div>
          <div className="sm-top slide">
            Picture
          </div>
        </div>
        <div className="printrow">
          <div className="sm-bot slide">
             <h3>6</h3>
          </div>
          <div className="lg-bot">
            <div className="two-print-rows">
              <div className="first tr slide">
                Info
              </div>
              <div className="tr slide">
                <span className="itals">Date </span>
                Picture
              </div>
            </div>
          </div>
        </div>
      </div>
  )
}

React.render(<App/>, document.querySelector("#app"));

View Compiled

This Pen is owned by Sarah Drasner on CodePen.

See more by @sdras on CodePen

External CSS

https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/custom40.min.css

External CSS

External JavaScript