content: import React, { Component } from 'react';
  import cx from 'classnames';
  
  export default class Scribble extends Component {
  
    constructor(){
      super(...arguments)
  
      this.state = {
        strokeDashoffset: 450,
      }
  
      this.handleScroll = this.handleScroll.bind(this);
    }
  
    componentDidMount(){
      window.addEventListener('scroll', this.handleScroll)
    }
  
    componentWillUnmount(){
      window.removeEventListener('scroll', this.handleScroll)
    }
  
    handleScroll() {
      let strokeDashoffset = 450 + (window.scrollY / 2);
  
      this.setState({
        strokeDashoffset,
      })
    }
  
    render(){
  
      const { isMobile } = this.props;
      const { strokeDashoffset } = this.state;
  
      return (
        <svg
          style={{
            transform: 'rotate(180deg)',
            position: 'fixed',
            left: 0,
            top: 0
          }}
          width={isMobile ? '35em' : '50em'}
          height={isMobile ? '35em' : '50em'}
          viewBox="0 0 59 65"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlnsXlink="http://www.w3.org/1999/xlink"
        >
          <desc>Created with Sketch.</desc>
          <defs></defs>
          <g
            overflow="visible"
            id="Page-1"
            stroke="none"
            strokeWidth="1"
            fill="none"
            fillRule="evenodd"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path
              d="M9.27537041,3 C3.99802666,10.5126953 1.5552009,34.1777992 3.88132744,34.7041016 C6.32859307,35.2578125 17.6272897,10.3928877 21.6845501,12.1699219 C22.3313073,12.4531942 10.9001989,39.2616312 12.5761517,41.2583008 C13.0252535,41.7933445 28.0141399,12.1699219 35.9052532,12.1699219 C36.9905398,12.1699219 19.465332,41.4726562 20.0024414,50.1113281 C20.0532107,50.9278825 42.2397259,20.9887695 52.2983196,20.9887695 C53.0909519,20.9887695 27.0746868,49.5668945 27.0746868,61.4868164 C27.0746868,63.3309662 44.4047852,36.6445313 53.0419922,36.6445312 C57.9541016,36.6445312 43.4890788,50.7602048 43.8852539,53.5532227 C44.0771994,54.9064301 54.0865924,47.901038 55.1625774,49.1416016 C56.2385625,50.3821652 55.1625774,56.1206055 55.1625774,56.1206055"
              id="Line"
              stroke="#000000"
              strokeWidth="6"
              strokeDasharray="300"
              strokeDashoffset={strokeDashoffset}
            />
          </g>
        </svg>
      )
    };
  }
  