使用ReactJS和jQuery实现的城市背景平行视差动画

City Illustration with jquery.parallax and react.js

react, jquery, parallax

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4487
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

class CitySvg extends React.Component { 
  componentDidMount() {
    this.houses = [this.houseOne, this.houseTwo, this.houseThree, this.houseFour, this.houseFive,
      this.houseSix, this.houseSeven, this.wheel2];
    this.index = '10';
    $('.container').parallax({ scalarX: 5, scalarY: 5 });
    TweenMax.set(this.wheel, { transformOrigin: '50% 50%' });
    TweenMax.to(this.wheel, 100, { rotation: '360', ease: Linear.easeNone, repeat: -1 });
  }

mouseAction(evt) {
    const index = evt.currentTarget.dataset.project;
    console.log(this.houses[index]);
    this.houses[index].classList.toggle('active');
  }

render() {
    return (
      <svg xmlns="http://www.w3.org/2000/svg" ref={(c) => (this.wrapper = c)} viewBox="0 0 1031.41 441.18" className="container">
        <g className="house" id="house-seven" ref={(h) => (this.houseSeven = h)} data-project={6} onClick={(e) => this.mouseAction(e)}>
          <g id="bg-fill-2" className="bg-fill">
            <path fill="#e82c84" d="M904.92 271.63H843.7v5.98h4.06v112.88h53.1V277.61h4.06v-5.98z" />
            <path fill="#f079b2" d="M844.65 272.59h59.07v5.02h-59.07zm23.92 27.16V285.5h-12.44v14.25h-2.22v4.22h16.32v-4.22h-1.66zm24.08 0V285.5h-12.44v14.25h-2.22v4.22h16.31v-4.22h-1.65zm0 27.38v-14.24h-12.44v14.24h-2.22v4.23h16.31v-4.23h-1.65zm-23.96 0v-14.24h-12.44v14.24h-2.23v4.23h16.32v-4.23h-1.65zm0 27.62V340.5h-12.44v14.25h-2.23v4.22h16.32v-4.22h-1.65zm24.42 0V340.5h-12.44v14.25h-2.23v4.22h16.32v-4.22h-1.65zm-24.42 26.81v-14.24h-12.44v14.24h-2.23v4.23h16.32v-4.23h-1.65zm11.69-14.49h12.21v23.51h-12.21z" />
          </g>
          <g id="stroke-2">
            <path fill="#333" d="M869.7 380.19V367.6a2 2 0 0 0-2-2h-11.36a2 2 0 0 0-2 2v12.58a2 2 0 0 0-1.88 2v2.51a2 2 0 0 0 2 2h15.13a2 2 0 0 0 2-2v-2.51a2 2 0 0 0-1.89-1.99zm-12.87-10.38a1.67 1.67 0 0 1 1.66-1.66h7a1.67 1.67 0 0 1 1.66 1.66v9.08a1.67 1.67 0 0 1-1.66 1.66h-7a1.67 1.67 0 0 1-1.66-1.66zm12.8 13.72a1.07 1.07 0 0 1-1.06 1.06h-12.83a1.07 1.07 0 0 1-1.06-1.06v-.12a1.07 1.07 0 0 1 1.06-1.06h12.83a1.07 1.07 0 0 1 1.06 1.06zm.07-29.93v-12.57a2 2 0 0 0-2-2h-11.36a2 2 0 0 0-2 2v12.56a2 2 0 0 0-1.88 2v2.51a2 2 0 0 0 2 2h15.13a2 2 0 0 0 2-2v-2.51a2 2 0 0 0-1.89-1.99zm-12.87-10.38a1.67 1.67 0 0 1 1.66-1.66h7a1.67 1.67 0 0 1 1.66 1.66v9.08a1.67 1.67 0 0 1-1.66 1.66h-7a1.67 1.67 0 0 1-1.66-1.66zm12.8 13.72a1.07 1.07 0 0 1-1.06 1.06h-12.83a1.07 1.07 0 0 1-1.06-1.06v-.12a1.07 1.07 0 0 1 1.06-1.06h12.83a1.07 1.07 0 0 1 1.06 1.06zm24.45-3.34v-12.57a2 2 0 0 0-2-2h-11.36a2 2 0 0 0-2 2v12.56a2 2 0 0 0-1.88 2v2.51a2 2 0 0 0 2 2H894a2 2 0 0 0 2-2v-2.51a2 2 0 0 0-1.92-1.99zm-12.87-10.36a1.67 1.67 0 0 1 1.66-1.66h7a1.67 1.67 0 0 1 1.66 1.66v9.08a1.67 1.67 0 0 1-1.66 1.66h-7a1.67 1.67 0 0 1-1.66-1.66zM894 356.96a1.07 1.07 0 0 1-1.06 1.06h-12.82a1.07 1.07 0 0 1-1.06-1.06v-.12a1.07 1.07 0 0 1 1.06-1.06H893a1.07 1.07 0 0 1 1.06 1.06zm-24.3-31.15v-12.58a2 2 0 0 0-2-2h-11.36a2 2 0 0 0-2 2v12.58a2 2 0 0 0-1.88 2v2.51a2 2 0 0 0 2 2h15.13a2 2 0 0 0 2-2v-2.51a2 2 0 0 0-1.89-2zm-12.87-10.38a1.67 1.67 0 0 1 1.66-1.66h7a1.67 1.67 0 0 1 1.66 1.66v9.08a1.67 1.67 0 0 1-1.66 1.66h-7a1.67 1.67 0 0 1-1.66-1.66zm12.8 13.72a1.07 1.07 0 0 1-1.06 1.06h-12.83a1.07 1.07 0 0 1-1.06-1.06v-.12a1.07 1.07 0 0 1 1.06-1.06h12.83a1.07 1.07 0 0 1 1.06 1.06zm24.45-3.34v-12.58a2 2 0 0 0-2-2h-11.36a2 2 0 0 0-2 2v12.58a2 2 0 0 0-1.88 2v2.51a2 2 0 0 0 2 2H894a2 2 0 0 0 2-2v-2.51a2 2 0 0 0-1.92-2zm-12.87-10.38a1.67 1.67 0 0 1 1.66-1.66h7a1.67 1.67 0 0 1 1.66 1.66v9.08a1.67 1.67 0 0 1-1.66 1.66h-7a1.67 1.67 0 0 1-1.66-1.66zM894 329.15a1.07 1.07 0 0 1-1.06 1.06h-12.82a1.07 1.07 0 0 1-1.06-1.06v-.12a1.07 1.07 0 0 1 1.06-1.06H893a1.07 1.07 0 0 1 1 1.06zm.08-30.55v-12.57a2 2 0 0 0-2-2h-11.36a2 2 0 0 0-2 2v12.56a2 2 0 0 0-1.88 2v2.51a2 2 0 0 0 2 2H894a2 2 0 0 0 2-2v-2.51a2 2 0 0 0-1.92-1.99zm-12.87-10.36a1.67 1.67 0 0 1 1.66-1.66h7a1.67 1.67 0 0 1 1.66 1.66v9.08a1.67 1.67 0 0 1-1.66 1.66h-7a1.67 1.67 0 0 1-1.66-1.66zM894 301.96a1.07 1.07 0 0 1-1.06 1.06h-12.82a1.07 1.07 0 0 1-1.06-1.06v-.12a1.07 1.07 0 0 1 1.06-1.06H893a1.07 1.07 0 0 1 1.06 1.06zm-24.3-3.36v-12.57a2 2 0 0 0-2-2h-11.36a2 2 0 0 0-2 2v12.56a2 2 0 0 0-1.88 2v2.51a2 2 0 0 0 2 2h15.13a2 2 0 0 0 2-2v-2.51a2 2 0 0 0-1.89-1.99zm-12.87-10.38a1.67 1.67 0 0 1 1.66-1.66h7a1.67 1.67 0 0 1 1.66 1.66v9.08a1.67 1.67 0 0 1-1.66 1.66h-7a1.67 1.67 0 0 1-1.66-1.66zm12.8 13.72a1.07 1.07 0 0 1-1.06 1.06h-12.83a1.07 1.07 0 0 1-1.06-1.06v-.12a1.07 1.07 0 0 1 1.06-1.06h12.83a1.07 1.07 0 0 1 1.06 1.06z" />
            <path fill="none" d="M899 281.49c0-1.89-.63-2.25-2.35-2.25q-22.16.09-44.33 0c-2 0-2.52.58-2.51 2.56.08 17.43 0 34.86 0 52.29v53c0 1.75.41 2.35 2.27 2.33q12.27-.15 24.55 0c2 0 2.37-.69 2.34-2.49-.1-6.29 0-12.58-.07-18.87 0-1.77.55-2.44 2.35-2.37 3.1.11 6.22.16 9.32 0 2.25-.12 3.06.53 3 2.9-.16 6.21 0 12.43-.11 18.64 0 2.23 1 2.24 2.64 2.17s2.9.37 2.9-2.14q-.13-52.91 0-105.77zm3.58-6.28c0-1.78-1.24-1.38-2.22-1.38h-52c-1 0-2.23-.34-2.18 1.43s1.2 1.26 2.11 1.26h52c.94-.01 2.26.51 2.29-1.31z" />
            <path fill="#333" d="M905.31 279.27c.92-.47 1.53-7.83 0-8.19s-39.21 0-58.82 0c-3 0-3 0-3 3v2.5c-.14 1.74.15 3 2.38 2.76 1-.13 1.32.5 1.27 1.4v75.41c0 .45-.07.9-.11 1.35v2.81c0 9.16.07 18.33.14 27.49 0 1.19-.43 2.64-1.6 2.6-1.89-.06-3.79 0-5.68 0v.79h65.5v-.79a13.2 13.2 0 0 0-1.59 0c-1.62.19-2.07-1.57-2.06-3.12V281.4c-.09-3.17 2.67-1.66 3.57-2.13zm-14.07 109a1.15 1.15 0 0 1-1.15 1.15h-7.58a1.15 1.15 0 0 1-1.15-1.15v-18.74a1.15 1.15 0 0 1 1.15-1.15h7.58a1.15 1.15 0 0 1 1.15 1.15zm4.84 1.08c-1.59.07-2.7 0-2.64-2.17.15-6.21 0-12.43.11-18.64.06-2.37-.74-3-3-2.9-3.1.17-6.21.12-9.32 0-1.8-.06-2.37.61-2.35 2.37.08 6.29 0 12.58.07 18.87 0 1.8-.35 2.52-2.34 2.49q-12.27-.17-24.55 0c-1.86 0-2.27-.58-2.27-2.33.06-17.66 0-35.31 0-53v-52.29c0-2 .47-2.57 2.51-2.56q22.16.14 44.33 0c1.72 0 2.35.36 2.35 2.25q-.09 52.86 0 105.71c0 2.57-1.41 2.13-2.9 2.2zm4.21-112.83h-52c-.91 0-2.06.36-2.11-1.26s1.17-1.43 2.18-1.43h52c1 0 2.25-.4 2.22 1.38s-1.35 1.3-2.29 1.3z" />
          </g>
        </g>
        <g className="house" id="house-six" ref={(h) => (this.houseSix = h)} data-project={5} onClick={(e) => this.mouseAction(e)} >
          <g id="bg-fill" className="bg-fill" >
            <path fill="#bd9ec9" d="M751.19 225.73h27.99v165.55h-27.99z" />
            <path fill="#906c99" d="M751.16 264.15l-.21 11.61 28.28-27.75-.11-10.55-27.96 26.69zm.5 22.38l-.21 11.61 28.27-27.75-.1-10.55-27.96 26.69zm-.33 23.54l-.21 11.6 28.27-27.74-.1-10.55-27.96 26.69zm-.17 23.37l-.21 11.6 28.28-27.74-.11-10.56-27.96 26.7zm0 22.38l-.21 11.61 28.28-27.75-.11-10.55-27.96 26.69zm-.16 23.54l-.21 11.6 28.27-27.75-.1-10.55-27.96 26.7zm14.99 8.54l13.33-12.02-1.32 15.47-13.16-.66 1.15-2.79zm-15.31-145.49l.33 10.21 19.26-18.6-13.17.66-6.42 7.73z" />
          </g>
          <path id="stroke" fill="#333" d="M780 387.27q.1-54.82.06-109.63v-49.61c0-2.28-.68-3.21-3-3.07-2.76.16-5.55-.08-8.31.07-2.15.12-2.69-.72-2.68-2.77.08-13.86 0-27.72 0-41.58v-2.27c0-.76-.08-1.52-.93-1.56s-1.21.74-1.25 1.56v43.6c0 2.25-.49 3.2-2.92 3-2.84-.21-5.71 0-8.57-.07-1.77 0-2.62.58-2.66 2.46-.07 3.53.25 6.85.25 8.56v152.63a3.51 3.51 0 0 0 .81 2.4h29c.45-.62.2-2.09.2-3.72zm-25.8-159.95h21.67c2.52 0 2 1.73 2 3.15s.32 3-2 2.92c-3.69-.07-7.39 0-11.09 0-3.53 0-7.06-.09-10.58 0-2 .07-2.3-.92-2.1-2.48s-.8-3.6 2.1-3.59zm-2.09 55.13c-1-4.49 1.35-7.58 4.31-10.47 6.62-6.47 13.2-13 19.81-19.46a1.85 1.85 0 0 1 1.59-.78v6.37a2.92 2.92 0 0 1-1.12 2.15l-22.92 22.94c-.35.35-.66.91-1.2.76-.79-.23-.36-1-.47-1.51zm0-27.4a3.37 3.37 0 0 1 1.17-2.64q7.75-7.74 15.46-15.51c1-1 6.86-2 8.13-1.21s.1 1.27-.31 1.7q-3.11 3.28-6.33 6.47-8.38 8.33-16.8 16.63a1.19 1.19 0 0 1-1.32.41v-5.85zm13.52-18.18q-6.42 6.68-12.88 13.32l-.81-.59v-6.48a3 3 0 0 1 1.12-2.17 15.36 15.36 0 0 0 2.47-2.5c2.41-3.9 6.23-2.86 9.73-2.9 1.16 0 .89.76.36 1.32zm9.21 14c-7.06 6.4-13.59 13.4-20.36 20.13-.62.62-1.09 1.5-2.43 1.65.16-3.82-.75-7.41 2.86-10.69 7.24-6.58 14-13.75 20.89-20.66.5-.5.85-1.27 2-1.26.16 4 .62 7.51-3 10.83zm-21.33-15.6c.77 0 1.33.25 1.2 1.17-.17 1.2-1.18 1.5-2.1 1.89-.89 0-.84-.62-.88-1.2a1.55 1.55 0 0 1 1.77-1.86zm.88 50.43c7.2-7 14.27-14.22 21.42-21.32.49-.48.87-1.5 1.74-1.1.7.31.26 1.21.36 1.84.59 3.87-.81 6.68-3.74 9.41-6.75 6.28-13.11 13-19.65 19.5-.63.63-1.24 1.9-2.1 1.56-1.06-.43-.3-1.78-.46-2.72a10.42 10.42 0 0 1 0-1.42c-.63-2.2.61-4 2.46-5.74zm22.43 55.33l-23.14 23.1c-.35.35-.65.86-1.23.62s-.35-.85-.42-1.32c-.72-4.69 1.13-8 4.72-11.13 6.39-5.66 12.21-12 18.23-18a19.21 19.21 0 0 0 1.87-2.65l1 .75v6.73a2.71 2.71 0 0 1-1 1.93zm-2.41 13.93c-7.08 6.28-13.51 13.29-20.23 20-.56.56-.91 1.46-2.11 1.41-.21-4-.59-7.56 3-10.86 7-6.36 13.49-13.33 20.21-20a5 5 0 0 1 2.29-1.79c.35 4.14.73 7.8-3.16 11.22zm-22.35-3.82c-.64-3.81.84-6.54 3.66-9.19 7-6.61 13.7-13.57 20.52-20.38.33-.33.57-.87 1.42-.67.18 4 .56 7.53-3.23 10.89-7.14 6.31-13.59 13.41-20.33 20.17-.49.5-.88 1.5-1.75 1.06-.58-.34-.14-1.24-.25-1.88zm24.53-33.11l-22.77 22.75c-.4.4-.71 1.07-1.41.79s-.37-1-.44-1.55c-.52-3.89.59-6.86 3.67-9.7 7.09-6.53 13.73-13.54 20.55-20.35.34-.34.73-.64 1.64-1.43v7.4c0 1-.62 1.51-1.2 2.09zm1.2-37a2.67 2.67 0 0 1-.87 2l-23.67 23.7a7 7 0 0 1-1.22.69c.1-3.84-.88-7.26 2.44-10.37 7.46-7 14.56-14.37 21.82-21.58.33-.33.55-.87 1.5-.8v6.42zm-22.59 26.6c7.21-6.54 13.9-13.65 20.8-20.52.41-.41.85-.78 1.83-1.68v7.42a2.38 2.38 0 0 1-.89 1.73l-23.66 23.68a5.72 5.72 0 0 1-1.26.67c-.27-4.29-.45-7.94 3.22-11.27zm.48 11.21c7.32-7 14.25-14.33 21.34-21.54l.75.45v6.47a2.93 2.93 0 0 1-1.18 2.12l-22.68 22.77c-.39.39-.75 1.07-1.41.81s-.31-1-.39-1.56c-.52-3.79.69-6.71 3.61-9.48zm-3.34 69c-1-.36-.33-1.47-.45-2.24-.55-3.58.73-6.21 3.44-8.77 7.49-7 14.66-14.44 22.29-22 .49 4.7.51 8.4-3.35 11.83-7.06 6.28-13.49 13.28-20.2 20-.47.48-.93 1.49-1.66 1.22zm6 2.18a35.58 35.58 0 0 0-4.1 0l23.5-23.45c-.1 4.06 1.06 7.8-2.78 10.89a89.93 89.93 0 0 0-10 9.92c-1.85 2-3.81 3-6.55 2.67zm7.79-.17l11.46-11c1.65 7.9-1.49 12.72-11.4 11z" />
        </g>
        <g className="house" id="house-five" ref={(h) => (this.houseFive = h)} data-project={4} onClick={(e) => this.mouseAction(e)}>
          <g id="bg-fill-3" className="bg-fill">
            <path fill="#e5432e" d="M685.51 388.52v-95.36l6.31-.93 4.44-6.78 2.34-10.99 2.57.7 1.64-5.61 4.44-2.33 5.37 1.4 2.57 4.21v2.33l2.81-.46 2.34 10.98 3.27 4.44 3.04 2.11 3.74 1.4 1.16 2.57v91.15l-1.63 3.04-38.8 1.17-5.61-3.04z" />
            <g fill="#eaa27d">
              <path d="M703.27 288.49h10.28v11.45h-10.28zm-12.85 18.23h8.88v11.45h-8.88zm13.71-.46h8.72v12.11h-8.72zm13.44.82h9.03v11.19h-9.03zm-26.78 18.27h8.62v16.83h-8.62zm13.13.1h9.24v16.73h-9.24zm13.14-.31h9.65v17.03h-9.65zm-26.17 22.27h8.31v18.57h-8.31zm13.24.21h8.93v18.16h-8.93zm13.54 0h8.83v18.27h-8.83zm-4.61 39.91v-17.75h-9.04v17.75h-2.15v2.57h13.34v-2.57h-2.15z" />
              <circle cx="708.34" cy="274.45" r="1.95" />
            </g>
          </g>
          <g id="stroke-3" fill="#333" data-name="stroke">
            <path d="M731.3 292.65l-.31-.26a3.89 3.89 0 0 0-2.37-.8h-1.12a9.31 9.31 0 0 1-1.29-.57c-3.45-1.87-4.93-5.58-5.57-7.16a18.19 18.19 0 0 1-1.12-8.92 3.72 3.72 0 0 0 .15-1.22 18.24 18.24 0 0 0-3.44 0 7.83 7.83 0 0 0-7.81-7.35h-.51a8 8 0 0 0-6.11 3.75 7.45 7.45 0 0 0-1 3.71 25.13 25.13 0 0 0-3.61-.18c-.16.17 0 1.17 0 1.17a25 25 0 0 1-1.41 9.07c-1 2.71-2.05 5.78-4.77 7.41l-.51.27h-2.09a4 4 0 0 0-4 4v92a3.94 3.94 0 0 0 3.94 3.94h40.25a3.94 3.94 0 0 0 3.94-3.94v-92a3.92 3.92 0 0 0-1.24-2.92zm-31.89-16.7c.23-.2 3.69.37 3.88.19s-.22-1.33-.22-1.33a5.48 5.48 0 0 1 .6-3.6 5.69 5.69 0 0 1 4.37-2.67h.37a5.71 5.71 0 0 1 4.87 2.79 5.78 5.78 0 0 1 .77 3.4 3.8 3.8 0 0 0-.09 1.17c.11.18 3.12-.21 3.29 0s.28 6 1.37 8.77c.72 1.8 2.41 6 6.55 8.26a11.57 11.57 0 0 0 1.86.8h1.59a1.7 1.7 0 0 1 1 .32l.21.17a1.75 1.75 0 0 1 .58 1.35v92a1.77 1.77 0 0 1-1.76 1.76h-40.24a1.77 1.77 0 0 1-1.76-1.76v-92a1.77 1.77 0 0 1 .49-1.22 1.75 1.75 0 0 1 1.27-.55h2.77l.13-.06a9.5 9.5 0 0 0 .92-.49c3.39-2 4.67-5.65 5.7-8.55s1.26-8.55 1.48-8.75z" />
            <path d="M708.47 271.82a2.54 2.54 0 0 0-2.54 2.61 2.48 2.48 0 0 0 2.51 2.49 2.51 2.51 0 0 0 2.61-2.53 2.57 2.57 0 0 0-2.58-2.57zm.06 3.95a1.35 1.35 0 1 1 1.35-1.35 1.35 1.35 0 0 1-1.35 1.35zm-5.94 24.67h11.61l.73-.07a.7.7 0 0 0 .68-.67.63.63 0 0 0-.58-.75c-.93 0-.78-.58-.78-1.12v-9c0-.8-.23-1-1-1-3.12 0-6.24.05-9.36 0-.92 0-1.19.21-1.17 1.16.07 3 0 6 0 9 0 .33.24.85-.4.9s-1 .21-1 .84.77.62 1.27.71zm1.54-10.25a.88.88 0 0 1 .88-.88h6.93a.88.88 0 0 1 .88.88v7.92a.88.88 0 0 1-.88.88h-6.93a.88.88 0 0 1-.88-.88zm-14.39 28.91h10.31l.65-.08a.69.69 0 0 0 .61-.71c0-.42-.19-.81-.51-.8-.82 0-.69-.61-.69-1.19v-9.56c0-.84-.21-1.07-.9-1.06-2.77 0-5.54.06-8.31 0-.81 0-1.06.22-1 1.22.06 3.19 0 6.38 0 9.56 0 .34.21.9-.35.95s-.9.22-.86.89.61.69 1.05.78zm1.37-10.84a.87.87 0 0 1 .78-.93h6.15a.87.87 0 0 1 .78.93v8.38a.87.87 0 0 1-.78.93h-6.15a.87.87 0 0 1-.78-.93zm25.64 10.84h10.31l.65-.08a.69.69 0 0 0 .61-.71c0-.42-.19-.81-.51-.8-.82 0-.69-.61-.69-1.19v-9.56c0-.84-.21-1.07-.9-1.06-2.77 0-5.54.06-8.31 0-.81 0-1.06.22-1 1.22.06 3.19 0 6.38 0 9.56 0 .34.21.9-.35.95s-.9.22-.86.89.61.69 1.05.78zm1.37-10.84a.87.87 0 0 1 .78-.93h6.15a.87.87 0 0 1 .78.93v8.38a.87.87 0 0 1-.78.93h-6.15a.87.87 0 0 1-.78-.93zm-14.87 10.84h10.31l.65-.08a.69.69 0 0 0 .61-.71c0-.42-.19-.81-.51-.8-.82 0-.69-.61-.69-1.19v-9.56c0-.84-.21-1.07-.9-1.06-2.77 0-5.54.06-8.31 0-.81 0-1.06.22-1 1.22.06 3.19 0 6.38 0 9.56 0 .34.21.9-.35.95s-.9.22-.86.89.61.69 1.05.78zm1.37-10.84a.87.87 0 0 1 .78-.93h6.15a.87.87 0 0 1 .78.93v8.38a.87.87 0 0 1-.78.93h-6.14a.87.87 0 0 1-.78-.93zm-14.88 34.57h10.31l.65-.08a.69.69 0 0 0 .61-.71c0-.42-.19-.81-.51-.8-.82 0-.69-.61-.69-1.19V325.4c0-.84-.21-1.07-.9-1.06-2.77 0-5.54.06-8.31 0-.81 0-1.06.22-1 1.22.06 3.19 0 11.46 0 14.65 0 .34.21.9-.35.95s-.9.22-.86.89.61.68 1.05.78zm1.37-15.92a.87.87 0 0 1 .78-.93h6.15a.87.87 0 0 1 .78.93v13.46a.87.87 0 0 1-.78.93h-6.15a.87.87 0 0 1-.78-.93zm25.64 15.92h10.31l.65-.08a.69.69 0 0 0 .61-.71c0-.42-.19-.81-.51-.8-.82 0-.69-.61-.69-1.19V325.4c0-.84-.21-1.07-.9-1.06-2.77 0-5.54.06-8.31 0-.81 0-1.06.22-1 1.22.06 3.19 0 11.46 0 14.65 0 .34.21.9-.35.95s-.9.22-.86.89.61.68 1.05.78zm1.37-15.92a.87.87 0 0 1 .78-.93h6.15a.87.87 0 0 1 .78.93v13.46a.87.87 0 0 1-.78.93h-6.15a.87.87 0 0 1-.78-.93zm-14.87 15.92h10.31l.65-.08a.69.69 0 0 0 .61-.71c0-.42-.19-.81-.51-.8-.82 0-.69-.61-.69-1.19V325.4c0-.84-.21-1.07-.9-1.06-2.77 0-5.54.06-8.31 0-.81 0-1.06.22-1 1.22.06 3.19 0 11.46 0 14.65 0 .34.21.9-.35.95s-.9.22-.86.89.61.68 1.05.78zm1.37-15.92a.87.87 0 0 1 .78-.93h6.15a.87.87 0 0 1 .78.93v13.46a.87.87 0 0 1-.78.93h-6.14a.87.87 0 0 1-.78-.93zm-14.88 39.66h10.31l.65-.08a.69.69 0 0 0 .61-.71c0-.42-.19-.81-.51-.8-.82 0-.69-.61-.69-1.19v-15.91c0-.84-.21-1.07-.9-1.06-2.77 0-5.54.06-8.31 0-.81 0-1.06.22-1 1.22.06 3.19 0 12.72 0 15.91 0 .34.21.9-.35.95s-.9.22-.86.89.61.67 1.05.78zm1.37-17.18a.87.87 0 0 1 .78-.93h6.15a.87.87 0 0 1 .78.93v14.72a.87.87 0 0 1-.78.93h-6.15a.87.87 0 0 1-.78-.93zm25.64 17.18h10.31l.65-.08a.69.69 0 0 0 .61-.71c0-.42-.19-.81-.51-.8-.82 0-.69-.61-.69-1.19v-15.91c0-.84-.21-1.07-.9-1.06-2.77 0-5.54.06-8.31 0-.81 0-1.06.22-1 1.22.06 3.19 0 12.72 0 15.91 0 .34.21.9-.35.95s-.9.22-.86.89.61.67 1.05.78zm1.37-17.18a.87.87 0 0 1 .78-.93h6.15a.87.87 0 0 1 .78.93v14.72a.87.87 0 0 1-.78.93h-6.15a.87.87 0 0 1-.78-.93zm-14.87 17.18h10.31l.65-.08a.69.69 0 0 0 .61-.71c0-.42-.19-.81-.51-.8-.82 0-.69-.61-.69-1.19v-15.91c0-.84-.21-1.07-.9-1.06-2.77 0-5.54.06-8.31 0-.81 0-1.06.22-1 1.22.06 3.19 0 12.72 0 15.91 0 .34.21.9-.35.95s-.9.22-.86.89.61.67 1.05.78zm1.37-17.18a.87.87 0 0 1 .78-.93h6.15a.87.87 0 0 1 .78.93v14.72a.87.87 0 0 1-.78.93h-6.14a.87.87 0 0 1-.78-.93zm16.07-53.58h6c.33 0 .71 0 .74-.46s-.31-.53-.66-.54h-6.13c-.35 0-.7 0-.68.52s.39.48.73.48zm0 2.41h6c.33 0 .71 0 .74-.46s-.31-.53-.66-.54h-6.13c-.35 0-.7 0-.68.52s.39.48.73.48zm-31.72-2.41h6c.33 0 .71 0 .74-.46s-.31-.53-.66-.54h-6.13c-.35 0-.7 0-.68.52s.39.48.73.48zm0 2.41h6c.33 0 .71 0 .74-.46s-.31-.53-.66-.54h-6.13c-.35 0-.7 0-.68.52s.39.48.73.48zm11.83-20.32h1.73c.1 0 .2 0 .21-.41s-.09-.47-.19-.47h-1.77c-.1 0-.2 0-.2.46s.12.42.22.42zm0 2.13h1.73c.1 0 .2 0 .21-.41s-.09-.47-.19-.47h-1.77c-.1 0-.2 0-.2.46s.12.41.22.42zm13.13-2.13h1.73c.1 0 .2 0 .21-.41s-.09-.47-.19-.47h-1.77c-.1 0-.2 0-.2.46s.13.42.22.42zm0 2.13h1.73c.1 0 .2 0 .21-.41s-.09-.47-.19-.47h-1.77c-.1 0-.2 0-.2.46s.13.41.22.42zm1.78 106.91h-1.76v-15a3.26 3.26 0 0 0-3.25-3.25h-4.42a3.26 3.26 0 0 0-3.25 3.25v15h-1.76a.59.59 0 0 0-.59.59v1.4a.59.59 0 0 0 .59.59h14.44a.59.59 0 0 0 .59-.59v-1.36a.59.59 0 0 0-.59-.63zm-11.25-15a2.16 2.16 0 0 1 2.16-2.16h3.88a2.16 2.16 0 0 1 2.16 2.16v15h-8.19zm10 16.81h-12a.545.545 0 0 1 0-1.09h12a.545.545 0 1 1 0 1.09z" />
          </g>
        </g>
        <g className="house" id="house-four" ref={(h) => (this.houseFour = h)} data-project={3} onClick={(e) => this.mouseAction(e)}>
          <g id="bg-fill-4" className="bg-fill">
            <path fill="#e4982f" d="M488.89 390.11V337.9l-2.67-.5v-2.68l3.34-1.17 4.02-16.73 3.01-.17-.54-4.12 3.22-.9.17-3.18 4.18-.16.96 4.39 1.88-.55v3.52l25.7 1.14 4.12 16.96 2.71.61.2 2.81-2.81 1.4-.3 10.05 31.43 14.05.4 27.61-79.02-.17z" />
            <path fill="#f9cf47" d="M495.02 345.98h12.53v13.29h-12.53zm21.64-.19h14.05v14.05h-14.05zm-.57 25.06h15.19v13.86h-15.19zm29.24.57h12.53v13.29h-12.53zm-9.2-37.59l-4.04-16.63-38.58.03-3.99 16.6h-3.23v3.34h52.9v-3.34h-3.06zm-36.69-25.38h4.7v2.59h-4.7zm7.92 79.32v-16.54h-11.77v16.54h-1v3.59h15.43v-3.59h-2.66zm29.21-37.88v3.78l30.98 12.08-.04-3.08-30.94-12.78z" />
          </g>
          <g id="stroke-4" data-name="stroke">
            <rect width="11.01" height="12.27" x="545.85" y="371.84" fill="none" rx="1.11" ry="1.11" />
            <path fill="none" d="M528.89 371.65h-10.9a1.1 1.1 0 0 0-.69.25.69.69 0 0 0-.32.41 1.1 1.1 0 0 0-.1.46v2.28a1.25 1.25 0 0 0-.09.61c.06 1.11 0 2.22 0 3.33v3.59a.88.88 0 0 0 .26.81 1.11 1.11 0 0 0 .95.54h10.89a1.12 1.12 0 0 0 1.11-1.11v-10a1.12 1.12 0 0 0-1.11-1.17zm36.96-5.32q-13.56-5.29-27.09-10.66c-1.31-.52-1.31.11-1.2 1v28.61c0 1.26-.18 3.57.15 3.79.16.14 5.55.1 8.32.15h19.9c.81 0 1.08-.24 1.07-1.06 0-3.82.05-7.65 0-11.47 0-2.84-.08-5.69-.13-8.53.34-.97-.08-1.46-1.02-1.83zm-6.32 19.55l-.93.09h-14.71c-.63-.12-1.46 0-1.54-.91s.52-1 1.22-1.07.5-.72.5-1.14c0-3.82.07-7.65 0-11.47 0-1.2.33-1.49 1.49-1.47 4 .07 7.92.06 11.87 0 1 0 1.3.26 1.28 1.27-.06 3.82 0 7.65 0 11.47 0 .69-.19 1.47 1 1.42a.8.8 0 0 1 .73 1 .89.89 0 0 1-.91.81zm-54.27-14.23c-2.53.05-5.06 0-7.59 0-.88 0-1.25.18-1.24 1.16v12.69c0 .89.3 1.14 1.15 1.12 2.57 0 5.14-.06 7.72 0 1 0 1.2-.33 1.17-1.23-.06-2.07 0-4.15 0-6.22v-6.35c.03-.94-.3-1.19-1.21-1.17zm-17.31-12.87zm29.1-.6a1.11 1.11 0 0 0 .95.54h10.89a1.12 1.12 0 0 0 1.11-1.11v-10.04a1.12 1.12 0 0 0-1.11-1.11h-10.9a1.1 1.1 0 0 0-.69.25 1.12 1.12 0 0 0-.32.41 1.1 1.1 0 0 0-.1.46v10a1.1 1.1 0 0 0 .17.6zm12.65-4.28v-1.79c-.01.6 0 1.2 0 1.79z" />
            <rect width="11.01" height="12.27" x="495.92" y="346.44" fill="none" rx="1.11" ry="1.11" />
            <path fill="none" d="M508.41 387.77h-13.82c-.5 0-1.09-.17-1.11.72s.52.76 1.06.76h13.87c.5 0 1.09.18 1.1-.71s-.54-.77-1.1-.77zm29.95-51.71c0-.4-.08-.71-.57-.71h-50c-.48 0-.58.32-.57.72s.12.61.52.63h50.07c.38.03.6-.21.55-.64zm.55 17.22c3.65 1.39 7.23 3 10.85 4.4 5.32 2.12 10.66 4.19 16 6.27.33.13.78.56 1 0a.82.82 0 0 0-.5-1.19c-.38-.14-.73-.32-1.1-.48l-17.75-7.54-9.73-4.11c-.4 1.37-.1 2.14 1.23 2.65zm20.15 4.82c.61 0 .32-.51.35-.79a9.21 9.21 0 0 0 0-1.19v-1.72c0-.45-.24-.63-.67-.62s-.62.14-.63.52v3c.04.6.5.79.95.8zm-58.56-47.36c.38 0 .85.13.89-.49 0-.32 0-.64.48-.65s.62.25.62.67.26.51.62.48.4-.36.45-.67c.25-1.52-.83-1.19-1.66-1.2h-1.33c-.7.07-.45.65-.47 1s-.14.82.4.86zm-1.63 4.83h5.71c.5 0 .85-.1.87-.72a1.29 1.29 0 0 0 0-.41 2.27 2.27 0 0 0 0-.39c0-1-.26-1.36-.87-1.35h-5.71c-.62 0-.88.37-.86 1.36a2.26 2.26 0 0 0 0 .39 1.33 1.33 0 0 0 0 .41c.01.6.4.71.86.71z" />
            <path fill="none" d="M507.73 387.77H495.5a.51.51 0 0 0 0 1h12.23a.51.51 0 1 0 0-1zm-14.92-54.54h39.9c1.91 0 1.91 0 1.62-1.94-.08-.57-.23-1.13-.28-1.7s-.45-2.3-.57-3c-.18-1-.35-1.92-.53-2.87-.42-2.25-.42-2.25-2.68-2.52a3.13 3.13 0 0 1-.4-.05.44.44 0 0 1-.34-.5.43.43 0 0 1 .37-.47c.31 0 .63 0 .93-.06.49-.09 1.39.32 1.27-.64-.1-.72.17-1.81-1.32-1.81q-17.75.07-35.5 0a1.13 1.13 0 0 0-1.32 1.12c-.35 2.1-.75 4.19-1.17 6.27-.48 2.37-.5 2.36 1.82 2.51.38 0 .89-.11.91.49s-.55.55-1 .57c-2.61.13-2.62.13-3 2.77a1.79 1.79 0 0 1 0 .4c-.51 1.35.21 1.44 1.29 1.43zm12.45 38.42c-2.53.05-5.06 0-7.59 0-.88 0-1.25.18-1.24 1.16v12.69c0 .89.3 1.14 1.15 1.12 2.57 0 5.14-.06 7.72 0 1 0 1.2-.33 1.17-1.23-.06-2.07 0-4.15 0-6.22v-6.35c.03-.94-.3-1.19-1.21-1.17zm-4.76-60.91h2.61s.4-.36.45-.67c.25-1.52-.83-1.19-1.66-1.2h-1.33c-.7.07-.45.65-.47 1s-.14.83.4.87zm65.35 55.59q-13.56-5.29-27.09-10.66c-1.31-.52-1.31.11-1.2 1v28.61c0 1.26-.18 3.57.15 3.79.16.14 5.55.1 8.32.15h19.9c.81 0 1.08-.24 1.07-1.06 0-3.82.05-7.65 0-11.47 0-2.84-.08-5.69-.13-8.53.34-.97-.08-1.46-1.02-1.83zm-26.94-13.05c3.65 1.39 7.23 3 10.85 4.4 5.32 2.12 10.66 4.19 16 6.27.33.13.78.56 1 0a.82.82 0 0 0-.5-1.19c-.38-.14-.73-.32-1.1-.48l-17.75-7.54-9.73-4.11c-.4 1.37-.1 2.14 1.23 2.65zm-.55-17.22c0-.4-.08-.71-.57-.71h-50c-.48 0-.58.32-.57.72s.12.61.52.63h50.07c.38.03.6-.21.55-.64z" />
            <path fill="none" d="M535.41 366.81v-3a1.38 1.38 0 0 0 0-.15c0-7.82-.05-15.65-.07-23.47.21-1-.13-1.3-1.16-1.3h-42.91c-1 0-1.42.3-1.16 1.31 0 .4-.07.8-.07 1.19v21.79a1.46 1.46 0 0 0-.06.3v24.5c0 .79-.09 1.54 1.12 1.38.86-.11 2 .3 1.71-1.3-.11-.62.07-1.07.83-.94 1 .17 1.15-.33 1.14-1.21v-14.69c0-1 .15-1.39 1.28-1.36 3.6.08 7.21.08 10.82 0 1.08 0 1.31.31 1.3 1.34-.05 4.9 0 9.79 0 14.69 0 .84.08 1.41 1.11 1.23.83-.14 1.17.23 1 1-.2 1.06.3 1.21 1.25 1.21h15.36c2.89-.07 8 .18 8.36-.37s.3-2.73.29-4.18v-17.5a1.35 1.35 0 0 0-.14-.47z" />
            <path fill="#333" d="M571.41 389.78c-.73-.11-1.76.37-2.11-.29a5.71 5.71 0 0 1-.14-2.49c0-1.29.05-2.57.08-3.86v-15.47c.54.2.94.38 1.36.5a1.072 1.072 0 1 0 .77-2 8.84 8.84 0 0 0-1.48-.59c-1.25-.3-1.91-1-1.64-2.33.19-1-.27-1.44-1.15-1.78-1.82-.7-3.59-1.55-5.41-2.24-.86-.33-14.79-6.28-15.29-6.49q-4-1.74-8.1-3.42a1 1 0 0 1-.75-1.07v-8.55c0-.72.23-.89.92-.9 2 0 2-.07 2-2.13v-1.07c0-2.39 0-2.43-2.35-2.38-.94 0-1.28-.24-1.45-1.2-.89-5-1.92-9.95-2.8-14.94-.22-1.24-.76-1.59-2-1.59H510.1c-2.44 0-2.44 0-2.44-2.41 0-2.24 0-2.26-2.36-2.38-.53 0-.77-.11-.81-.72-.15-2.24-.18-2.24-2.44-2.24h-1.34c-1.72 0-1.79 0-1.71 1.73 0 1-.23 1.29-1.24 1.24-1.61-.08-1.76.14-1.78 1.73v1.2c0 1.84 0 1.92-1.81 1.81-1.42-.09-1.93.46-2.17 1.83-.88 5-1.88 10-2.82 14.93-.11.58-.19.93-.94 1-3.3.16-3.3.19-3.29 3.48v.53c-.06 1.11.41 1.74 1.57 1.57s1.37.35 1.37 1.41v40.7l-.09 10.29c13.35 0 27.52 0 40.87-.1 1.43 0 16.18.06 17.88.07 8 .05 16 0 24 0h.8a.65.65 0 0 0 .64-.71c.07-.42-.2-.6-.58-.67zm-70.82-80.9h1.33c.83 0 1.91-.32 1.66 1.2-.05.31 0 .64-.45.67s-2.23 0-2.61 0c-.54 0-.42-.5-.41-.82s-.25-.97.45-1.04zm-2.56 5.15c0-1 .24-1.37.86-1.36h5.71c.61 0 .88.36.87 1.35a2.27 2.27 0 0 1 0 .39 1.29 1.29 0 0 1 0 .41c0 .62-.36.72-.87.72h-5.71c-.5 0-.85-.09-.87-.71a1.33 1.33 0 0 1 0-.41 2.26 2.26 0 0 1-.02-.39zm-6.46 17.79a1.79 1.79 0 0 0 0-.4c.37-2.64.37-2.64 3-2.77.41 0 1 .13 1-.57s-.54-.47-.91-.49c-2.32-.14-2.3-.14-1.82-2.51.42-2.08.82-4.17 1.17-6.27a1.13 1.13 0 0 1 1.32-1.12h35.5c1.49 0 1.22 1.08 1.32 1.81.13 1-.77.55-1.27.64-.3.05-.62 0-.93.06a.43.43 0 0 0-.37.47.44.44 0 0 0 .34.5 3.13 3.13 0 0 0 .4.05c2.26.28 2.26.28 2.68 2.52.18 1 .35 1.92.53 2.87.12.67.52 2.29.57 3s.19 1.13.28 1.7c.29 1.94.29 1.94-1.62 1.94h-39.95c-1.08-.01-1.8-.1-1.26-1.43zm16.18 57H495.5a.51.51 0 0 1 0-1h12.23a.51.51 0 1 1 0 1zm-1.34-9.64v6.22c0 .9-.21 1.25-1.17 1.23-2.57-.06-5.14 0-7.72 0-.85 0-1.16-.23-1.15-1.12v-12.69c0-1 .36-1.17 1.24-1.16 2.53 0 5.06.05 7.59 0 .91 0 1.25.23 1.22 1.18-.01 2.11-.01 4.22-.01 6.34zm29 5.59c0 1.44.1 3.63-.29 4.18s-5.47.3-8.36.37H511.4c-.94 0-1.45-.15-1.25-1.21.15-.81-.18-1.18-1-1-1 .18-1.12-.39-1.11-1.23v-14.69c0-1-.22-1.36-1.3-1.34-3.6.07-7.21.08-10.82 0-1.13 0-1.28.39-1.28 1.36v14.69c0 .88-.15 1.37-1.14 1.21-.77-.13-.94.32-.83.94.29 1.6-.85 1.19-1.71 1.3-1.21.15-1.12-.59-1.12-1.38v-24.5a1.46 1.46 0 0 1 .06-.3v-21.79c0-.4 0-.8.07-1.19-.26-1 .15-1.32 1.16-1.31h42.91c1 0 1.37.33 1.16 1.3 0 7.82 0 15.65.07 23.47a1.38 1.38 0 0 1 0 .15v3a1.35 1.35 0 0 1 .07.46c.13 5.79.15 11.57.15 17.51zm-22.83-48h-24.87c-.4 0-.51-.28-.52-.63s.09-.71.57-.72h50c.49 0 .57.31.57.71s-.17.67-.62.66h-25.05zm25 13.9l9.73 4.11 17.81 7.54c.37.16.73.34 1.1.48a.82.82 0 0 1 .5 1.19c-.25.56-.7.13-1 0-5.33-2.08-10.67-4.15-16-6.27-3.63-1.44-7.21-3-10.85-4.4-1.29-.55-1.59-1.32-1.23-2.69zm29.36 37.56c0 .82-.27 1.06-1.07 1.06h-19.9c-2.77 0-8.16 0-8.32-.15-.32-.22-.1-2.53-.15-3.79V356.7c-.11-.93-.12-1.56 1.2-1q13.52 5.39 27.09 10.66c.95.37 1.36.86 1.08 1.86 0 2.84.12 5.69.13 8.53.06 3.82-.01 7.61 0 11.44z" />
            <path fill="#333" d="M515.04 360.65a30.1 30.1 0 0 1 5-.11c3.95 0 7.9-.14 11.85.09 1.21-.55 1.52-1.45.59-1.85s-.8-.88-.8-1.54v-11.47c0-.95-.3-1.2-1.22-1.19h-14.54c-1 0-1.28.29-1.26 1.28.05 3.87 0 7.74 0 11.6 0 .36.23.87-.25 1.07s-1.07.53-.93 1.24 1.01.68 1.56.88zm1.76-6.88v-3.33a1.25 1.25 0 0 1 .09-.61v-2.26a1.1 1.1 0 0 1 .1-.46.69.69 0 0 1 .32-.41 1.1 1.1 0 0 1 .69-.25h10.89a1.12 1.12 0 0 1 1.11 1.11v10a1.12 1.12 0 0 1-1.11 1.11h-10.9a1.11 1.11 0 0 1-.95-.54.88.88 0 0 1-.26-.81c.07-1.15.02-2.35.02-3.55zm15.72 30.21c-.84-.36-.8-.88-.8-1.54v-11.47c0-.95-.3-1.2-1.22-1.19h-14.54c-1 0-1.28.29-1.26 1.28.05 3.87 0 7.74 0 11.6 0 .36.23.87-.25 1.07s-1.07.53-.93 1.24.93.69 1.49.89a30.11 30.11 0 0 1 5-.11c3.95 0 7.9-.14 11.85.09 1.29-.55 1.55-1.46.66-1.86zM530 382.8a1.12 1.12 0 0 1-1.11 1.11h-10.9a1.11 1.11 0 0 1-.95-.54.88.88 0 0 1-.26-.81c.06-1.19 0-2.39 0-3.59v-3.33a1.25 1.25 0 0 1 .09-.61v-2.28a1.1 1.1 0 0 1 .1-.46.69.69 0 0 1 .32-.41 1.1 1.1 0 0 1 .69-.25h10.89a1.12 1.12 0 0 1 1.11 1.11zm-36.04-22.23h14.72l.93-.09a.89.89 0 0 0 .87-.85.8.8 0 0 0-.73-1c-1.18 0-1-.73-1-1.42v-11.47c0-1-.29-1.28-1.28-1.27-4 .05-7.92.07-11.87 0-1.16 0-1.52.27-1.49 1.47.08 3.82 0 7.65 0 11.47 0 .41.3 1.08-.5 1.14s-1.29.27-1.22 1.07.94.83 1.57.95zm2-13a1.12 1.12 0 0 1 1.11-1.11h8.78a1.12 1.12 0 0 1 1.11 1.11v10a1.12 1.12 0 0 1-1.11 1.11h-8.78a1.12 1.12 0 0 1-1.11-1.11zm63.71 36.5c-1.18 0-1-.73-1-1.42v-11.47c0-1-.29-1.28-1.28-1.27-4 .05-7.92.07-11.87 0-1.16 0-1.52.27-1.49 1.47.08 3.82 0 7.65 0 11.47 0 .41.3 1.08-.5 1.14s-1.29.27-1.22 1.07.91.8 1.54.91h14.76l.93-.09a.89.89 0 0 0 .87-.85.8.8 0 0 0-.74-.96zm-2.82-1.07a1.12 1.12 0 0 1-1.11 1.11h-8.78a1.12 1.12 0 0 1-1.11-1.11v-10a1.12 1.12 0 0 1 1.11-1.11h8.78a1.12 1.12 0 0 1 1.11 1.11zm-40.77-61.68h6.53c.39 0 .86.06.88-.54s-.4-.74-.89-.74h-6.53c-.45 0-.8.1-.79.65s.36.63.8.63zm-17.83 6.87c0 .5.43.49.79.49h6.78c.38 0 .87.08.88-.52s-.46-.55-.85-.55h-6.78c-.41-.04-.86-.04-.82.58zm-.63-7.47c0 .5.28.49.51.49h4.44c.25 0 .57.08.58-.52s-.3-.55-.56-.55h-4.44c-.26 0-.55-.02-.53.58zm20.55 7.47c0 .5.58.49 1.06.49h9.18c.52 0 1.17.08 1.19-.52s-.62-.55-1.15-.55h-9.16c-.56-.04-1.17-.04-1.12.58zm-11.13-3.1h11.92c.66 0 1.4 0 1.47-.49s-.61-.57-1.31-.57h-12.17c-.69 0-1.39 0-1.35.55s.81.51 1.44.51z" />
            <path fill="#333" d="M517.05 358.18a1.1 1.1 0 0 1-.17-.57v-7.77a1.25 1.25 0 0 0-.09.61c.06 1.11 0 2.22 0 3.33v3.59a.88.88 0 0 0 .26.81zm-.07-11.08a1.12 1.12 0 0 1 .32-.41.69.69 0 0 0-.32.41zm12.7 8.6v-3.58 1.79s.01 1.19 0 1.79zm-41.75-.91v4-3.7c.02-.11.01-.2 0-.3zm2.1 9.64a3 3 0 0 1 0-.51 3.07 3.07 0 0 0 0 .51z" />
          </g>
        </g>
        <g className="house" id="house-three" ref={(h) => (this.houseThree = h)} data-project={2} onClick={(e) => this.mouseAction(e)}>
          <g id="bg-fill-5" className="bg-fill">
            <path fill="#18a9e2" d="M368.86 301.21h48.57v89.63h-48.57z" />
            <path fill="#0d729e" d="M366.93 305.74h51.61v3.66h-51.61zm0 17.09h51.61v3.66h-51.61zm0 17.09h51.61v3.66h-51.61zm0 16.91h51.61v3.66h-51.61zm0 17.26h51.61v3.66h-51.61zm14.71 7.86h22.89v9.23h-22.89zm9.09-82.94h17.08v2.75h-17.08z" />
          </g>
          <g id="stroke-5" data-name="stroke">
            <path fill="#333" d="M419.56 389.74c-1 0-1.5-.24-1.48-1.36.05-2.82 0-5.65 0-8.47 0-.32 0-.8.17-.92 2.05-1.33.78-3.37 1.11-5.06 0-.15 0-.39-.08-.47-2.19-1.77-.91-4.2-1.18-6.33a29.9 29.9 0 0 1 0-3.74c0-.76-.11-1.51.83-1.91.52-.22.52-.82.46-1.3-.2-1.66.65-3.47-1.15-4.91-.45-.36-.3-1-.32-1.54q0-1.19-.05-2.39v-4.02c0-1 .07-2.11.94-2.73a1.37 1.37 0 0 0 .56-1.43c-.22-1.61.79-3.51-1.14-4.76-.23-.15-.14-.82-.14-1.25v-6.85c0-1.1-.23-2.17 1-3 .83-.57.35-4.74-.49-5.43a1.45 1.45 0 0 1-.51-1.28v-8.48c0-.53-.08-1.21.66-1.29 1.34-.14 1.38-1.06 1.28-2-.16-1.46.67-3.14-1.1-4.29-.51-.33-.19-1.34-.18-2 0-1.1-.46-1.59-1.57-1.57h-6.69c-.95 0-1.6-.18-1.57-1.32s-.63-1.26-1.51-1.26h-16c-.89 0-1.54.27-1.46 1.28.1 1.3-.67 1.34-1.64 1.34h-19.09c-2.06 0-2.11.06-2.14 2.1 0 .79.12 1.54-.85 2.07s-.49 1.5-.43 2.27c.11 1.34-.84 3.21 1.62 3.55.38.05.31.64.31 1v8.65c0 .32 0 .81-.17.92-2.07 1.33-.78 3.37-1.11 5.05 0 .15 0 .4.08.47 2.11 1.6.94 3.87 1.17 5.84a28.91 28.91 0 0 1 0 3.75c0 .94.2 1.85-.94 2.52-.82.49-.51 4.92.31 5.45.66.43.63.95.63 1.53v7.34c0 1 .23 1.94-1 2.68-.89.55-.39 4.74.5 5.52a1.16 1.16 0 0 1 .45 1c-.07 2.5.17 5-.13 7.49v2c-1.71 1.48-1.1 3.47-1.15 5.31 0 .26 0 .68.19.75 1.57.77 1.05 2.19 1.08 3.41v6.83c0 1-.36 1.34-1.33 1.32h-5.85v2h63.32v-2c-1.29-.09-2.75-.13-4.22-.08zm-20.34-90.17h7.26a.715.715 0 1 1 0 1.43h-7.68v-.15a.7.7 0 0 1-.29-.56.72.72 0 0 1 .71-.72zm-6.64 0h4.09a.715.715 0 1 1 0 1.43h-4.09a.715.715 0 0 1 0-1.43zm-22.72 3.39h46.15c.65 0 .77.48.76 1s-.18.86-.72.89-.87 0-1.3 0h-44.86c-.65 0-.77-.48-.76-1s.17-.88.72-.91zm21 86.79h-3.43a21 21 0 0 0-2.61 0c-1.64.21-2.09-.5-2-2a40.28 40.28 0 0 0 0-4.08c0-.76.32-1.08 1.07-1.07h7c.65 0 1 .24 1 .95v5.22c.08.8-.38.97-1.08.96zm12.21-1.18c0 .87-.39 1.15-1.19 1.13h-3.43c-4.51 0-4.52 0-4.5-4.49 0-3-.31-2.65 2.73-2.67h5.22c.83 0 1.19.31 1.17 1.15q-.05 2.47 0 4.88zm13.06-.23c0 1-.3 1.38-1.31 1.37q-4.24-.06-8.48 0c-1 0-1.32-.42-1.31-1.37v-6.2c0-1.09-.42-1.59-1.54-1.59h-21c-1.22 0-1.62.55-1.6 1.7v6c0 1.05-.35 1.45-1.42 1.43q-4.16-.07-8.32 0c-1.11 0-1.39-.47-1.37-1.48 0-2.66.08-5.33 0-8 0-1.34.47-1.65 1.71-1.65h42.91c1.35 0 1.81.4 1.76 1.76-.11 2.73-.07 5.4-.03 8.06zm.65-11.72a11.64 11.64 0 0 1-1.3 0h-45.07a12.92 12.92 0 0 1-1.3 0c-.56-.06-.66-.47-.67-.94s.1-.89.65-1a11.66 11.66 0 0 1 1.3 0h45a12.94 12.94 0 0 1 1.3 0c.56.06.66.47.67.94s-.03.95-.58 1.03zm-35.91-9.32v4.07c0 1-.3 1.38-1.31 1.36q-4.23-.06-8.47 0c-1 0-1.33-.39-1.32-1.35v-8.31c0-1 .31-1.47 1.4-1.45q4.15.08 8.31 0c1.07 0 1.45.39 1.4 1.44-.06 1.45-.01 2.86-.01 4.27zm2-4.23c0-1 .33-1.45 1.4-1.44q8.72.05 17.44 0c1.07 0 1.42.4 1.41 1.44 0 2.66-.07 5.33 0 8 0 1.26-.34 1.74-1.66 1.7-2.88-.09-5.76 0-8.64 0h-8.47c-1.15 0-1.51-.41-1.49-1.52.02-2.68.02-5.43-.03-8.15zm33.29 4.15v4.23c0 .89-.31 1.28-1.23 1.27h-8.63c-.92 0-1.24-.39-1.23-1.27v-8.47c0-1 .31-1.37 1.32-1.36q4.23.06 8.47 0c1 0 1.35.4 1.31 1.36-.09 1.45-.05 2.86-.05 4.28zm.16-7.54h-45.91a11.57 11.57 0 0 1-1.3 0c-.56-.06-.65-.48-.65-1s.11-.89.67-.94a13 13 0 0 1 1.3 0h45.82c.69 0 1.15.17 1.15 1s-.44.98-1.13.98zm-35.44-39.11c0 .9-.33 1.27-1.24 1.26h-8.63c-.79 0-1.22-.25-1.21-1.12v-8.8c0-.82.32-1.18 1.16-1.17h8.8c.86 0 1.15.4 1.13 1.2v4.23s-.05 2.95-.01 4.4zm-10.4 3.23h45a12.87 12.87 0 0 1 1.3 0c.56.06.66.48.65.95s-.11.88-.68.93-.87 0-1.3 0h-45.04a12.84 12.84 0 0 1-1.3 0c-.56-.06-.66-.48-.65-.95s.11-.88.68-.93.9.01 1.33.01zm12.36-11.72c0-1 .34-1.35 1.33-1.35h17.6c1 0 1.32.41 1.31 1.36v8.31c0 1-.35 1.45-1.41 1.43H384.4c-1.07 0-1.59-.25-1.56-1.45.05-2.75.03-5.52-.01-8.29zm22.21 4.11v-4.07c0-.93.26-1.4 1.29-1.38h8.63c.82 0 1.18.32 1.17 1.16v8.8c0 .86-.4 1.14-1.2 1.13h-8.63c-.9 0-1.28-.34-1.26-1.25.02-1.45-.01-2.91-.01-4.38zm0 13c0-1.1.3-1.57 1.47-1.54 2.77.06 5.54 0 8.31 0 1 0 1.36.37 1.33 1.35v8.3c0 1-.3 1.47-1.39 1.45q-4.15-.08-8.31 0c-1.07 0-1.43-.38-1.41-1.43q.05-4-.03-8.07zm-1.95 8.15c0 1.06-.37 1.44-1.42 1.42h-17.11c-1.22 0-1.77-.27-1.73-1.63.1-2.66.07-5.32 0-8 0-1.14.38-1.51 1.51-1.51q8.64.06 17.28 0c1 0 1.49.27 1.47 1.37q-.1 4.26-.02 8.41zm-22.19-.07c0 1.15-.4 1.55-1.52 1.49-1.35-.07-2.71 0-4.07 0h-4.07c-1 0-1.47-.3-1.45-1.39q.08-4.15 0-8.31c0-1.07.39-1.43 1.43-1.41 2.71 0 5.43.05 8.14 0 1.1 0 1.56.31 1.54 1.48q-.12 4.13-.02 8.2zm-11.75 3.47a12.27 12.27 0 0 1 1.3 0h45a12.27 12.27 0 0 1 1.3 0c.56.06.66.47.66.95s-.1.89-.66.95a12.24 12.24 0 0 1-1.3 0h-45.05a12.24 12.24 0 0 1-1.3 0c-.56-.06-.66-.47-.66-.95s.13-.82.69-.88zm35.89 5.3c0-.91.21-1.43 1.26-1.41h8.63c.94 0 1.21.43 1.2 1.3v8.47c0 1-.37 1.36-1.34 1.33h-8.3c-1 0-1.48-.29-1.46-1.38.04-2.71.02-5.48-.01-8.25zm-22.2 0c0-1 .34-1.44 1.41-1.44q8.72.05 17.44 0c1.08 0 1.42.41 1.4 1.44 0 2.72-.05 5.43 0 8.15 0 1.12-.34 1.54-1.49 1.52-2.93-.06-5.87 0-8.8 0-2.77 0-5.54-.06-8.31 0-1.32 0-1.69-.44-1.65-1.7.05-2.56.03-5.23-.02-7.89zm-13 4v-4.23c0-.82.32-1.18 1.16-1.17h8.8c.72 0 1.13.25 1.13 1v9c0 .88-.47 1.1-1.23 1.09h-8.63c-.93 0-1.24-.4-1.22-1.28-.04-1.41-.07-2.88-.07-4.34zm47.56-41.28a12 12 0 0 1-1.3 0h-46.32a12.48 12.48 0 0 1-1.3 0c-.56-.06-.66-.47-.66-.95s.1-.89.66-1a12 12 0 0 1 1.3 0h46.33a12.51 12.51 0 0 1 1.3 0c.56.06.66.47.66.95s-.1.94-.67 1z" />
            <path fill="none" d="M392.58 300.97h4.09a.715.715 0 1 0 0-1.43h-4.09a.715.715 0 0 0 0 1.43zm6.59-.01h7.36a.715.715 0 1 0 0-1.43h-7.26a.72.72 0 0 0-.71.71.73.73 0 0 0 .67.7zm17.59 73.79a12.94 12.94 0 0 0-1.3 0h-45.05a11.66 11.66 0 0 0-1.3 0c-.56.06-.65.48-.65 1s.11.89.67.94a12.92 12.92 0 0 0 1.3 0h45a11.64 11.64 0 0 0 1.3 0c.56-.06.65-.48.65-1s-.06-.88-.62-.94zm-35.89-62.8c0-.8-.28-1.2-1.13-1.2h-8.8c-.84 0-1.16.35-1.16 1.17v8.8c0 .87.43 1.12 1.21 1.12h8.63c.91 0 1.26-.36 1.24-1.26v-4.4s-.01-2.82.01-4.23zm-1.39 49.71q-4.15.07-8.31 0c-1.08 0-1.41.42-1.4 1.45v8.31c0 1 .32 1.37 1.32 1.35q4.23-.06 8.47 0c1 0 1.34-.41 1.31-1.36v-8.3c.05-1.06-.32-1.47-1.39-1.45zm36.81-3.92h-45.88a13 13 0 0 0-1.3 0c-.56.06-.67.47-.67.94s.1.89.65 1a11.57 11.57 0 0 0 1.3 0h45.84c.68 0 1.16-.15 1.16-1s-.41-.96-1.1-.94zm-1.48 3.92q-4.23.06-8.47 0c-1 0-1.33.4-1.32 1.36v8.47c0 .89.31 1.28 1.23 1.27h8.63c.92 0 1.25-.38 1.23-1.27v-8.46c.05-.97-.29-1.38-1.3-1.37zm-30.49 11.11c2.82-.06 5.65 0 8.47 0s5.76-.06 8.64 0c1.32 0 1.69-.44 1.66-1.7-.08-2.66-.06-5.32 0-8 0-1-.33-1.44-1.41-1.44q-8.72.05-17.44 0c-1.08 0-1.42.4-1.4 1.44 0 2.72.05 5.43 0 8.15-.04 1.14.32 1.58 1.48 1.55z" />
            <path fill="none" d="M398.8 300.96h.37a.7.7 0 0 1-.37-.14zm-28.91 3.9h46.16s.72-.4.72-.89-.11-1-.76-1h-46.15s-.71.4-.72.89.1.96.75 1zm34.86-3.89h-3.63c1.21.02 2.42.05 3.63 0zm-13.82 81.6h-7c-.76 0-1.08.32-1.07 1.07a40.28 40.28 0 0 1 0 4.08c-.13 1.53.32 2.24 2 2a21 21 0 0 1 2.61 0h3.43c.7 0 1.16-.18 1.15-1v-5.22c-.09-.69-.47-.93-1.12-.93zm10.97 0h-5.22c-3 0-2.73-.34-2.73 2.67 0 4.49 0 4.49 4.5 4.49h3.43c.8 0 1.21-.26 1.19-1.13v-4.89c.02-.84-.34-1.14-1.17-1.14z" />
            <path fill="none" d="M414.41 378.62c-7.12.06-14.25 0-21.37 0H371.5c-1.24 0-1.75.31-1.71 1.65.09 2.66.06 5.33 0 8 0 1 .26 1.5 1.37 1.48q4.16-.08 8.32 0c1.07 0 1.44-.38 1.42-1.43-.05-2 0-4 0-6 0-1.15.38-1.7 1.6-1.7h21c1.12 0 1.56.5 1.54 1.59v6.2c0 1 .29 1.39 1.31 1.37q4.24-.06 8.48 0c1 0 1.32-.41 1.31-1.37 0-2.66-.08-5.33 0-8 .05-1.39-.41-1.84-1.73-1.79zm-35.06-50.91c-2.71.05-5.43 0-8.14 0-1 0-1.45.34-1.43 1.41q.07 4.15 0 8.31c0 1.09.42 1.43 1.45 1.39 1.36-.06 2.71 0 4.07 0s2.72-.05 4.07 0c1.12.06 1.54-.34 1.52-1.49q-.09-4.07 0-8.14c.02-1.17-.48-1.5-1.54-1.48zM371 355.79h8.63c.77 0 1.24-.21 1.23-1.09v-9c0-.78-.41-1-1.13-1h-8.8c-.84 0-1.17.35-1.16 1.17v8.63c-.01.88.3 1.3 1.23 1.29zm13.48.02c2.77-.09 5.54 0 8.31 0h8.8c1.15 0 1.52-.4 1.49-1.52-.06-2.72 0-5.43 0-8.15 0-1-.32-1.45-1.4-1.44q-8.72.05-17.44 0c-1.07 0-1.43.39-1.41 1.44 0 2.66.07 5.33 0 8-.04 1.22.32 1.71 1.65 1.67zm32.93-48.95a12.51 12.51 0 0 0-1.3 0h-46.32a12 12 0 0 0-1.3 0c-.56.06-.66.48-.66 1s.11.89.66.95a12.48 12.48 0 0 0 1.3 0h46.33a12 12 0 0 0 1.3 0c.56-.06.66-.48.66-1s-.1-.89-.67-.95zm-48.92 17.91c0 .47.09.89.65.95a12.84 12.84 0 0 0 1.3 0h46.3s.68-.45.68-.93-.09-.89-.65-.95a12.87 12.87 0 0 0-1.3 0h-46.3s-.67.45-.68.93zm37.99 31.02c1.36-.06 2.71 0 4.07 0h4.23c1 0 1.36-.34 1.34-1.33v-8.47c0-.86-.26-1.31-1.2-1.3h-8.63c-1.05 0-1.27.51-1.26 1.41v8.31c-.03 1.09.38 1.43 1.45 1.38zm-4.87-28.07h-17.28c-1.13 0-1.53.37-1.51 1.51.06 2.66.09 5.33 0 8 0 1.36.51 1.66 1.73 1.63 2.77-.06 5.54 0 8.31 0h8.8c1.06 0 1.44-.36 1.42-1.42q-.07-4.15 0-8.31c.02-1.14-.46-1.42-1.47-1.41zm-17.2-5.87h17.27c1.07 0 1.43-.38 1.41-1.43v-8.31c0-1-.3-1.37-1.31-1.36h-17.6c-1 0-1.34.37-1.33 1.35 0 2.77.06 5.54 0 8.31-.05 1.16.47 1.46 1.56 1.44zm21.88-.01h8.63c.8 0 1.2-.27 1.2-1.13v-8.8c0-.83-.35-1.16-1.17-1.16h-8.63c-1 0-1.32.45-1.29 1.38v8.47c-.02.91.38 1.25 1.26 1.24zm.12 16.98q4.15-.07 8.31 0c1.09 0 1.43-.43 1.39-1.45-.06-1.41 0-2.82 0-4.23v-4.07c0-1-.33-1.36-1.33-1.35-2.77 0-5.54.06-8.31 0-1.17 0-1.49.44-1.47 1.54q.08 4.07 0 8.14c.01 1.04.41 1.44 1.41 1.42zm-37.27 3.88a12.24 12.24 0 0 0 1.3 0h45a12.24 12.24 0 0 0 1.3 0c.56-.06.66-.48.66-.95s-.1-.89-.66-.95a12.27 12.27 0 0 0-1.3 0h-45.03a12.27 12.27 0 0 0-1.3 0c-.56.06-.66.48-.66.95s.13.9.69.95z" />
            <path fill="#333" d="M399.22 300.97h1.9-2z" />
          </g>
        </g>
        <g className="house" id="house-two" ref={(h) => (this.houseTwo = h)} data-project={1} onClick={(e) => this.mouseAction(e)}>
          <g id="bg-fill-6" className="bg-fill">
            <path fill="#51bb9d" d="M300.59 353.32l-29.14 16-.11 3.81 4.57-1.85.33 19.13 48.05-.43.54-18 4.46 1.52.54-3.37z" />
            <path fill="#356958" d="M295.07 380.35h9.65v10.09h-9.65zm-17.51-10.49l22.47-13.21 24.1 14.24-47.43-.17.86-.86zm34.98-15.54h3.69v7.16h-3.69z" />
            <rect width="5.52" height="4.81" x="297.46" y="361.42" fill="#51bb9d" rx="1.54" ry="1.54" />
          </g>
          <g id="stroke-6" data-name="stroke">
            <path fill="none" d="M315.1 360.29v-4.72h-1.93c-.64 3.34-.33 4.08 1.93 4.72zm-5.48 9.55h10.93a6.18 6.18 0 0 0-.55-.48c-6.34-3.7-12.67-7.41-19-11.05a2 2 0 0 0-1.65.08c-5.39 3.09-10.75 6.24-16.12 9.38l-3.32 1.93a15.66 15.66 0 0 0 1.74.23c8.5 0 17-.05 25.5-.05zm-9.43-3.22a2.86 2.86 0 0 1-2.91-2.88 2.94 2.94 0 0 1 2.93-3 3 3 0 0 1 3 3 2.91 2.91 0 0 1-3.02 2.88zm-20.57 19.66c-2.59 0-2.59 0-2.32 2.73h17v-2.67c-.54 0-1-.07-1.49-.07zm43.56-4.94h-8.28c-1 0-2.19.32-3-.34a.87.87 0 0 1-.37-.73.89.89 0 0 1 .46-.62c1-.59 11.25-.07 11.25-.25v-2.83h-17.16a2.32 2.32 0 0 1-1.85-.71.49.49 0 0 1-.12-.48.52.52 0 0 1 .17-.18 5 5 0 0 1 3.14-.58h15.71v-2.8h-45.94v1.94c-.07.81.39 1 1.05 1 5.66 0 11.32 0 17 .06.56 0 1 .12 1.07.73.08.77-.56.91-1.2 1-3.31.29-6.69.07-10 .07h-7.79v2.8h10c.74 0 1.46.11 1.45 1s-.75 1-1.48 1h-9.96v2.87h17.08v-3.39c0-.86.27-1.29 1.26-1.28 2.91 0 5.81-.06 8.72-.1 1.19 0 1.7.54 1.63 1.74-.06 1 0 2 0 3h17.19z" />
            <path fill="none" d="M296.34 387.02c0 2.11 0 2.1 2.15 2.09h5.42v-7.54h-7.57v5.45zm9.66 2.03h17.23v-2.79H306zm21.16-19.18l-16.75-9.73c-2.4-1.4-4.88-2.68-7.16-4.25s-2.88-1.82-5.25-.41l-.58.34-24.12 14.05c-.64.37-1.4.69-.81 1.72.28-.13.53-.21.76-.34l13.65-7.94c4-2.35 8.06-4.68 12-7.08a2.22 2.22 0 0 1 2.59 0c5.55 3.26 11.13 6.48 16.69 9.71l9.79 5.71c.54-1.14-.19-1.42-.81-1.78z" />
            <path fill="#333" d="M328.96 368.57c-3.59-2-7.12-4.13-10.7-6.17a1.64 1.64 0 0 1-1-1.68c.07-1.93 0-3.86 0-5.78 0-.92-.36-1.42-1.37-1.38h-3.63c-1 0-1.32.5-1.3 1.41s0 1.92 0 3.12c-.65-.34-1-.54-1.42-.75-2.59-1.51-5.21-3-7.74-4.55a2.68 2.68 0 0 0-3.18 0c-8.45 5-16.93 9.9-25.41 14.83-3.17 1.84-3.18 1.82-3 5.53.07 1.41.64 1.72 1.91 1 .93-.51 1.85-1 2.93-1.66.06.76.16 1.33.15 1.89 0 4.92 0 9.84-.05 14.76 0 1.82.08 1.89 1.89 1.89h46.4c1.17 0 1.82-.23 1.75-1.64-.1-2 0-3.93 0-5.9v-11c1.28.73 2.26 1.34 3.28 1.86s1.57.11 1.63-1v-2.55a2.09 2.09 0 0 0-1.14-2.23zm-15.8-13h1.93v4.72c-2.25-.64-2.56-1.38-1.93-4.72zm-18.83 33.44h-17c-.28-2.73-.28-2.73 2.32-2.73h13.23c.48 0 1 0 1.49.07zm9.58.1h-5.42c-2.15 0-2.15 0-2.15-2.09v-5.48h7.57zm2.09-7.94c.07-1.2-.44-1.76-1.63-1.74-2.91 0-5.81.12-8.72.1-1 0-1.27.42-1.26 1.28v3.39h-17.12v-2.87h9.96c.73 0 1.47-.11 1.48-1s-.71-1-1.45-1h-10v-2.76h7.79c3.32 0 6.7.22 10-.07.64-.06 1.28-.2 1.2-1-.07-.61-.5-.73-1.07-.73-5.66 0-11.32-.09-17-.06-.66 0-1.12-.18-1.05-1 .05-.57 0-1.15 0-1.94h45.94v2.8h-15.65a5 5 0 0 0-3.14.58.52.52 0 0 0-.17.18.49.49 0 0 0 .12.48 2.32 2.32 0 0 0 1.85.71h17.14v2.81c0 .17-10.28-.35-11.25.25a.89.89 0 0 0-.46.62.87.87 0 0 0 .37.73c.82.65 2.05.34 3 .34h8.28v2.88h-17.17c0-.94-.04-1.96.02-2.98zm-26.12-11.49l3.32-1.93c5.37-3.14 10.72-6.29 16.12-9.38a2 2 0 0 1 1.65-.08c6.37 3.65 12.7 7.35 19 11.05a6.18 6.18 0 0 1 .55.48h-13.43c-8.5 0-17 0-25.5.05a15.66 15.66 0 0 1-1.71-.18zm43.35 19.37H306v-2.79h17.23zm4.77-17.37l-9.79-5.71c-5.56-3.24-11.14-6.45-16.69-9.71a2.22 2.22 0 0 0-2.59 0c-4 2.41-8 4.73-12 7.08l-13.65 7.94c-.23.13-.48.22-.76.34-.59-1 .17-1.35.81-1.72l24.08-14.09.58-.34c2.37-1.4 2.88-1.23 5.25.41s4.76 2.85 7.16 4.25l16.73 9.73c.65.37 1.38.65.88 1.82z" />
            <path fill="#333" d="M300.22 360.72a2.94 2.94 0 0 0-2.93 3 2.86 2.86 0 0 0 2.91 2.88 2.91 2.91 0 0 0 3-2.92 3 3 0 0 0-2.98-2.96zm.07 4.56a1.56 1.56 0 1 1 1.56-1.56 1.56 1.56 0 0 1-1.57 1.57z" />
          </g>
        </g>
        <g className="house" id="house-one" ref={(h) => (this.houseOne = h)} data-project={0} onClick={(e) => this.mouseAction(e)}>
          <g id="bg-fill-7" className="bg-fill">
            <path fill="#b6d788" d="M175.93 209.27v-13.4h-36.91v13.4h-15.76v181.9h70.2v-181.9h-17.53z" />
            <path fill="#7a9b51" d="M192.38 209.27h-69.12v35.32h69.12v10.51h-69.47v10.51h69.47v9.83h-69.81v10.84h69.81v21.01h-69.81v10.17h69.81v10.51h-68.8v10.5h68.8v20.34h-70.15v10.84h70.15v10.17h-68.46v9.83h68.46v1.52h1.08v-181.9h-1.08z" />
          </g>
          <path id="stroke-7" fill="#333" d="M122.57 390.26a.51.51 0 0 1-.51-.51V211.87a3.26 3.26 0 0 1 3.26-3.26h12.37v-13.89h19.55v-.26c.1-1.09.11-2.47.11-4.3v-54.08c0-1.45 0-3-.87-3.84a3.09 3.09 0 0 0-2.3-.76h-.5c-.86 0-1.18-.7-1.3-1.28-.24-1.09.94-1.38 1.08-1.41a24.87 24.87 0 0 1 5.32-.54 37.89 37.89 0 0 1 5.61.45 1.33 1.33 0 0 1 1.16 1.4 1.49 1.49 0 0 1-1.44 1.39h-.69a2.79 2.79 0 0 0-2.08.69c-.75.75-.81 2-.8 3.36.07 23.15.06 41.87 0 58.9v.29h18.22v13.84h12.37a3.26 3.26 0 0 1 3.28 3.3v177.36a1 1 0 0 1-1 1zm3.69-9.45a1.3 1.3 0 0 0-1.3 1.3v4.92a1.3 1.3 0 0 0 1.3 1.3h64a1.3 1.3 0 0 0 1.3-1.3v-4.92a1.3 1.3 0 0 0-1.3-1.3zm0-9.56a1.3 1.3 0 0 0-1.3 1.3v4.92a1.3 1.3 0 0 0 1.3 1.3h64a1.3 1.3 0 0 0 1.3-1.3v-4.9a1.3 1.3 0 0 0-1.3-1.3zm0-10.42a1.3 1.3 0 0 0-1.3 1.3v4.92a1.3 1.3 0 0 0 1.3 1.3h64a1.3 1.3 0 0 0 1.3-1.3v-4.92a1.3 1.3 0 0 0-1.3-1.3zm.65-20.84a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h62.66a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2zm-.65-10.42a1.31 1.31 0 0 0-1.3 1.3v4.92a1.31 1.31 0 0 0 1.3 1.3h64a1.31 1.31 0 0 0 1.3-1.3v-4.92a1.3 1.3 0 0 0-1.3-1.3zm0-10.42a1.3 1.3 0 0 0-1.3 1.3v4.92a1.3 1.3 0 0 0 1.3 1.3h64a1.3 1.3 0 0 0 1.3-1.3v-4.92a1.3 1.3 0 0 0-1.3-1.3zm0-10.42a1.3 1.3 0 0 0-1.3 1.3v4.92a1.3 1.3 0 0 0 1.3 1.3h64a1.31 1.31 0 0 0 1.3-1.3v-4.92a1.3 1.3 0 0 0-1.3-1.3zm.65-20.84a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h62.66a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2zm-.65-10.42a1.3 1.3 0 0 0-1.3 1.3v4.92a1.3 1.3 0 0 0 1.3 1.3h64a1.3 1.3 0 0 0 1.3-1.3v-4.92a1.3 1.3 0 0 0-1.3-1.3zm0-10.42a1.31 1.31 0 0 0-1.3 1.3v4.92a1.3 1.3 0 0 0 1.3 1.3h64a1.31 1.31 0 0 0 1.3-1.3v-4.9a1.3 1.3 0 0 0-1.3-1.3zm0-10.42a1.3 1.3 0 0 0-1.3 1.3v4.92a1.3 1.3 0 0 0 1.3 1.3h64a1.3 1.3 0 0 0 1.3-1.3v-4.92a1.3 1.3 0 0 0-1.3-1.3zm0-10.42a1.3 1.3 0 0 0-1.3 1.3v4.92a1.3 1.3 0 0 0 1.3 1.3h64a1.3 1.3 0 0 0 1.3-1.3v-4.86a1.3 1.3 0 0 0-1.3-1.3zm.46-34.73a1.76 1.76 0 0 0-1.76 1.76v30.08h66.57v-30.06a1.76 1.76 0 0 0-1.76-1.76zm15.07-13.91a1.21 1.21 0 0 0-1.21 1.21v8.59a1.21 1.21 0 0 0 1.21 1.21h32.9a1.21 1.21 0 0 0 1.21-1.21v-8.59a1.21 1.21 0 0 0-1.21-1.21z" data-name="stroke" />
        </g>
        <g className="house" id="wheel" onClick={(e) => this.mouseAction(e)} data-project={7} ref={(b) => (this.wheel2 = b)}>
          <g ref={(b) => (this.wheel = b)} >
            <g id="bg-fill-3-2" className="bg-fill">
              <circle cx="968.74" cy="279.11" r="4.87" fill="#ff893b" />
              <circle cx="968.74" cy="375.19" r="4.87" fill="#ff893b" />
              <circle cx="920.7" cy="327.15" r="4.87" fill="#ff893b" />
              <circle cx="1017.07" cy="327.15" r="4.87" fill="#ff893b" />
              <circle cx="968.91" cy="327.15" r="13.87" fill="#ff893b" />
              <circle cx="935.12" cy="293.41" r="4.87" fill="#ff893b" />
              <circle cx="935.12" cy="361.6" r="4.87" fill="#ff893b" />
              <circle cx="1002.36" cy="361.6" r="4.87" fill="#ff893b" />
              <circle cx="1002.36" cy="293.17" r="4.87" fill="#ff893b" />
              <circle cx="968.67" cy="327.58" r="7.83" fill="#ffca53" />
            </g>
            <path fill="none" stroke="#333" strokeWidth="2" strokeMiterlimit="10" d="M973.43 279.43A47.87 47.87 0 0 1 999 290a4.76 4.76 0 0 0 .17 6.82l-2.89 2.89a38.93 38.93 0 0 0-27.62-11.44V284a4.77 4.77 0 0 0 4.77-4.57zM955.57 364a50.2 50.2 0 0 1-7.77-4c-1.29-.8-2.56-1.64-3.78-2.54-.24-.18-3-2.42-3-2.5l-3 3a4.76 4.76 0 0 1 .19 6.68 43.53 43.53 0 0 0 6.73 4.4 61.41 61.41 0 0 0 7.12 3.47 42.18 42.18 0 0 0 6.05 1.8c.48.11 5.73 1 5.73.92a4.77 4.77 0 0 1 4.77-4.55v-4.25a39.56 39.56 0 0 1-7.46-.71 31 31 0 0 1-5.58-1.72zm-15.87-70.51a4.76 4.76 0 0 1-1.45 3.42l2.79 2.79a38.93 38.93 0 0 1 27.62-11.44V284a4.77 4.77 0 0 1-4.77-4.54A47.87 47.87 0 0 0 938.26 290a4.76 4.76 0 0 1 1.45 3.45zm-14.16 33.66v.18h4.08a38.93 38.93 0 0 1 11.44-27.62l-2.79-2.79a4.77 4.77 0 0 1-6.76-.1 47.87 47.87 0 0 0-10.64 25.51 4.78 4.78 0 0 1 4.67 4.78zm73.63-30.33l-2.89 2.89a38.93 38.93 0 0 1 11.44 27.62h4.28v-.18a4.77 4.77 0 0 1 4.51-4.76 47.87 47.87 0 0 0-10.73-25.65 4.77 4.77 0 0 1-6.61.09zm-61.09 61.09l3-3a38.93 38.93 0 0 1-11.44-27.62h-4.08a4.77 4.77 0 0 1-4.74 4.6 47.87 47.87 0 0 0 10.72 25.94 4.76 4.76 0 0 1 6.57.05zm73.93-30.59h-4.28a38.93 38.93 0 0 1-11.44 27.62l2.9 2.9a4.76 4.76 0 0 1 6.57.09 47.87 47.87 0 0 0 10.78-26 4.77 4.77 0 0 1-4.53-4.64zm-14.36 34a4.76 4.76 0 0 1 1.54-3.51l-1.68-1.68c-.23-.23-.69-.9-1-1-5.46 5.13-17.44 11.59-27.85 11.21-.1 1.69 0 4.25 0 4.25a4.84 4.84 0 0 1 4.77 4.55c7.62-.5 20.12-5.71 25.55-10.52a5.9 5.9 0 0 1-1.33-3.31zm-29-47.76v-25.33a38.93 38.93 0 0 0-27.62 11.44l17.91 17.91a13.69 13.69 0 0 1 9.73-4.03zm9.71 4l17.91-17.91a38.93 38.93 0 0 0-27.62-11.44v25.32a13.69 13.69 0 0 1 9.73 4.05zm0 19.42l17.91 17.91a38.93 38.93 0 0 0 11.44-27.62H982.4a13.69 13.69 0 0 1-4.02 9.73zm-13.49 3.49l-2.73-1.12a13.78 13.78 0 0 1-3.16-2.36l-17.93 17.91a39.13 39.13 0 0 0 11.75 8.1l2.73 1.1a39 39 0 0 0 13.14 2.27V341a13.73 13.73 0 0 1-3.8-.53zm-5.91-22.86l-17.91-17.91a38.93 38.93 0 0 0-11.44 27.62h25.32a13.69 13.69 0 0 1 4.03-9.74zm9.71-43.16a4.78 4.78 0 0 0-4.78 4.78v.23a4.77 4.77 0 0 0 9.53 0v-.23a4.78 4.78 0 0 0-4.75-4.82zm4.77 100.73a4.77 4.77 0 0 0-9.53 0v.23a4.78 4.78 0 1 0 9.55 0c-.01-.12-.02-.19-.02-.27zm43.34-52.81h-.26a4.77 4.77 0 0 0-4.51 4.76v.18a4.77 4.77 0 0 0 4.54 4.59h.23a4.78 4.78 0 1 0 0-9.55zm-95.95 0h-.06a4.78 4.78 0 1 0 0 9.55 4.77 4.77 0 0 0 4.74-4.6v-.18a4.78 4.78 0 0 0-4.64-4.81zM938.26 290a4.77 4.77 0 1 0 1.45 3.42 4.76 4.76 0 0 0-1.45-3.42zm64.17-1.51a4.78 4.78 0 1 0 4.78 4.78 4.76 4.76 0 0 0-4.78-4.76zm3.34 69.38a4.78 4.78 0 1 0 1.44 3.42 4.76 4.76 0 0 0-1.45-3.39zm-67.68 0a4.76 4.76 0 1 0 1.47 3.44 4.76 4.76 0 0 0-1.48-3.44zm44.32-30.59a13.73 13.73 0 1 1-4-9.71 13.69 13.69 0 0 1 3.99 9.72zm-8 5.74a8.26 8.26 0 1 0-1.5 1.17 8.09 8.09 0 0 0 1.5-1.19zm0-11.48a8.12 8.12 0 1 0 2.38 5.74 8.09 8.09 0 0 0-2.38-5.73z" />
          </g>
          <g id="bottom" className="bg-fill">
            <path id="bg-fill-2-2" fill="#ffca53" d="M961.28 341.4l-18.87 48.15 2.49 1.02 19.95-50.09-2.73-1.12-.84 2.04zm12.01 1.36l20.63 47.42 2.49-1.04-21.25-49.56-2.71 1.14.84 2.04z" data-name="bg-fill" />
          </g>
          <path fill="none" stroke="#333" strokeWidth="2" strokeMiterlimit="10" d="M961.87 339.36L952.55 363l-3.33 8.42-6.78 17.17c-.61 1.4-.75 2.45.12 2.18 1.07 0 2.22-.1 2.63-1.14l6.76-17.12 3.33-8.42 9.32-23.59a13.65 13.65 0 0 1-2.73-1.14zm35 50.17l-8-18.42-3.6-8.3-10.09-23.26a13.64 13.64 0 0 1-2.73 1.1L982.53 364l3.6 8.31 7.74 17.9a1.09 1.09 0 0 0 1.43.56l1.21-.52a.55.55 0 0 0 .36-.72z" />
          <rect fill="rgba(0,0,0,0)" stroke="none" width="100" height="170" x="920" y="270" />
        </g>
        <g id="dots" fill="#333" className="layer" data-depth="0.05">
          <circle cx="552.88" cy="96.16" r="2.47" />
          <circle cx="1016.88" cy="88.7" r="2.47" />
          <circle cx="856.4" cy="201.13" r="2.47" />
          <circle cx="544.35" cy="238.01" r="2.47" />
          <circle cx="261.05" cy="43.75" r="2.47" />
          <circle cx="6.6" cy="163.54" r="2.47" />
        </g>
        <path id="clouds" className="layer" data-depth="0.3" fill="#333" d="M66.81 39.58H41.57c-2.58 0-3.08-.64-2.55-3.19a7 7 0 0 1 7.33-5.62c1.42.09 2.09-.12 2.72-1.59a13.29 13.29 0 0 1 11.63-8.4 13.74 13.74 0 0 1 13.51 6.49c.77 1.16 1.27 1.83 3 1.51a8.68 8.68 0 0 1 10 6.76c.31 1.39.87 1.81 2.19 1.71s2.63 0 3.95 0c.79 0 1.54.18 1.51 1.16s-.7 1.19-1.52 1.19H66.81zm-3.68-2.37v-.18c6.72 0 13.45-.07 20.17 0 2.09 0 2-.78 1.31-2.18a6.71 6.71 0 0 0-8.67-3.41c-1.53.54-2.17.22-2.82-1.24a11.88 11.88 0 0 0-11.73-7.17 11.68 11.68 0 0 0-10.84 9c-.47 1.8-1.14 2-2.75 1.37a4.55 4.55 0 0 0-5.49 1.46c-.44.57-1 1.24-.72 2s1.18.36 1.8.37c6.61-.01 13.16-.02 19.74-.02zm36.96-.18c1 .33 3-.61 2.89 1.29s-1.9 1.08-3 1.11-2.82.53-2.83-1.11c-.02-1.81 1.85-.95 2.94-1.29zm696.15-3.7a2.05 2.05 0 0 1-1.46-.36 1.19 1.19 0 0 1-.22-.9c0-.52.16-1 1.47-1h2.5a11.46 11.46 0 0 1 1.2.05 14.38 14.38 0 0 0 1.48.08c3 0 4.86-1.36 6.1-4.56 1.87-4.81 6.44-5.53 9-5.53q.61 0 1.24.05h.71c2 0 2.91-1 3.72-2.65 4.17-8.56 11.82-13.67 20.46-13.67 7.56 0 14.56 4 19.21 10.91 1 1.42 1.91 2.29 3.75 2.29a7.86 7.86 0 0 0 .94-.06 22.68 22.68 0 0 1 2.72-.17c6.6 0 11 3.38 13 10.06.7 2.3 1.85 3.24 4 3.24h.61c.78-.05 1.56-.07 2.35-.07h4c.44 0 1 .14 1 1.06a.93.93 0 0 1-1 1.09c-.69.05-1.39.06-2.09.06h-94.69zm20.18-10a8.71 8.71 0 0 0-5.87 2.61c-.8.74-2.3 2.11-1.59 4a1.91 1.91 0 0 0 1.93 1.27 6.65 6.65 0 0 0 .94-.09 4.7 4.7 0 0 1 .65-.07h49.78c5.35 0 9.71 0 13.72.1h.25c1.14 0 2.74-.13 3.39-1.2s.18-2.29-.66-3.91a10.89 10.89 0 0 0-9.91-5.9 14.21 14.21 0 0 0-4.43.74 5.75 5.75 0 0 1-1.71.35c-.81 0-1.35-.32-2.23-2.16-3.58-7.5-9.91-11.63-17.81-11.63a24.76 24.76 0 0 0-2.74.16c-8.78 1-14.63 6-16.93 14.55-.6 2.22-1.28 2.41-1.86 2.41a5.6 5.6 0 0 1-2-.55 7.54 7.54 0 0 0-2.93-.7zm93.75 10.08h-10.5a1.76 1.76 0 0 1-1.22-.36.91.91 0 0 1-.21-.69c0-.74.51-1.12 1.46-1.13h10.49a1.86 1.86 0 0 1 1.37.43 1.16 1.16 0 0 1 .25.92c0 .24-.07.89-1.56.89zm-121.6.19a9.14 9.14 0 0 1-1.23-.12 9.39 9.39 0 0 0-1.24-.12 9.66 9.66 0 0 0-1.24.12 9.3 9.3 0 0 1-1.24.12c-.77 0-1.14-.18-1.15-1.22a1.41 1.41 0 0 1 .23-.93 1.53 1.53 0 0 1 1-.24h1.16a4.1 4.1 0 0 0 1-.11 5.94 5.94 0 0 0 1 .07h1.31c1.17 0 1.44.22 1.44 1.2s-.27 1.23-1.04 1.23zM377.75 152.5c-1.3 0-1.49-.51-1.5-1.05a.85.85 0 0 1 .2-.64 1.86 1.86 0 0 1 1.29-.36h5.87c1.83 0 2.75-.83 3.17-2.86a11.39 11.39 0 0 1 13.22-8.87 6.5 6.5 0 0 0 1.18.12c1.94 0 2.73-1.2 3.57-2.47 3.88-5.86 9.26-8.83 16-8.83.68 0 1.39 0 2.1.09 7.38.7 12.77 4.59 15.6 11.26.81 1.89 1.8 2.59 3.66 2.59h1.34a9.08 9.08 0 0 1 8.88 7.28c.35 1.66.34 2.6 0 3s-1.26.65-2.9.65zm56.72-2.11h12.38a5 5 0 0 1 .59.05 6.42 6.42 0 0 0 .77.06 1.72 1.72 0 0 0 1.67-1c.61-1.22-.25-2.31-.87-3.1l-.19-.24a6.93 6.93 0 0 0-5.53-2.77 6.85 6.85 0 0 0-2.79.59 4.45 4.45 0 0 1-1.58.42c-.46 0-.95-.15-1.41-1.91A16.81 16.81 0 0 0 422 129.61h-1.14a17 17 0 0 0-15.67 10.4c-.63 1.41-1.12 1.69-1.76 1.69a4.42 4.42 0 0 1-1.39-.3 11.64 11.64 0 0 0-3.86-.68 9.49 9.49 0 0 0-8.89 5.72c-.48 1.05-.92 2.16-.4 3 .39.61 1.17.88 2.54.88h.23m-25.36 2.15c-.95 0-1.26-.27-1.29-1.11a1.3 1.3 0 0 1 .2-.87 1.37 1.37 0 0 1 1-.23h1.34a3.87 3.87 0 0 0 .92-.09 4.72 4.72 0 0 0 .91.07h1.26c.58 0 .91.08 1.07.25a1.22 1.22 0 0 1 .21.87c0 .72-.21 1.08-1.33 1.08-.35 0-.73 0-1.09-.07s-.6-.06-.87-.06h-.14c-.33 0-.71 0-1.09.07s-.76.09-1.1.09z" />
        <path id="lines" className="layer" data-depth="0.08" fill="#333" d="M299.41 226.97c-1.29 0-3-1.42-8.43-6.34-1.52-1.39-3.52-3.21-4.46-3.91-1 .65-3.06 2.37-4.66 3.68-5.67 4.65-7.51 6-8.78 6-.57 0-2.29 0-13.13-10.28a1.46 1.46 0 0 1 2-2.11c4.3 4.08 9.6 8.67 11.13 9.42a68.68 68.68 0 0 0 6.93-5.29c4.83-4 5.63-4.52 6.53-4.52s1.72.59 6.39 4.85a72.82 72.82 0 0 0 6.39 5.45c.85-.64 2.73-2.52 4.15-3.93 4.84-4.83 7.14-6.94 8.85-6.94 2.42 0 8.42 6.14 13 11.29a1.46 1.46 0 1 1-2 2.11l-.15-.17c-4.11-4.59-9.33-9.73-10.86-10.3-1.19.47-4.69 4-6.8 6.07-3.8 3.79-4.88 4.77-5.92 4.89zm668.29 9.11c-1.29 0-3-1.42-8.43-6.34-1.52-1.39-3.52-3.21-4.46-3.91-1 .65-3.06 2.37-4.66 3.68-5.67 4.65-7.51 6-8.78 6-.57 0-2.29 0-13.13-10.28a1.46 1.46 0 0 1 2-2.11c4.3 4.08 9.6 8.67 11.13 9.42a68.68 68.68 0 0 0 6.93-5.29c4.83-4 5.63-4.52 6.53-4.52s1.72.59 6.39 4.85a72.82 72.82 0 0 0 6.39 5.45c.85-.64 2.73-2.52 4.15-3.93 4.84-4.83 7.14-6.94 8.85-6.94 2.42 0 8.42 6.14 13 11.29a1.46 1.46 0 0 1-2.17 1.94c-4.11-4.59-9.33-9.73-10.86-10.3-1.19.47-4.69 4-6.8 6.07-3.8 3.79-4.88 4.77-5.92 4.89zM504 32.46c-1.29 0-3-1.42-8.43-6.34-1.52-1.39-3.52-3.21-4.46-3.91-1 .65-3.06 2.37-4.66 3.68-5.67 4.65-7.51 6-8.78 6-.57 0-2.29 0-13.13-10.28a1.46 1.46 0 0 1 2-2.11c4.3 4.08 9.6 8.67 11.13 9.42a68.68 68.68 0 0 0 6.93-5.29c4.83-4 5.63-4.52 6.53-4.52s1.72.59 6.39 4.85a72.82 72.82 0 0 0 6.39 5.45c.85-.64 2.73-2.52 4.15-3.93 4.84-4.83 7.14-6.94 8.85-6.94 2.42 0 8.42 6.14 13 11.29a1.46 1.46 0 0 1-2.17 1.94c-4.11-4.59-9.33-9.73-10.86-10.3-1.19.47-4.69 4-6.8 6.07-3.8 3.79-4.88 4.77-5.92 4.89z" />
        <g id="balloon" className="layer" data-depth="0.5">
          <path fill="#333" d="M711.41 121.93a19.32 19.32 0 0 0-3.53-8c-5-6.35-13.08-6.75-14.58-6.79a18.79 18.79 0 0 0-9.61 2.15 18.33 18.33 0 0 0-8.67 10.25 18.14 18.14 0 0 0-.5 8.53c.67 4.46 2.65 7.47 4.6 10.45 2.14 3.26 3.2 4.89 5.19 5.85 1.46.71 2.38.64 9.2.59 6.61-.05 6.79.11 7.69-.25 2.82-1.13 4.28-3.6 7.19-8.54 1.78-3 2.95-5.05 3.35-8.1a17.31 17.31 0 0 0-.33-6.14zm-24.25 20.91a2 2 0 0 1-1.76 0 5.59 5.59 0 0 1-2.72-2.37 28.13 28.13 0 0 1-2.8-4.82c-1.89-4.75-2.86-7.12-2.84-10.2a15.74 15.74 0 0 1 2.59-9.37 15.34 15.34 0 0 1 8.78-5.94 18.93 18.93 0 0 0-4.1 6.77 22.58 22.58 0 0 0-.84 9.37 31.28 31.28 0 0 0 .74 5 35.68 35.68 0 0 0 1.55 4.83c.12.3.34.8.68 1.44a11.2 11.2 0 0 0 .61 1 6.91 6.91 0 0 1 .77 2.71v.07a1.85 1.85 0 0 1-.69 1.51zm11.25-1.44v-.07a6.91 6.91 0 0 1 .77-2.71 11.2 11.2 0 0 0 .61-1c.34-.64.55-1.14.68-1.44a35.67 35.67 0 0 0 1.55-4.83 31.28 31.28 0 0 0 .74-5 22.58 22.58 0 0 0-.84-9.37 18.93 18.93 0 0 0-4.1-6.77 15.34 15.34 0 0 1 8.78 5.94 15.74 15.74 0 0 1 2.59 9.37c0 3.08-1 5.45-2.84 10.2a28.13 28.13 0 0 1-2.8 4.82 5.59 5.59 0 0 1-2.72 2.37 2 2 0 0 1-1.76 0 1.85 1.85 0 0 1-.66-1.51zm-5.16 1.27c-1.77 0-3.1-2.25-4.18-4.27a28.31 28.31 0 0 1-3.09-10c-.45-3.79-.85-7.18.59-11.12.53-1.47 2.66-7.29 6.19-7.44 4-.17 6.81 7.25 7 7.64 1 2.66.88 4.74.74 8.43-.3 7.59-2.45 11.61-3.05 12.67-1.13 1.81-2.42 4.1-4.21 4.09z" />
          <path fill="none" d="M702.26 140.92l.72-.39" />
          <path fill="#333" d="M693.26 147.35c-5.74 0-6 .22-6 5.67 0 5.62.27 5.92 5.73 5.93 5.77 0 5.8 0 5.8-5.67.02-5.93.02-5.93-5.53-5.93zm3 9a9.44 9.44 0 0 1-2.85.22h-.42c-1 0-2.79 0-3.1-.31s-.31-2.08-.31-3.25 0-2.77.3-3.06 2.06-.3 3.11-.3h.21a10.42 10.42 0 0 1 3 .21 11.41 11.41 0 0 1 .22 3.36 10.48 10.48 0 0 1-.17 3.16z" />
        </g>
        <path id="trees" fill="#333" d="M219.69 346.73a24.19 24.19 0 0 0 22.89 24.13v19.83a1.28 1.28 0 1 0 2.55 0v-19.83a24.16 24.16 0 1 0-25.44-24.13zm2.55 0a21.61 21.61 0 1 1 22.89 21.57v-7.31l8.24-7.27a1.28 1.28 0 1 0-1.69-1.91l-6.55 5.76v-18.51a1.28 1.28 0 1 0-2.55 0v10.62l-4.64-4.29a1.28 1.28 0 1 0-1.73 1.87l6.37 5.89v15.14a21.64 21.64 0 0 1-20.33-21.56zm390.79 11.3a11.8 11.8 0 0 0-1 23.56v8.92a1.035 1.035 0 1 0 2.07 0v-8.94a11.8 11.8 0 0 0-1-23.56zm1 21.47v-2.76l3.73-3.29a1.038 1.038 0 1 0-1.37-1.56l-2.35 2.08v-7.74a1.035 1.035 0 0 0-2.07 0v4l-1.45-1.34a1 1 0 0 0-1.47.06 1 1 0 0 0 .06 1.47l2.86 2.64v6.46a9.73 9.73 0 1 1 2.07 0zm-141.62-20.43c0-9.95-4.91-17.74-11.17-17.74s-11.17 7.79-11.17 17.74c0 8.94 4 16.14 9.32 17.5v12.87a1.19 1.19 0 0 0 2.34 0v-12.65c5.99-.4 10.68-8.04 10.68-17.72zm-10.68 15.76v-3.42l6.35-4.68a.86.86 0 0 0 .1-1.38 1.34 1.34 0 0 0-1.65-.08l-4.8 3.53v-14.52a1.19 1.19 0 0 0-2.34 0v9.29l-3.22-2.75a1.34 1.34 0 0 0-1.66 0 .86.86 0 0 0 0 1.38l4.9 4.19v8.15c-3.93-1.57-7-8-7-15.42 0-8.56 4-15.79 8.83-15.79s8.83 7.23 8.83 15.79c-.04 8.21-3.81 15.24-8.38 15.71zm358.85 5.6v10.35a.95.95 0 0 0 1.87 0v-10.53c4.27-1.12 7.44-7 7.44-14.32 0-8.14-3.92-14.51-8.92-14.51s-8.92 6.37-8.92 14.51c0 7.93 3.72 14.18 8.53 14.5zm-6.66-14.49c0-7 3.23-12.92 7.05-12.92s7.05 5.91 7.05 12.92c0 6.07-2.43 11.33-5.57 12.61v-6.67l3.91-3.43a.72.72 0 0 0 0-1.13 1.05 1.05 0 0 0-1.32 0l-2.63 2.25V362a.95.95 0 0 0-1.87 0v11.88l-3.83-2.89a1.05 1.05 0 0 0-1.32.07.72.72 0 0 0 .08 1.13l5.07 3.83v2.8c-3.61-.37-6.62-6.12-6.62-12.88zM76.41 349.31a14.92 14.92 0 0 0-1.31 29.77v11.27a1.31 1.31 0 1 0 2.62 0v-11.27a14.92 14.92 0 0 0-1.31-29.77zm1.31 27.14v-3.49l4.71-4.15a1.322 1.322 0 1 0-1.73-2l-3 2.62v-9.76a1.31 1.31 0 0 0-2.62 0v5l-1.83-1.69a1.31 1.31 0 0 0-1.85.07 1.31 1.31 0 0 0 .07 1.85l3.61 3.34v8.16a12.3 12.3 0 1 1 2.62 0zm569.22 14.34c-.57 0-1.06-.32-1.06-.69v-17.34l-.45-.11c-7.33-1.74-12.66-11.15-12.66-22.37 0-12.71 6.64-22.66 15.13-22.66s15.13 10 15.13 22.66c0 12.4-6.22 22.14-14.47 22.64h-.55v17.13c-.01.41-.5.74-1.07.74zm9.47-32.11a1.3 1.3 0 0 1 .85.29.54.54 0 0 1 .21.43.61.61 0 0 1-.3.45l-9.18 6.31v5.41l.64-.06c6.76-.65 12.26-10.18 12.26-21.24 0-11.53-6-21.27-13-21.27s-13 9.74-13 21.27c0 9.83 4.29 18.55 10.19 20.75l.79.29v-11.74l-7.11-5.67a.58.58 0 0 1-.25-.44.59.59 0 0 1 .27-.45 1.43 1.43 0 0 1 1.62 0l5.47 4.36v-13.36c0-.37.5-.69 1.06-.69s1.06.32 1.06.69v20.14l7.65-5.26a1.35 1.35 0 0 1 .77-.21z" />
        <path id="floor" fill="none" stroke="#333" strokeWidth="2" strokeMiterlimit="10" d="M1 390.76h1050" strokeLinecap="round" />
      </svg>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <CitySvg />
    );
  };
}

ReactDOM.render(<App />, document.querySelector(".wrapper"));

编译

CSS

HTML

City Illustration with jquery.parallax and react.js

react, jquery, parallax

编辑器支持Emmet

快捷键

City Illustration with jquery.parallax and react.js

react, jquery, parallax

使用React和RXJS实现的冒泡排序算法可视化动画

使用React、MobX和jQuery实现的支付表单模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：