Skip to content

Instantly share code, notes, and snippets.

@orderthruchaos

orderthruchaos/City Construction Site.markdown

Created October 28, 2015 19:10
Show Gist options
  • Save orderthruchaos/4db55548c00e7318b611 to your computer and use it in GitHub Desktop.
Save orderthruchaos/4db55548c00e7318b611 to your computer and use it in GitHub Desktop.
Download ZIP
City Construction Site
Raw
City Construction Site.markdown

City Construction Site

Get it? Site? oh man.

Demos for GreenSock's latest 18.0 release, with stagger cycle and hsl tweens, as well as jQuery3.0 with class operations on SVG. So many goodies. SVG.

A Pen by Sarah Drasner on CodePen.

License.

Raw
index.html
<h2>Play with the Controls</h2>
<svg xmlns="http://www.w3.org/2000/svg" width="1007.4" height="395.5" viewBox="0 0 1007.4 395.5">
<g id="pull">
<path fill="#6B847F" d="M100.2 340.6c0 3.2-2.6 5.8-5.9 5.8-3.2 0-5.9-2.6-5.9-5.8 0-3.2 2.6-5.9 5.9-5.9 3.3.1 5.9 2.7 5.9 5.9z" />
<path fill="#E7FFCC" d="M97.3 340.6c0 1.6-1.3 3-3 3s-3-1.3-3-3 1.3-3 3-3 3 1.4 3 3z" />
<path fill="none" d="M206.4 347.4c3.6 0 6.5-2.9 6.5-6.5s-2.9-6.5-6.5-6.5h-11.7v13h11.7zM87.6 340.9c0 3.6 2.9 6.5 6.5 6.5h100.6v-13H94.1c-3.6 0-6.5 3-6.5 6.5z" />
<path fill="#6B847F" d="M998.7 332.4h-12v2h12c3.7 0 6.6 2.8 6.6 6.5s-3 6.5-6.6 6.5h-12v2h12c4.8 0 8.7-3.7 8.7-8.5s-3.9-8.5-8.7-8.5zM94.6 334.4h106.1v-2H94.6c-5 0-9.1 3.5-9.1 8.5s4.1 8.5 9.1 8.5h106.1v-2H94.6c-3.8 0-6.9-2.7-6.9-6.5s3.1-6.5 6.9-6.5z"
/>
<path fill="#6B847F" d="M126.2 347.4h862.6v2H126.2z" id="line" />
<path fill="#6B847F" d="M134 332.5h862.6v2H134z" id="line_2_" />
<path fill="#6B847F" d="M1003.9 340.6c0 3.2-2.6 5.8-5.9 5.8-3.2 0-5.9-2.6-5.9-5.8 0-3.2 2.6-5.9 5.9-5.9 3.3.1 5.9 2.7 5.9 5.9z" />
<path fill="#E7FFCC" d="M1001.1 340.6c0 1.6-1.3 3-3 3s-3-1.3-3-3 1.3-3 3-3 3 1.4 3 3z" />
<path fill="#6B847F" d="M292.6 340.6c0 3.2-2.6 5.8-5.9 5.8-3.2 0-5.9-2.6-5.9-5.8 0-3.2 2.6-5.9 5.9-5.9 3.3.1 5.9 2.7 5.9 5.9z" />
<path fill="#E7FFCC" d="M289.8 340.6c0 1.6-1.3 3-3 3s-3-1.3-3-3 1.3-3 3-3 3 1.4 3 3z" />
<g>
<path fill="#6B847F" d="M827.6 340.6c0 3.2-2.6 5.8-5.9 5.8-3.2 0-5.9-2.6-5.9-5.8 0-3.2 2.6-5.9 5.9-5.9 3.3.1 5.9 2.7 5.9 5.9z" />
<path fill="#E7FFCC" d="M824.8 340.6c0 1.6-1.3 3-3 3s-3-1.3-3-3 1.3-3 3-3 3 1.4 3 3z" />
</g>
<g>
<path fill="#6B847F" d="M646.6 340.6c0 3.2-2.6 5.8-5.9 5.8-3.2 0-5.9-2.6-5.9-5.8 0-3.2 2.6-5.9 5.9-5.9 3.3.1 5.9 2.7 5.9 5.9z" />
<path fill="#E7FFCC" d="M643.8 340.6c0 1.6-1.3 3-3 3s-3-1.3-3-3 1.3-3 3-3 3 1.4 3 3z" />
</g>
<g>
<path fill="#6B847F" d="M469.6 340.6c0 3.2-2.6 5.8-5.9 5.8-3.2 0-5.9-2.6-5.9-5.8 0-3.2 2.6-5.9 5.9-5.9 3.3.1 5.9 2.7 5.9 5.9z" />
<path fill="#E7FFCC" d="M466.8 340.6c0 1.6-1.3 3-3 3s-3-1.3-3-3 1.3-3 3-3c1.6 0 3 1.4 3 3z" />
</g>
<path fill="#9DDCA0" d="M55.9 350h940v45.5h-940z" />
</g>
<path fill="#DBFCBA" d="M806.3 182v-72.3h5.8V99.5h-9v-5.4h-18v5.4h-20.6v10.2h5.8V158l-26.9-21.9-28 22.7v54.7L697.6 203v-13.2H695c-.8-3-3.3-5.3-6.4-5.8v-11.8H686V184c-3.1.5-5.6 2.8-6.4 5.8H677v13.8L649.4 220v34H637v-15.8h5.8l-6.3-10.2h-19v-16.8h9l-38.6-28-13.2 9.6V187h-8.8v12.2l-16.6 12h9v9.4l-25.8-6.5v-14.4h6.6l-27.2-45.9v-5.4h2.6v-2h-2.6v-3.1h-2v3.1h-2.6v2h2.6v5.4l-27.2 45.9h6.6v18.5l-28.4-41.1v-64.9H457V98.9l-7.9-7.4-5.2-81.5V4.6h2.3V2.8h-2.3V0h-1.8v2.8h-2.3v1.8h2.3V10L437 91.5l-7.9 7.4v13.3h-3.9v67.6l-23.6 32v-47.7h4.8l-4.2-10.2h-25.5v-16.2h4.6l-19.1-32.2v-3.8h1.8v-1.4h-1.8v-2.1h-1.4v2.1H359v1.4h1.8v3.8l-19.1 32.2h4.6V154h-25.5l-4.2 10.2h4.8v50.1l-68.2 9.9v5.1l5.8-.8v41.8h-5.6l.5 34.8 574.5 6-13.6-126.3-8.5-2.8z"
id="bk-far" />
<path fill="#AACEB0" d="M953 285.9v-20.5h2.9l-2.6-7.4h-40.6v-72.8h6l-10.9-7.6v-9h-5.1v5.4l-9.6-6.7-25.7 17.9h6v51.7h-23.9V202h6l-25.9-18-25.7 18h6v104.7h-13.3V290h4.6l-5.1-9.6h-14.6l-26-22.3v-47.3h7.2l-11.7-10v-12.9h-7v6.9l-12.2-10.5-30.9 26.6h7.2V240h-13l-4.5-3.9v-14.7h-8.1v7.7L669 217.2l-35.4 30.5h8.2V275h-24.2v-26.8h5.6l-3.7-7H614v-4h-10.2c-.5-3.8-3.3-6.6-6.6-6.6s-6.1 2.9-6.6 6.6h-10.2v4h-5.5l-3.7 7h5.6V264h-15v16.4h-12.3v-7.5H543v-11.8h7.2l-30.9-26.6-10.6 9.1v-5.5h-7v11.6l-13.2 11.4h7.2v12.3h-27.1l-4.5-3.9v-14.7H456v7.7l-13.7-11.8-35.4 30.5h8.2v27.3h-15.7v-60.6h9.3l-39.8-34.3-13.6 11.7v-7.1H346v14.9l-17.1 14.7h9.3V261h-5.4v11.8h-19.5v6.7h-16.1l-4.5-3.9V261h-8.1v7.7L270.8 257l-21.1 18.1-34.4-29.6-13.5 11.6v-7h-9v14.8l-16.9 14.6h9.2v16.6l-29.4-25.3-13.5 11.6v-7h-9v14.8l-16.9 14.6h9.2v17.6h-4.9v11.1h845v-40.7l-12.6-6.9z"
id="bk-mid" />
<g class="city">
<g id="house1">
<path fill="#C68B7B" d="M348 134.5H168l-20 39h220z" id="roof" />
<path fill="#7B908C" d="M368 172.4l-20-39H168l-20 39h-1.3v2h222v-2h-.7zm-217.8 0l19-37h177.6l19 37H150.2z" />
<path fill="#99C0A2" d="M149 254.5h218v68H149z" id="bottom" />
<path fill="#7B908C" d="M147.7 253.4v70h220v-70h-220zm218 68h-216v-66h216v66z" />
<path fill="#99C0A2" d="M149 176.5h218v68H149z" id="top" />
<path fill="#7B908C" d="M147.7 175.4v70h220v-70h-220zm218 68h-216v-66h216v66z" />
<path fill="#AD937F" d="M157 322.5h77v10h-77z" id="Rectangle_145_70_" />
<path fill="#7B908C" d="M155.7 321.4v12h79v-12h-79zm77 10h-75v-8h75v8z" />
<path fill="#DD8C80" d="M244 274.5h28v48h-28z" id="Rectangle_83_27_" />
<path fill="#E7FFCC" d="M249.7 293.9l-.2-12s1.5-3 5-3.4c0 0 6.6-.6 7.7.2 0 0 3.8.8 3.9 2.9l.1 12-16.5.3z" />
<path fill="#7B908C" d="M242.7 273.4v50h30v-50h-30zm28 48h-26v-46h26v46zm-12-2h8v-8h-8v8zm1-7h6v6h-6v-6zm-1-3h8v-8h-8v8zm1-7h6v6h-6v-6zm6.3-4.5c0 .8.7 1.5 1.5 1.5h1c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5h-1c-.9 0-1.5.7-1.5 1.5zm.7-.5h2v1h-2v-1zm-18-3h18v-11.9c0-2.8-4-5-9-5s-9 2.2-9 5v11.9zm13-15.3c3 .7 4 1.9 4 3.4v.9h-4v-4.3zm0 5.3h4v9h-4v-9zm-7-5.5c1-.2 2-.3 3-.3s2 .1 3 .3v4.6h-6v-4.6zm0 5.5h6v9h-6v-9zm-5-1.9c0-1.5 2-2.7 4-3.4v4.3h-4v-.9zm0 1.9h4v9h-4v-9zm7 27h-8v8h8v-8zm-1 7h-6v-6h6v6zm1-17h-8v8h8v-8zm-1 7h-6v-6h6v6z"
/>
<path fill="#C9B189" d="M234 322.5h10v-48h-10v48zm38-48v48h10v-48h-10z" id="Rectangle_83_24_" />
<path fill="#7B908C" d="M270.7 273.4v50h12v-50h-12zm10 48h-8v-46h8v46zm-42-37.9c-1.7 0-3 1.3-3 3v24c0 1.7 1.3 3 3 3s3-1.3 3-3v-24c0-1.6-1.3-3-3-3zm2 27c0 1.1-.9 2-2 2s-2-.9-2-2v-24c0-1.1.9-2 2-2s2 .9 2 2v24zm-5 9.9h6v-6h-6v6zm1-5h4v4h-4v-4zm43-39h-6v6h6v-6zm-1 5h-4v-4h4v4zm-43 1h6v-6h-6v6zm1-5h4v4h-4v-4zm40 36.1c1.7 0 3-1.3 3-3v-24c0-1.7-1.3-3-3-3s-3 1.3-3 3v24c0 1.7 1.3 3 3 3zm-2-27c0-1.1.9-2 2-2s2 .9 2 2v24c0 1.1-.9 2-2 2s-2-.9-2-2v-24zm-42 36.9h12v-50h-12v50zm2-48h8v46h-8v-46zm45 39h-6v6h6v-6zm-1 5h-4v-4h4v4z"
/>
<path fill="#C9B189" d="M260.2 264.6H255.6c-12.2.4-21.7 4.3-21.7 9v1h48v-1c.1-4.8-9.5-8.6-21.7-9z" id="Ellipse_32_2_" />
<path fill="#7B908C" d="M261.4 263.6c-.2-.1-.3-.1-.5-.1H255c-.2 0-.6.1-.8.1-12.1.7-21.6 4.9-21.6 9.9v1.9h50v-1.9c.1-5-9.1-9.2-21.2-9.9zm-.5 1.8l-.9 3h-4.1l-.9-3h5.9zM254 269c.3.9 1.1 1.4 2 1.4h4.1c.9 0 1.7-.6 2-1.4l.4-1.3c4.4.4 9 1.3 12.3 2.6-.4-.1 1.1.4 2 1 .1.1.2.1.2.1h-37.7c.7 0 1.7-.9 1.7-.9 3.5-1.5 8.3-2.5 12.7-2.9l.3 1.4zm-19 4.4c0-3 6.7-6.8 18-7.8 0 .1 0 .3.1.4l.2.7c-4.1.4-8.4 1.2-11.7 2.5-4.9 1.8-4.6 3.2-4.6 3.2h42l-.5-.8c-1.1-1.7-5.7-3.2-3.5-2.3-3.4-1.3-7.9-2.2-12.2-2.6l.2-.7c0-.1 0-.3.1-.4 11.3.9 18.1 4.8 18.1 7.8H235z"
/>
<path fill="#DDC9AC" d="M234 322.5h48v9h-48z" id="Rectangle_86_10_" />
<path fill="#7B908C" d="M232.7 321.4v12h50v-12h-50zm10 10h-8v-8h8v8zm28 0h-26v-2h26v2zm0-3h-26v-1h26v1zm0-2h-26v-1h26v1zm0-2h-26v-1h26v1zm10 7h-8v-8h8v8z" />
<path fill="#B792A1" d="M185 153c0-4.5-3.5-8.2-8-8.5v17h8v-8-.5zm17 0v8.5h8v-17c-4.5.3-8 4-8 8.5z" id="Ellipse_30_23_" />
<path fill="#7B908C" d="M167 153.1c0-.1 0-.1 0 0 0-.1 0-.1 0 0zm9.7-9.5v10-10.1h-1v19h10v-10h.2c-.2-5.1-4.2-8.7-9.2-8.9zm1 2.1c1 .2 1.7.7 2.4.7h-2.4v-.7zm0 1.7h3.8c.3 0 .6 1 .9 1h-4.7v-1zm0 2h5.4c.2 0 .3 1 .5 1h-5.8v-1zm0 2h6.1c.1 0 .1 1 .1 1h-6.2v-1zm6 9h-6v-1h6v1zm0-2h-6v-1h6v1zm0-2h-6v-1h6v1zm0-2h-6v-1h6v1zm26-11v.1c-5 .3-8.4 3.9-8.7 8.9h-.3v10h10v-19h-1zm-1 17h-6v-1h6v1zm0-2h-6v-1h6v1zm0-2h-6v-1h6v1zm0-3v1h-6v-1h6v-1H203l.1-1h5.6v-1h-5.3c.1 0 .3-1 .5-1h4.8v-1h-4.2c.3 0 .6-1 .9-1h3.3v-1h-1.9c.7 0 1.9-.5 1.9-.7v7.7z"
/>
<path fill="#B792A1" d="M249 153c0-4.5-3.5-8.2-8-8.5v17h8v-8-.5zm17 0v8.5h8v-17c-4.5.3-8 4-8 8.5z" id="Ellipse_30_20_" />
<path fill="#7B908C" d="M240.7 143.6v10-10.1h-1v19h10v-10h.2c-.2-5.1-4.2-8.7-9.2-8.9zm1 2.1c1 .2 1.7.7 2.4.7h-2.4v-.7zm0 1.7h3.8c.3 0 .6 1 .9 1h-4.7v-1zm0 2h5.4c.2 0 .3 1 .5 1h-5.8v-1zm0 2h6.1c.1 0 .1 1 .1 1h-6.2v-1zm6 9h-6v-1h6v1zm0-2h-6v-1h6v1zm0-2h-6v-1h6v1zm0-2h-6v-1h6v1zm-16.7-1.3c0-.1 0-.1 0 0 0-.1 0-.1 0 0zm42.7-9.7v.1c-5 .3-8.4 3.9-8.7 8.9h-.3v10h10v-19h-1zm-1 17h-6v-1h6v1zm0-2h-6v-1h6v1zm0-2h-6v-1h6v1zm0-3v1h-6v-1h6v-1H267l.1-1h5.6v-1h-5.3c.1 0 .3-1 .5-1h4.8v-1h-4.2c.3 0 .6-1 .9-1h3.3v-1h-1.9c.7 0 1.9-.5 1.9-.7v7.7z"
/>
<path fill="#B792A1" d="M314 153c0-4.5-3.5-8.2-8-8.5v17h8v-8-.5zm17 0v8.5h8v-17c-4.5.3-8 4-8 8.5z" id="Ellipse_30_17_" />
<path fill="#7B908C" d="M305.7 143.6v10-10.1h-1v19h10v-10h.2c-.2-5.1-4.2-8.7-9.2-8.9zm1 2.1c1 .2 1.7.7 2.4.7h-2.4v-.7zm0 1.7h3.8c.3 0 .6 1 .9 1h-4.7v-1zm0 2h5.4c.2 0 .3 1 .5 1h-5.8v-1zm0 2h6.1c.1 0 .1 1 .1 1h-6.2v-1zm6 9h-6v-1h6v1zm0-2h-6v-1h6v1zm0-2h-6v-1h6v1zm0-2h-6v-1h6v1zm-16.7-1.3c0-.1 0-.1 0 0 0-.1 0-.1 0 0zm42.7-9.7v.1c-5 .3-8.4 3.9-8.7 8.9h-.3v10h10v-19h-1zm-1 17h-6v-1h6v1zm0-2h-6v-1h6v1zm0-2h-6v-1h6v1zm0-3v1h-6v-1h6v-1H332l.1-1h5.6v-1h-5.3c.1 0 .3-1 .5-1h4.8v-1h-4.2c.3 0 .6-1 .9-1h3.3v-1h-1.9c.7 0 1.9-.5 1.9-.7v7.7z"
/>
<path fill="#E7FFCC" d="M202 153.5v-.5c0-4.7-3.8-8.5-8.5-8.5s-8.5 3.8-8.5 8.5v8.5h17v-8z" id="Ellipse_30_14_" />
<path fill="#7B908C" d="M202.7 160.4v-7h.2v-.5c0-5.2-4.3-9.5-9.5-9.5s-9.5 4.2-9.5 9.5v.5h-.3v7h-1v2h21v-2h-.9zm-9-14.8c4 .2 7 2.9 7.2 6.9h-7.2v-6.9zm-1 0v6.9H186c.2-4.1 3.7-6.7 6.7-6.9zm-7 7.8h15v7h-15v-7z" />
<path fill="#E7FFCC" d="M331 153.5v-.5c0-4.7-3.8-8.5-8.5-8.5s-8.5 3.8-8.5 8.5v8.5h17v-8z" id="Ellipse_30_11_" />
<path fill="#7B908C" d="M331.7 160.4v-7h.2v-.5c0-5.2-4.3-9.5-9.5-9.5s-9.5 4.2-9.5 9.5v.5h-.3v7h-1v2h21v-2h-.9zm-9-14.8c4 .2 7 2.9 7.2 6.9h-7.2v-6.9zm-1 0v6.9H315c.2-4.1 3.7-6.7 6.7-6.9zm-7 7.8h15v7h-15v-7z" />
<path fill="#E7FFCC" d="M266 153.5v-.5c0-4.7-3.8-8.5-8.5-8.5s-8.5 3.8-8.5 8.5v8.5h17v-8z" id="Ellipse_30_8_" />
<path fill="#7B908C" d="M266.7 160.4v-7h.2v-.5c0-5.2-4.3-9.5-9.5-9.5s-9.5 4.2-9.5 9.5v.5h-.3v7h-1v2h21v-2h-.9zm-9-14.8c4 .2 7 2.9 7.2 6.9h-7.2v-6.9zm-1 0v6.9H250c.2-4.1 3.7-6.7 6.7-6.9zm-7 7.8h15v7h-15v-7z" />
<path fill="#DDC9AC" d="M163 258.5v-4h-10v4h1v40h-1v4h10v-4h-1v-40z" id="Rectangle_77_70_" />
<path fill="#7B908C" d="M156.2 294.5c.3 0 .5-.2.5-.5v-31c0-.3-.2-.5-.5-.5s-.5.2-.5.5v31c0 .3.2.5.5.5zm6.5-35.2c1-.3 1-1 1-1.7v-4.1h-12v4.1c0 .7 1 1.4 1 1.7v38.2h1.3c-1.1 0-2.3 1-2.3 2.1v3.9h12v-3.9c0-1.1-.6-2.1-1.7-2.1h.7v-38.2zm-1 42.1h-8v-2h8v2zm-1-40v34h-6v-34h6zm-6-1v-1h6v1h-6zm6 36v1h-6v-1h6zm1-39h-8v-2h8v2zm-2.5 37.1c.3 0 .5-.2.5-.5v-31c0-.3-.2-.5-.5-.5s-.5.2-.5.5v31c0 .3.2.5.5.5z"
/>
<path fill="#DDC9AC" d="M228 258.5v-4h-10v4h1v60h-1v4h10v-4h-1v-60z" id="Rectangle_77_67_" />
<path fill="#7B908C" d="M227.7 259.3c1-.4 1-1 1-1.7v-4.1h-12v4.1c0 .7 1 1.4 1 1.7v59.1h1.3c-1.1 0-2.3.8-2.3 1.9v4.1h12v-4.1c0-1.1-.6-1.9-1.7-1.9h.7v-59.1zm-1 63.1h-8v-2h8v2zm-1-61v55h-6v-55h6zm-6-1v-1h6v1h-6zm6 57v1h-6v-1h6zm1-60h-8v-2h8v2zm-5.5 57.9c.3 0 .5-.2.5-.5v-51.6c0-.3-.2-.5-.5-.5s-.5.2-.5.5v51.6c0 .3.2.5.5.5zm3 0c.3 0 .5-.2.5-.5v-51.6c0-.3-.2-.5-.5-.5s-.5.2-.5.5v51.6c0 .3.2.5.5.5z"
/>
<path fill="#DBFCBA" d="M149 173.5h218v3H149z" id="Rectangle_145_66_" />
<path fill="#7B908C" d="M147.7 172.4v5h220v-5h-220zm218 3h-216v-1h216v1z" />
<path fill="#E7FFCC" d="M312 194.5h22v37h-22z" id="Rectangle_92_35_" />
<path fill="#7B908C" d="M334.7 230.4v-37h-24v37h-1v2h26v-2h-1zm-15-35h6v7h-6v-7zm0 8h6v6h-6v-6zm0 7h6v6h-6v-6zm0 7h6v6h-6v-6zm-1 13h-6v-6h6v6zm0-7h-6v-6h6v6zm0-7h-6v-6h6v6zm0-7h-6v-6h6v6zm0-7h-6v-7h6v7zm1 28v-6h6v6h-6zm13 0h-6v-6h6v6zm0-7h-6v-6h6v6zm0-7h-6v-6h6v6zm0-7h-6v-6h6v6zm0-7h-6v-7h6v7z"
/>
<path fill="#EDBC80" d="M301 231.5h11v-37h-11v37zm33-37v37h11v-37h-11z" id="Rectangle_106_11_" />
<path fill="#7B908C" d="M299.7 232.4h13v-39h-13v39zm2-37h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm31-36v39h13v-39h-13zm11 37h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1z"
/>
<path fill="#E7FFCC" d="M247 194.5h22v37h-22z" id="Rectangle_92_32_" />
<path fill="#7B908C" d="M269.7 230.4v-37h-24v37h-1v2h26v-2h-1zm-15-35h6v7h-6v-7zm0 8h6v6h-6v-6zm0 7h6v6h-6v-6zm0 7h6v6h-6v-6zm-1 13h-6v-6h6v6zm0-7h-6v-6h6v6zm0-7h-6v-6h6v6zm0-7h-6v-6h6v6zm0-7h-6v-7h6v7zm1 28v-6h6v6h-6zm13 0h-6v-6h6v6zm0-7h-6v-6h6v6zm0-7h-6v-6h6v6zm0-7h-6v-6h6v6zm0-7h-6v-7h6v7z"
/>
<path fill="#EDBC80" d="M236 231.5h11v-37h-11v37zm33-37v37h11v-37h-11z" id="Rectangle_106_8_" />
<path fill="#7B908C" d="M234.7 232.4h13v-39h-13v39zm2-37h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm31-36v39h13v-39h-13zm11 37h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1z"
/>
<path fill="#E7FFCC" d="M182 274.5h22v37h-22z" id="Rectangle_92_29_" />
<path fill="#7B908C" d="M204.7 310.4v-37h-24v37h-1v2h26v-2h-1zm-2-35v17h-20v-17h20zm-20 35v-17h20v17h-20z" />
<path fill="#AD937F" d="M149 302.5h18v30h-18z" id="Rectangle_145_63_" />
<path fill="#7B908C" d="M163.7 305.4h-12v24h12v-24zm-1 23h-10v-22h10v22zm-15-27v32h20v-32h-20zm18 30h-16v-28h16v28z" />
<path fill="#AD937F" d="M282 322.5h77v10h-77z" id="Rectangle_145_60_" />
<path fill="#7B908C" d="M280.7 321.4v12h79v-12h-79zm77 10h-75v-8h75v8z" />
<path fill="#DDC9AC" d="M363 258.5v-4h-10v4h1v40h-1v4h10v-4h-1v-40z" id="Rectangle_77_64_" />
<path fill="#7B908C" d="M359.2 294.5c.3 0 .5-.2.5-.5v-31c0-.3-.2-.5-.5-.5s-.5.2-.5.5v31c0 .3.2.5.5.5zm3.5-35.2c1-.3 1-1 1-1.7v-4.1h-12v4.1c0 .7 1 1.4 1 1.7v38.2h1.3c-1.1 0-2.3 1-2.3 2.1v3.9h12v-3.9c0-1.1-.6-2.1-1.7-2.1h.7v-38.2zm-1 40.1v2h-8v-2h8zm-1-38v34h-6v-34h6zm-6-1v-1h6v1h-6zm6 36v1h-6v-1h6zm1-39h-8v-2h8v2zm-5.5 37.1c.3 0 .5-.2.5-.5v-31c0-.3-.2-.5-.5-.5s-.5.2-.5.5v31c0 .3.2.5.5.5z"
/>
<path fill="#DDC9AC" d="M298 258.5v-4h-10v4h1v60h-1v4h10v-4h-1v-60z" id="Rectangle_77_60_" />
<path fill="#7B908C" d="M294.2 314.5c.3 0 .5-.2.5-.5v-51c0-.3-.2-.5-.5-.5s-.5.2-.5.5v51c0 .3.2.5.5.5zm3.5-55.2c1-.3 1-1 1-1.7v-4.1h-12v4.1c0 .7 1 1.4 1 1.7v58.2h1.3c-1.1 0-2.3 1-2.3 2.1v3.9h12v-3.9c0-1.1-.6-2.1-1.7-2.1h.7v-58.2zm-1 60.1v2h-8v-2h8zm-1-58v54h-6v-54h6zm-6-1v-1h6v1h-6zm6 56v1h-6v-1h6zm1-59h-8v-2h8v2zm-5.5 57.1c.3 0 .5-.2.5-.5v-51c0-.3-.2-.5-.5-.5s-.5.2-.5.5v51c0 .3.2.5.5.5z"
/>
<path fill="#E7FFCC" d="M312 274.5h22v37h-22z" id="Rectangle_92_26_" />
<path fill="#7B908C" d="M334.7 310.4v-37h-24v37h-1v2h26v-2h-1zm-2-35v17h-20v-17h20zm-20 35v-17h20v17h-20z" />
<path fill="#AD937F" d="M349 302.5h18v30h-18z" id="Rectangle_145_57_" />
<path fill="#7B908C" d="M363.7 305.4h-12v24h12v-24zm-1 23h-10v-22h10v22zm-15-27v32h20v-32h-20zm18 30h-16v-28h16v28z" />
<path fill="#7B908C" d="M149 248.5h218v6H149z" id="Rectangle_145_54_" />
<path fill="#7B908C" d="M147.7 247.4v8h220v-8h-220zm218 6h-216v-4h216v4z" />
<path fill="#C9B189" d="M147 244.5h222v4H147z" id="Rectangle_145_51_" />
<path fill="#7B908C" d="M145.7 243.4v6h224v-6h-224zm222 4h-220v-2h220v2z" />
<path fill="#E7FFCC" d="M182 194.5h22v37h-22z" id="Rectangle_92_23_" />
<path fill="#7B908C" d="M204.7 230.4v-37h-24v37h-1v2h26v-2h-1zm-15-35h6v7h-6v-7zm0 8h6v6h-6v-6zm0 7h6v6h-6v-6zm0 7h6v6h-6v-6zm-1 13h-6v-6h6v6zm0-7h-6v-6h6v6zm0-7h-6v-6h6v6zm0-7h-6v-6h6v6zm0-7h-6v-7h6v7zm1 28v-6h6v6h-6zm13 0h-6v-6h6v6zm0-7h-6v-6h6v6zm0-7h-6v-6h6v6zm0-7h-6v-6h6v6zm0-7h-6v-7h6v7z"
/>
<path fill="#EDBC80" d="M171 231.5h11v-37h-11v37zm33-37v37h11v-37h-11z" id="Rectangle_106_5_" />
<path fill="#7B908C" d="M169.7 232.4h13v-39h-13v39zm2-37h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm0 2h9v1h-9v-1zm31-36v39h13v-39h-13zm11 37h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1zm0-2h-9v-1h9v1z"
/>
</g>
<g id="house2">
<path fill="#C5EBAE" d="M399.9 254.3h194v78h-194z" id="Rectangle_145_105_" />
<path fill="#7B908C" d="M398.9 253.3h196v80h-196z" id="Rectangle_145_102_" />
<path id="bottom_1_" fill-rule="evenodd" clip-rule="evenodd" fill="#8AA29A" d="M400.9 255.3h192v76h-192z" />
<path fill="#F1F9BB" d="M429.9 274.3h22v37h-22z" id="Rectangle_92_20_" />
<path fill="#7B908C" d="M452.7 310.4v-37h-24v37h-1v2h26v-2h-1zm-2-35v17h-20v-17h20zm-20 35v-17h20v17h-20z" />
<path fill="#F1F9BB" d="M549.9 274.3h15v17h-15z" id="Rectangle_96_10_" />
<path fill="#7B908C" d="M565.7 290.4v-17h-17v17h-1v2h19v-2h-1zm-2-15v7h-13v-7h13zm-13 15v-7h13v7h-13z" />
<path fill="#C9B189" d="M487.9 274.3h28v48h-28z" id="Rectangle_83_21_" />
<path fill="#F1F9BB" d="M492.7 277.4h17.7v17.3h-17.7z" />
<path fill="#7B908C" d="M502.7 319.4h8v-18h-8v18zm1-17h6v16h-6v-16zm-11-7h18v-18h-18v18zm13-17h4v5h-4v-5zm0 6h4v10h-4v-10zm-7-6h6v5h-6v-5zm0 6h6v10h-6v-10zm-5-6h4v5h-4v-5zm0 6h4v10h-4v-10zm-7-11v50h30v-50h-30zm28 48h-26v-46h26v46zm-4.8-23.5c0 .8.7 1.5 1.5 1.5h1c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5h-1c-.8 0-1.5.7-1.5 1.5zm.8-.5h2v1h-2v-1zm-10 4h-8v18h8v-18zm-1 17h-6v-16h6v16z"
/>
<path fill="#C5EBAE" d="M477.9 322.3h48v9h-48z" id="Rectangle_86_9_" />
<path fill="#7B908C" d="M476.7 321.4v12h50v-12h-50zm48 10h-46v-8h46v8z" />
<path fill="#7B908C" d="M526.9 333.4h-7.2v-3c-2-1.8-3-4.3-3-7.1v-1.8h-30v1.8c0 2.8-1 5.3-3 7.1v3h-6.8 50zm-38-10h26v1h-26.1c.1 0 .1-1 .1-1zm-.2 2h26.4c.1 0 .1 1 .2 1h-26.8c.1 0 .2-1 .2-1zm-.5 2h27.4c.1 0 .3 1 .4 1h-28.2c.2 0 .3-1 .4-1zm-2.3 4c.5-1 1-1 1.4-2h29.3c.4 1 .9 1 1.4 2h-32.1z"
/>
<path fill="#96D8C2" d="M475.9 258.3v-4h-8v4h1v60h-1v4h8v-4h-1v-60z" id="Rectangle_77_62_" />
<path fill="#7B908C" d="M475.7 259c1-.3 1-1 1-1.7v-3.8h-10v3.8c0 .7 1 1.4 1 1.7v58.4h1.2c-1.1 0-2.2.7-2.2 1.8v4.2h10v-4.2c0-1.1-.7-1.8-1.8-1.8h.8V259zm-6 57.4h4v1h-4v-1zm4-56h-4v-1h4v1zm0 1v54h-4v-54h4zm1 60h-6v-2h6v2zm0-64h-6v-2h6v2z" />
<path fill="#96D8C2" d="M415.9 322.3h62v10h-62z" id="Rectangle_145_99_" />
<path fill="#7B908C" d="M414.7 321.4v12h64v-12h-64zm62 10h-60v-8h60v8z" />
<path fill="#C9B189" d="M397.9 302.3h18v30h-18z" id="Rectangle_145_93_" />
<path fill="#7B908C" d="M412.7 305.4h-12v24h12v-24zm-1 23h-10v-22h10v22zm-15-27v32h20v-32h-20zm18 30h-16v-28h16v28z" />
<path fill="#96D8C2" d="M397.9 299.3v3h8v-3h-8zm2 0h4v-42h1v-3h-6v3h1v42z" id="Rectangle_77_59_" />
<path fill="#7B908C" d="M405.7 256.3v-2.8h-8v2.8c0 .7 1 1.4 1 1.7v40.6c0 .3-1 1-1 1.7v3.2h8v-3.2c0-.7 0-1.4-1-1.7V258c1-.3 1-1 1-1.7zm-2 45.1h-4v-1h4v1zm-3-3v-40h2v40h-2zm3-42h-4v-1h4v1z" />
<path fill="#96D8C2" d="M407.9 299.3v3h8v-3h-8zm2 0h4v-42h1v-3h-6v3h1v42z" id="Rectangle_77_56_" />
<path fill="#AD937F" d="M567.9 194.3v4h1v46h16v-46h1v-4z" id="Rectangle_157_2_" />
<path fill="#99C0A2" d="M567.9 205.3h-142l-31 39h204z" id="roof_1_" />
<path fill="#7B908C" d="M598.9 243.4l-30-39h-144l-30 39h-1.2v2h206v-2h-.8zm-201.5 0l28.5-37h142l28.5 37h-199zM415.7 256.3v-2.8h-8v2.8c0 .7 1 1.4 1 1.7v40.6c0 .3-1 1-1 1.7v3.2h8v-3.2c0-.7 0-1.4-1-1.7V258c1-.3 1-1 1-1.7zm-2 45.1h-4v-1h4v1zm-3-3v-40h2v40h-2zm3-42h-4v-1h4v1z"
/>
<path fill="#96D8C2" d="M525.9 322.3h62v10h-62z" id="Rectangle_145_87_" />
<path fill="#7B908C" d="M524.7 321.4v12h64v-12h-64zm62 10h-60v-8h60v8z" />
<path fill="#C9B189" d="M577.9 302.3h18v30h-18z" id="Rectangle_145_81_" />
<path fill="#7B908C" d="M576.7 301.4v32h20v-32h-20zm18 30h-16v-28h16v28zm-2-26h-12v24h12v-24zm-1 23h-10v-22h10v22z" />
<path fill="#96D8C2" d="M587.9 299.3v3h8v-3h-8zm2 0h4v-42h1v-3h-6v3h1v42z" id="Rectangle_77_53_" />
<path fill="#7B908C" d="M595.7 256.3v-2.8h-8v2.8c0 .7 1 1.4 1 1.7v40.6c0 .3-1 1-1 1.7v3.2h8v-3.2c0-.7 0-1.4-1-1.7V258c1-.3 1-1 1-1.7zm-2 45.1h-4v-1h4v1zm-3-3v-40h2v40h-2zm3-42h-4v-1h4v1z" />
<path fill="#96D8C2" d="M577.9 299.3v3h8v-3h-8zm2 0h4v-42h1v-3h-6v3h1v42z" id="Rectangle_77_48_" />
<path fill="#7B908C" d="M585.7 256.3v-2.8h-8v2.8c0 .7 1 1.4 1 1.7v40.6c0 .3-1 1-1 1.7v3.2h8v-3.2c0-.7 0-1.4-1-1.7V258c1-.3 1-1 1-1.7zm-2 45.1h-4v-1h4v1zm-3-3v-40h2v40h-2zm3-42h-4v-1h4v1z" />
<path fill="#96D8C2" d="M535.9 258.3v-4h-8v4h1v60h-1v4h8v-4h-1v-60z" id="Rectangle_77_42_" />
<path fill="#7B908C" d="M535.7 259c1-.3 1-1 1-1.7v-3.8h-10v3.8c0 .7 1 1.4 1 1.7v58.4h1.2c-1.1 0-2.2.7-2.2 1.8v4.2h10v-4.2c0-1.1-.7-1.8-1.8-1.8h.8V259zm-2 1.4h-4v-1h4v1zm0 1v54h-4v-54h4zm-4 55h4v1h-4v-1zm5 3v2h-6v-2h6zm0-62h-6v-2h6v2z" />
<path fill="#EDBC80" d="M397.9 248.3h198v6h-198z" id="Rectangle_145_75_" />
<path fill="#7B908C" d="M396.7 247.4v8h200v-8h-200zm198 6h-196v-4h196v4z" />
<path fill="#C68B7B" d="M395.9 244.3h202v4h-202z" id="Rectangle_145_69_" />
<path fill="#7B908C" d="M394.7 243.4v6h204v-6h-204zm202 4h-200v-2h200v2z" />
<path fill="none" d="M569.7 235.4h4v2h-4zM569.7 232.4h1v2h-1zM571.7 234.4h4v-2h-4zM576.7 222.4h4v-2h-4zM569.7 238.4h1v2h-1zM574.7 217.4h4v2h-4zM569.7 241.4h4v2h-4zM571.7 240.4h4v-2h-4zM571.7 222.4h4v-2h-4zM569.7 217.4h4v2h-4zM569.7 220.4h1v2h-1zM574.7 211.4h4v2h-4zM571.7 228.4h4v-2h-4zM569.7 223.4h4v2h-4zM569.7 226.4h1v2h-1zM576.7 210.4h4v-2h-4zM569.7 229.4h4v2h-4zM581.7 226.4h2v2h-2zM581.7 220.4h2v2h-2zM579.7 223.4h4v2h-4zM581.7 232.4h2v2h-2zM574.7 223.4h4v2h-4zM579.7 235.4h4v2h-4zM579.7 241.4h4v2h-4zM581.7 238.4h2v2h-2zM579.7 229.4h4v2h-4zM574.7 229.4h4v2h-4zM579.7 217.4h4v2h-4zM576.7 234.4h4v-2h-4zM576.7 228.4h4v-2h-4zM574.7 241.4h4v2h-4zM574.7 235.4h4v2h-4zM576.7 240.4h4v-2h-4zM581.7 202.4h2v2h-2zM581.7 214.4h2v2h-2zM579.7 205.4h4v2h-4zM581.7 208.4h2v2h-2zM569.7 214.4h1v2h-1zM573.7 214.4h-2v2h4v-2zM578.7 214.4h-2v2h4v-2zM579.7 211.4h4v2h-4zM573.7 201.4v-1.9l-4-.1v2zM583 199.7l-3.3-.1v1.8h4v-2h-4v.2zM568.7 195.4h16v2h-16zM573.7 199.4h-4l4 .1zM578.7 199.6v-.2h-4v.1z"
/>
<path fill="none" d="M578.7 201.4v-1.8l-4-.1v1.9zM571.7 204.4h4v-2h-4zM569.7 208.4h1v2h-1zM574.7 205.4h4v2h-4zM571.7 210.4h4v-2h-4zM569.7 211.4h4v2h-4zM569.7 205.4h4v2h-4zM576.7 204.4h4v-2h-4zM569.7 202.4h1v2h-1z" />
<path fill="#7B908C" d="M574.7 199.5v-.1h-1v.1zM579.7 199.6v-.2h-1v.2z" />
<path fill="none" d="M583.7 200.8c0-.2.1-1.3 0-1.4-.2-.1-1.1 0-1.3 0h-8.6c-.8 0-3.7-.4-4 .2-.3.6 0 2.4 0 3v4.5l14.1 16.9v-1.1c-.2-7.3-.2-14.7-.2-22.1zM584 195.4h-13.8c-.6 0-1.3-.2-1.5.3-.1.1-.1 1.6 0 1.7.1.1.5 0 .6 0 2.9.3 5.9 0 8.8 0h6.6c0-.3.2-1.8 0-2h-.7z"
/>
<path fill="#7B908C" d="M585.7 225.5v-16.6-6.1c0-.7-.3-2.5 0-3.1.2-.4.7.1 1-.2.3-.3 0-2.5 0-3s.3-2.6 0-3c-.1-.1-.8 0-1 0h-19v2.9c0 .5-.3 2.7 0 3.1.2.2.8-.1 1 .2.1.2 0 .8 0 1.1v4.2l1.9 2.3v-4.5c0-.7-.3-2.5 0-3 .3-.6 3.2-.2 4-.2h8.6c.2 0 1.1-.1 1.3 0 .2.1 0 1.1 0 1.4V224.2l2 2.4c.2-.4.2-.8.2-1.1zm-1-28.1h-6.6c-2.9 0-5.9.3-8.8 0-.1 0-.5.1-.6 0-.1-.1-.1-1.6 0-1.7.2-.5.9-.3 1.5-.3H584c.1 0 .6-.1.7 0 .2.3 0 1.7 0 2z"
/>
</g>
<g id="house3">
<path fill="#8AA29A" d="M692.4 133.7l-20 39h191v-39z" id="roof_2_" />
<path fill="#7B908C" d="M864.7 171.4v-39H692.4l-20 39h-.7v2h194v-2h-1zm-2 0H674.6l19-37h169.1v37z" />
<path fill="#C9B189" d="M673.4 172.7h229v150h-229z" id="bottom_2_" />
<path fill="#7B908C" d="M672.7 171.4v152h231v-152h-231zm229 150h-227v-148h227v148z" />
<path fill="#E7FFCC" d="M719.4 194.7h15v17h-15z" id="Rectangle_96_8_" />
<path fill="#7B908C" d="M735.7 210.4v-17h-17v17h-1v2h19v-2h-1zm-2-15v7h-6v-7h6zm-7 0v7h-6v-7h6zm-6 15v-7h13v7h-13z" />
<path fill="#EDBC80" d="M711.4 211.7h8v-17h-8v17zm23-17v17h8v-17h-8z" id="Rectangle_94_6_" />
<path fill="#7B908C" d="M710.7 212.4h10v-19h-10v19zm2-17h6v1h-6v-1zm0 2h6v1h-6v-1zm0 2h6v1h-6v-1zm0 2h6v1h-6v-1zm0 2h6v1h-6v-1zm0 2h6v1h-6v-1zm0 2h6v1h-6v-1zm0 2h6v1h-6v-1zm21-16v19h10v-19h-10zm8 17h-6v-1h6v1zm0-2h-6v-1h6v1zm0-2h-6v-1h6v1zm0-2h-6v-1h6v1zm0-2h-6v-1h6v1zm0-2h-6v-1h6v1zm0-2h-6v-1h6v1zm0-2h-6v-1h6v1z"
/>
<path fill="#E7FFCC" d="M789.4 194.7h15v17h-15z" id="Rectangle_96_5_" />
<path fill="#7B908C" d="M805.7 210.4v-17h-17v17h-1v2h19v-2h-1zm-2-15v7h-6v-7h6zm-7 0v7h-6v-7h6zm-6 15v-7h13v7h-13z" />
<path fill="#EDBC80" d="M781.4 211.7h8v-17h-8v17zm23-17v17h8v-17h-8z" id="Rectangle_94_4_" />
<path fill="#7B908C" d="M803.7 193.4v19h10v-19h-10zm8 17h-6v-1h6v1zm0-2h-6v-1h6v1zm0-2h-6v-1h6v1zm0-2h-6v-1h6v1zm0-2h-6v-1h6v1zm0-2h-6v-1h6v1zm0-2h-6v-1h6v1zm0-2h-6v-1h6v1zm-31 16h10v-19h-10v19zm2-17h6v1h-6v-1zm0 2h6v1h-6v-1zm0 2h6v1h-6v-1zm0 2h6v1h-6v-1zm0 2h6v1h-6v-1zm0 2h6v1h-6v-1zm0 2h6v1h-6v-1zm0 2h6v1h-6v-1z"
/>
<path fill="#96D8C2" d="M783.4 274.7h28v48h-28z" id="Rectangle_83_17_" />
<path fill="#E7FFCC" d="M788.7 277.4h18v17.5h-18z" />
<path fill="#7B908C" d="M798.7 319.4h8v-18h-8v18zm1-17h6v16h-6v-16zm-11-7h18v-18h-18v18zm13-17h4v5h-4v-5zm0 6h4v10h-4v-10zm-7-6h6v5h-6v-5zm0 6h6v10h-6v-10zm-5-6h4v5h-4v-5zm0 6h4v10h-4v-10zm-7-11v50h30v-50h-30zm28 48h-26v-46h26v46zm-14-20h-8v18h8v-18zm-1 17h-6v-16h6v16zm9.7-20.5c0 .8.7 1.5 1.5 1.5h1c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5h-1c-.9 0-1.5.7-1.5 1.5zm1.3-.5h2v1h-2v-1z"
/>
<path fill="#8AA29A" d="M613.4 322.7h289v10h-289z" id="Rectangle_145_29_" />
<path fill="#7B908C" d="M612.7 321.4v12h291v-12h-291zm289 10h-287v-8h287v8z" />
<path fill="#BC9275" d="M613.4 261.7h228v3h-228z" id="Rectangle_145_26_" />
<path fill="#7B908C" d="M612.7 260.4v5h230v-5h-230zm228 3h-226v-1h226v1z" />
<path fill="#EDBC80" d="M673.4 172.7h150v3h-150z" id="Rectangle_145_23_" />
<path fill="#7B908C" d="M672.7 171.4v5h152v-5h-152zm150 3h-148v-1h148v1z" />
<path fill="#EDBC80" d="M783.4 322.7h28v9h-28z" id="Rectangle_86_5_" />
<path fill="#7B908C" d="M782.7 321.4v12h30v-12h-30zm4 10h-2v-8h2v8zm20 0h-18v-2h18v2zm0-3h-18v-1h18v1zm0-2h-18v-1h18v1zm0-2h-18v-1h18v1zm4 7h-2v-8h2v8z" />
<path fill="#B792A1" d="M823.4 319.7v3h8v-3h-8zm2 0h4v-52h1v-3h-6v3h1v52z" id="Rectangle_77_41_" />
<path fill="#7B908C" d="M831.7 266.7v-3.2h-8v3.2c0 .7 0 1.4 1 1.7V319c-1 .3-1 1-1 1.7v2.8h8v-2.8c0-.7-1-1.4-1-1.7v-50.6c0-.4 1-1 1-1.7zm-2 54.7h-4v-1h4v1zm-3-3v-50h2v50h-2zm3-52h-4v-1h4v1z" />
<path fill="#B792A1" d="M833.4 319.7v3h8v-3h-8zm2 0h4v-52h1v-3h-6v3h1v52z" id="Rectangle_77_38_" />
<path fill="#7B908C" d="M841.7 266.7v-3.2h-8v3.2c0 .7 0 1.4 1 1.7V319c-1 .3-1 1-1 1.7v2.8h8v-2.8c0-.7-1-1.4-1-1.7v-50.6c0-.4 1-1 1-1.7zm-2 54.7h-4v-1h4v1zm-3-3v-50h2v50h-2zm3-52h-4v-1h4v1z" />
<path fill="#B792A1" d="M753.4 319.7v3h8v-3h-8zm2 0h4v-52h1v-3h-6v3h1v52z" id="Rectangle_77_35_" />
<path fill="#7B908C" d="M761.7 266.7v-3.2h-8v3.2c0 .7 0 1.4 1 1.7V319c-1 .3-1 1-1 1.7v2.8h8v-2.8c0-.7-1-1.4-1-1.7v-50.6c0-.4 1-1 1-1.7zm-2 54.7h-4v-1h4v1zm-3-3v-50h2v50h-2zm3-52h-4v-1h4v1z" />
<path fill="#B792A1" d="M763.4 319.7v3h8v-3h-8zm2 0h4v-52h1v-3h-6v3h1v52z" id="Rectangle_77_32_" />
<path fill="#7B908C" d="M771.7 266.7v-3.2h-8v3.2c0 .7 0 1.4 1 1.7V319c-1 .3-1 1-1 1.7v2.8h8v-2.8c0-.7-1-1.4-1-1.7v-50.6c0-.4 1-1 1-1.7zm-2 54.7h-4v-1h4v1zm-3-3v-50h2v50h-2zm3-52h-4v-1h4v1z" />
<path fill="#B792A1" d="M683.4 319.7v3h8v-3h-8zm2 0h4v-52h1v-3h-6v3h1v52z" id="Rectangle_77_28_" />
<path fill="#7B908C" d="M691.7 266.7v-3.2h-8v3.2c0 .7 0 1.4 1 1.7V319c-1 .3-1 1-1 1.7v2.8h8v-2.8c0-.7-1-1.4-1-1.7v-50.6c0-.4 1-1 1-1.7zm-2 54.7h-4v-1h4v1zm-3-3v-50h2v50h-2zm3-52h-4v-1h4v1z" />
<path fill="#B792A1" d="M693.4 319.7v3h8v-3h-8zm2 0h4v-52h1v-3h-6v3h1v52z" id="Rectangle_77_25_" />
<path fill="#7B908C" d="M701.7 266.7v-3.2h-8v3.2c0 .7 0 1.4 1 1.7V319c-1 .3-1 1-1 1.7v2.8h8v-2.8c0-.7-1-1.4-1-1.7v-50.6c0-.4 1-1 1-1.7zm-2 54.7h-4v-1h4v1zm-3-3v-50h2v50h-2zm3-52h-4v-1h4v1z" />
<path fill="#B792A1" d="M613.4 319.7v3h8v-3h-8zm2 0h4v-52h1v-3h-6v3h1v52z" id="Rectangle_77_22_" />
<path fill="#7B908C" d="M621.7 266.7v-3.2h-8v3.2c0 .7 0 1.4 1 1.7V319c-1 .3-1 1-1 1.7v2.8h8v-2.8c0-.7-1-1.4-1-1.7v-50.6c0-.4 1-1 1-1.7zm-2 54.7h-4v-1h4v1zm-3-3v-50h2v50h-2zm3-52h-4v-1h4v1z" />
<path fill="#B792A1" d="M623.4 319.7v3h8v-3h-8zm2 0h4v-52h1v-3h-6v3h1v52z" id="Rectangle_77_20_" />
<path fill="#7B908C" d="M631.7 266.7v-3.2h-8v3.2c0 .7 0 1.4 1 1.7V319c-1 .3-1 1-1 1.7v2.8h8v-2.8c0-.7-1-1.4-1-1.7v-50.6c0-.4 1-1 1-1.7zm-2 54.7h-4v-1h4v1zm-3-3v-50h2v50h-2zm3-52h-4v-1h4v1z" />
<path fill="#E7FFCC" d="M712.4 274.7h29v27h-29z" id="Rectangle_92_16_" />
<path fill="#7B908C" d="M742.7 300.4v-27h-31v27h-1v2h33v-2h-1zm-29-25h13v25h-13v-25zm27 25h-13v-25h13v25z" />
<path fill="#E7FFCC" d="M852.4 274.7h29v27h-29z" id="Rectangle_92_13_" />
<path fill="#7B908C" d="M882.7 300.4v-27h-31v27h-1v2h33v-2h-1zm-29-25h13v25h-13v-25zm27 25h-13v-25h13v25z" />
<path fill="#CEB48E" d="M868.4 124.6l-45 45.1v5.9h1v.1h9v-.1 79h69v-79h11v-6z" id="side" />
<path fill="#7B908C" d="M914.7 169.6l-46-46-46 46v6.8h10v79h71v-79h11v-6.8zm-13 83.8h-67v-85.8l34-34 33 33v86.8zm11-79h-9v-8.8l-35-35-36 36v7.8h-8v-3.9l44-44 44 44v3.9z" />
<path fill="#E7FFCC" d="M852.4 194.7h29v27h-29z" id="Rectangle_92_10_" />
<path fill="#7B908C" d="M882.7 220.4v-27h-31v27h-1v2h33v-2h-1zm-29-25h13v25h-13v-25zm27 25h-13v-25h13v25z" />
<path fill="#C68B7B" d="M833.4 254.7v-22h-161l-60 29h229v-7z" id="porch-roof" />
<path fill="#7B908C" d="M842.7 260.4v-7h-8v-22H672.4l-60 29h-.7v2h232v-2h-1zm-2 0H617l55.9-27h159.9v22h8v5z" />
<path fill="#EDBC80" d="M711.4 269.7l1 5h29l1-5z" id="Rectangle_83_14_" />
<path fill="#7B908C" d="M728.4 268.4h-19.1l2 7h31l2-7h-15.9zm.9 5h-4.8l.9-3h3.1l.8 3zm-16.9-3h10.8l-.7 2.5c-.1.2-.1.5-.1.5h-9l-1-3zm28 3h-9s0-.4-.1-.5l-.7-2.5h10.8l-1 3z" />
<path fill="#EDBC80" d="M851.4 269.7l1 5h29l1-5z" id="Rectangle_83_11_" />
<path fill="#7B908C" d="M868.4 268.4h-19.1l2 7h31l2-7h-15.9zm.9 5h-4.8l.9-3h3.1l.8 3zm-16.9-3h10.8l-.7 2.5c-.1.2-.1.5-.1.5h-9l-1-3zm28 3h-9s0-.4-.1-.5l-.7-2.5h10.8l-1 3z" />
<path fill="#EDBC80" d="M851.4 189.7l1 5h29l1-5z" id="Rectangle_83_8_" />
<path fill="#7B908C" d="M868.4 188.4h-19.1l2 7h31l2-7h-15.9zm.9 5h-4.8l.9-3h3.1l.8 3zm-16.9-3h10.8l-.7 2.5c-.1.2-.1.5-.1.5h-9l-1-3zm28 3h-9s0-.4-.1-.5l-.7-2.5h10.8l-1 3z" />
</g>
</g><!--city-->
<g class="extras">
<g id="tree">
<g id="fence">
<path fill="#EDBC80" d="M906.7 308.4v24h6v-24l-3-4-3 4zm10 0v24h6v-24l-3-4-3 4zm13-4l-3 4v24h6v-24l-3-4z" />
<path fill="#7B908C" d="M934.7 313.4v-1h-1v-5l-4-4-4 4v5h-2v-5l-4-4-4 4v5h-2v-5l-4-4-4 4v5h-1v1h1v1h-1v1h1v7h-1v1h1v1h-1v1h1v8h8v-8h2v8h8v-8h2v8h8v-8h1v-1h-1v-1h1v-1h-1v-7h1v-1h-1v-1h1zm-9 0v1h-2v-1h2zm0 2v7h-2v-7h2zm-10-2v1h-2v-1h2zm0 2v7h-2v-7h2zm-4 16h-4v-23.2l2-2 2 2v23.2zm2-7v-1h2v1h-2zm8 7h-4v-23.2l2-2 2 2v23.2zm2-7v-1h2v1h-2zm8 7h-4v-23.2l2-2 2 2v23.2z"
/>
</g>
<g id="tree_1_">
<path fill="#AD937F" d="M381.7 274.4h6v58h-6z" />
<path fill="#7B908C" d="M388.7 289v-14.6h-2v57h-4v-57h-2v22.8l-9-5.1v2.2l9 5.2v33.9h8v-41.9l10-6V283z" />
<path fill="#9DDCA0" d="M428.6 246.3c2.2-2.1 3.7-5 3.7-8.3 0-4-2.1-7.5-5.2-9.5.1-.6.1-1.2.1-1.8 0-9.1-7.4-16.5-16.5-16.5-1.7 0-3.4.3-5 .8-1.7-4.1-5.7-6.9-10.4-6.9-3.8 0-7.1 1.9-9.2 4.7-3.7-2.9-8.4-4.7-13.4-4.7-10.6 0-19.3 7.6-21.2 17.6-7.2.8-12.7 6.9-12.7 14.3 0 1.7.3 3.3.8 4.8-2.4 2.1-3.9 5.1-3.9 8.6 0 4.9 3.1 9 7.4 10.6 1.2 9.1 8.9 16.1 18.3 16.1 4.1 0 7.9-1.3 10.9-3.6 2.3 2.8 5.7 4.6 9.6 4.6 4.8 0 8.9-2.7 11-6.7 2.1 1.6 4.7 2.6 7.5 2.6 3.5 0 6.7-1.5 9-3.9 2.6 2.4 6.2 3.9 10 3.9 8.2 0 14.9-6.7 14.9-14.9 0-4.8-2.2-9.1-5.7-11.8zm-12.2 33.9c-.7-1.3-2-2.1-3.5-2.1-1.3 0-2.5.7-3.3 1.7-.4-.2-.9-.4-1.4-.5-.9-1.1-2.5-1.5-3.7-.8-.5-.2-1.1-.3-1.6-.3-1.9 0-3.4 1.3-3.9 3.1-2.2-.1-4.1 1.8-4.1 4.1 0 1.5.8 2.9 2 3.6v.5c0 1.7 1.3 3.1 3 3.1.7 0 1.3-.2 1.8-.7 1.5 1 3.5.8 4.8-.4h.4c1.8 1.3 4.3 1.3 6 0 .6.7 1.5 1.1 2.5 1.1 1.8 0 3.2-1.3 3.5-3.1 1.3-1 2-2.5 2-4.1 0-2.8-1.9-5-4.5-5.2zm-44.5 7.4c-.4 0-.8.1-1.2.2v-.2c0-1.9-1.6-3.5-3.5-3.5-.7 0-1.4.2-2 .6-.4-.4-.9-.6-1.5-.6-.9 0-1.7.5-2.1 1.3-2.2.3-3.9 1.9-4.6 3.9-1.6.8-2.7 2.3-2.7 4.2 0 2.6 2.1 4.7 4.7 4.7 1.2 0 2.3-.5 3.1-1.2h.4c.3 0 .6 0 .8-.1.6.8 1.6 1.3 2.7 1.3s2-.5 2.6-1.2c.4.7 1.2 1.2 2 1.2 1.3 0 2.3-1 2.3-2.3 0-.5-.1-.9-.4-1.3 1.6-.4 2.7-1.7 2.7-3.4.2-2.1-1.3-3.6-3.3-3.6zm-3.5 3.5v-.2c.1 0 0 .1 0 .2z"
/>
<path fill="#7B908C" d="M366.1 288.2l-1.7.6c-.3.1-.5.5-.5.8.1.3.4.5.7.4l1.7-.6c.6-.2 1.1.1 1.2.7l.3 1.6c0 .2.1.3.2.3.1.1.3.1.4 0 .3-.1.5-.5.5-.8l-.3-1.6c-.1-1.2-1.3-1.8-2.5-1.4zm48.9-4.8l-.7 1.7c-.2.6-.8.8-1.3.4l-1.3-1c-.1-.1-.3-.1-.4-.1-.1 0-.2.1-.3.3-.1.3 0 .7.2.9l1.3 1c.9.8 2.1.4 2.7-.9l.7-1.7c.1-.3 0-.7-.2-.9-.3-.1-.6 0-.7.3zm15.2-37.4c1.8-2.3 2.7-5.1 2.7-7.9 0-4-1.9-7.8-5-10.2v-.8c0-9.9-8.1-18-18-18-1.3 0-2.5.1-3.8.4-2.3-3.9-6.5-6.4-11.2-6.4-3.5 0-6.8 1.4-9.2 3.9-3.8-2.5-8.2-3.9-12.8-3.9-10.6 0-19.7 7.2-22.3 17.3-7.3 1.5-12.7 8-12.7 15.7 0 1.4.2 2.7.5 4.1-2.3 2.4-3.5 5.6-3.5 8.9 0 5 2.9 9.6 7.4 11.7 1.8 9.4 10 16.3 19.6 16.3 3.7 0 7.2-1 10.3-2.9 2.6 2.5 6 3.9 9.7 3.9 4.5 0 8.7-2.1 11.3-5.7 2.1 1.1 4.3 1.7 6.7 1.7 3.3 0 6.3-1.1 8.8-3.1 2.8 2 6.2 3.2 9.7 3.2 9.1 0 16.5-7.4 16.5-16.5 0-4.5-1.7-8.6-4.7-11.7zm-11.7 26.1c-3.8 0-7.2-1.5-9.8-3.8-2.2 2.3-5.3 3.8-8.7 3.8-2.8 0-5.3-.9-7.3-2.5-2 3.9-6 6.5-10.7 6.5-3.8 0-7.2-1.8-9.4-4.5-3 2.2-6.7 3.5-10.6 3.5-9.2 0-16.7-6.8-17.8-15.7-4.2-1.6-7.2-5.6-7.2-10.3 0-3.3 1.5-6.3 3.8-8.3-.5-1.5-.8-3-.8-4.7 0-7.2 5.4-13.1 12.4-13.9 1.8-9.7 10.4-17.1 20.6-17.1 4.9 0 9.5 1.7 13.1 4.6 2-2.8 5.2-4.6 8.9-4.6 4.6 0 8.5 2.8 10.1 6.8 1.5-.5 3.2-.8 4.9-.8 8.8 0 16 7.2 16 16 0 .6 0 1.2-.1 1.7 3.1 2 5.1 5.4 5.1 9.3 0 3.2-1.4 6.1-3.6 8.1 3.4 2.7 5.6 6.8 5.6 11.4-.1 8-6.5 14.5-14.5 14.5zM403.4 234c.1 0 .3-.1.4-.2.2-.2.2-.6 0-.9l-1-1.2c-.7-.9-2-.9-2.7 0l-1 1.2c-.2.2-.2.6 0 .9.2.2.5.2.7 0l1-1.2c.3-.4.9-.4 1.3 0l1 1.2c.1.2.2.2.3.2zm-52.6-.1l1-1.2c.3-.4.9-.4 1.3 0l1 1.2c.1.1.2.2.4.2.1 0 .3-.1.4-.2.2-.2.2-.6 0-.9l-1-1.2c-.7-.9-2-.9-2.7 0l-1 1.2c-.2.2-.2.6 0 .9.1.2.4.2.6 0zm22.1-17.2l.8-1.7c.3-.6.9-.8 1.3-.5l1.2.9c.1.1.3.1.4.1.1 0 .2-.2.3-.3.2-.3.1-.7-.2-.9l-1.2-.9c-.9-.7-2.1-.2-2.7 1l-.8 1.6c-.2.3-.1.7.2.9.2.3.5.1.7-.2zm51.6 42.7c-.9-.7-2.1-.2-2.7 1l-.8 1.6c-.2.3-.1.7.2.9.2.2.5.1.7-.3l.8-1.7c.3-.6.9-.8 1.3-.5l1.2.9c.1.1.3.1.4.1.1 0 .2-.2.3-.3.2-.3.1-.7-.2-.9l-1.2-.8zm-9.1-39.1l-1.6-.3c-.3-.1-.7.1-.8.3-.1.2.1.5.4.5l1.6.3c.6.1.9.6.7 1l-.5 1.3c-.1.1 0 .2 0 .3.1.1.2.2.4.2.3.1.7-.1.8-.3l.5-1.3c.3-.8-.3-1.7-1.5-2zM384.3 266l-1.7.7c-.6.2-1.2-.1-1.2-.6l-.2-1.6c0-.2-.1-.3-.2-.3-.1-.1-.3-.1-.4 0-.3.1-.6.5-.5.8l.2 1.6c.1 1.2 1.3 1.8 2.6 1.3l1.7-.7c.3-.1.6-.5.5-.8-.2-.4-.5-.5-.8-.4zm-19.7-20.9l-1.7-.7c-.6-.2-.8-.8-.4-1.3l1-1.3c.1-.1.1-.3.1-.4 0-.1-.1-.2-.3-.3-.3-.1-.8-.1-.9.2l-1 1.3c-.8 1-.4 2.2.9 2.7l1.7.7c.3.1.8.1.9-.2.2-.3.1-.6-.3-.7zm43.5 1.9l1.7-.6c1.3-.4 1.5-1.6.6-2.7l-1.2-1.4c-.2-.3-.7-.4-1-.3-.3.1-.4.4-.2.7l1.2 1.4c.4.5.3 1.1-.3 1.3l-1.7.6c-.2.1-.3.2-.3.3 0 .1 0 .3.1.4.3.3.8.4 1.1.3zm-27.4-13l1.4-1.2c.5-.4 1.1-.3 1.3.3l.6 1.7c.1.2.2.3.3.3.1 0 .3 0 .4-.1.3-.2.4-.7.3-1l-.6-1.7c-.4-1.3-1.6-1.5-2.7-.6l-1.4 1.2c-.3.2-.4.7-.3 1 .1.2.4.3.7.1zm-18.4 30.2c-.4-1.3-1.6-1.5-2.7-.6l-1.4 1.2c-.3.2-.4.7-.3 1 .1.3.4.4.7.2l1.4-1.2c.5-.4 1.1-.3 1.3.3l.6 1.7c.1.2.2.3.3.3.1 0 .3 0 .4-.1.3-.2.4-.7.3-1l-.6-1.8zm13.6-13.8l-.6 1.7c-.2.6-.8.7-1.3.4l-1.4-1.1c-.1-.1-.3-.1-.4-.1-.1 0-.2.1-.3.3-.1.3 0 .8.3 1l1.4 1.1c1 .8 2.2.5 2.7-.7l.6-1.7c.1-.3 0-.8-.3-1-.2-.3-.5-.2-.7.1zm24.2-29.9c.2.2.5.2.7 0 .2-.2.2-.6 0-.8l-1-1.1c-.3-.4-.7-.5-1.2-.5-.6.1-1.2.6-1.6 1.3-.3.6-.8.6-1.1 0-.4-.8-1-1.3-1.6-1.3-.4-.1-.9.1-1.2.5l-1 1.1c-.2.2-.2.6 0 .8.2.2.5.2.7 0l1-1.1c.1-.1.2-.2.4-.1.2 0 .6.3.9.8.4.7.9 1.1 1.4 1.1.6 0 1.1-.4 1.4-1.1.3-.5.6-.8.9-.8.1 0 .3 0 .4.1l.9 1.1zm-3.9 30c-.2-.5-.6-.8-1.1-.9-.6-.1-1.3.3-1.9 1-.5.6-1 .5-1.1-.4-.2-1-.7-1.7-1.2-2-.4-.2-.9-.2-1.3.2l-1.3 1c-.2.2-.3.6-.2.9.1.3.5.4.7.2l1.3-1c.1-.1.3-.1.4 0 .2.1.5.5.6 1.2.2.9.6 1.5 1.1 1.6.5.2 1.2-.1 1.7-.7.4-.5.8-.7 1.1-.6.1 0 .3.1.3.3l.7 1.6c.1.3.5.4.7.2.3-.2.3-.6.2-.9l-.7-1.7zm-25.8-27.4l-1.6-.1c-.5 0-.9.2-1.2.5-.4.5-.4 1.3-.2 2.1.2.7-.1 1.1-.8.8-.8-.3-1.6-.2-2.1.2-.4.3-.6.7-.5 1.2l.1 1.6c0 .3.3.6.6.6s.5-.2.5-.5l-.1-1.6c0-.2 0-.3.2-.4.2-.1.6-.2 1.2 0 .7.2 1.4.1 1.8-.3.4-.4.5-1.1.3-1.8-.2-.6-.1-1 0-1.2.1-.1.2-.2.4-.2l1.6.1c.3 0 .5-.2.5-.5-.2-.2-.4-.4-.7-.5zm-16.1 30.2l-1.4.5c-.1.1-.3 0-.4-.1-.2-.2-.4-.5-.3-1.2 0-.8-.2-1.4-.7-1.7-.5-.3-1.1-.2-1.8.2-.5.3-.9.4-1.1.3-.1-.1-.2-.2-.2-.3l-.3-1.6c-.1-.3-.3-.5-.6-.4-.3.1-.5.4-.4.7l.3 1.6c.1.5.4.9.8 1.1.6.2 1.3.1 2.1-.4.6-.4 1-.2 1 .6 0 .9.2 1.7.7 2.1.4.3.8.4 1.3.2l1.4-.5c.3-.1.5-.4.4-.7-.2-.3-.5-.5-.8-.4zm67.5-11.5l.9-1.3c.3-.4.3-.9.2-1.3-.2-.6-.8-1-1.7-1.2-.7-.1-.8-.6-.3-1.1.6-.6 1-1.3.9-2 0-.5-.3-.8-.7-1l-1.3-.7c-.3-.1-.6 0-.8.2-.2.3-.1.6.2.7l1.3.7c.1.1.2.2.2.3 0 .2-.1.6-.6 1.1-.6.5-.8 1.2-.7 1.7.1.5.6 1 1.4 1.1.6.1.9.4 1 .6.1.1 0 .3-.1.4l-.9 1.3c-.2.3-.1.6.2.7.3.1.7 0 .8-.2zm-10.2 18.3c-.3-.2-.6-.1-.7.2l-.7 1.3c-.1.1-.2.2-.3.2-.2 0-.6-.1-1.1-.6-.6-.6-1.2-.8-1.7-.7-.6.1-1 .6-1.1 1.4-.1.6-.4.9-.6 1-.1.1-.3 0-.4-.1l-1.3-.9c-.3-.2-.6-.1-.7.2-.1.3 0 .6.2.8l1.3.9c.4.3.9.3 1.3.2.6-.2 1-.8 1.2-1.7.1-.7.6-.8 1.1-.3.6.6 1.3 1 2 .9.5 0 .8-.3 1-.7l.7-1.3c.2-.2.1-.6-.2-.8zm-3.4 25.8c-.2-.4-.6-.7-1.1-.7-.6-.1-1.3.2-1.9.9-.5.5-1 .4-1.1-.3-.2-.8-.6-1.4-1.2-1.6-.4-.2-.9-.1-1.3.1l-1.3.8c-.3.2-.4.5-.2.7.1.3.4.3.7.2l1.3-.8c.1-.1.3-.1.4 0 .2.1.5.4.6.9.2.7.6 1.2 1.1 1.3.5.1 1.2-.1 1.7-.6.4-.4.8-.6 1.1-.5.1 0 .3.1.3.2l.7 1.3c.1.3.4.3.7.2.3-.2.4-.5.2-.7l-.7-1.4zm-36.7.2c-.8-1.8-2.5-3-4.6-3-.5 0-1.1.1-1.6.3-.4-.2-.9-.3-1.4-.3-1.1 0-2.2.5-2.9 1.3-1.9.6-3.5 1.9-4.4 3.7-1.7 1.1-2.7 2.9-2.7 5 0 3.3 2.7 6 6 6 1.1 0 2.2-.3 3.1-.9.8.6 1.8.9 2.9.9.7 0 1.5-.2 2.1-.5.6.3 1.2.5 1.9.5 2.2 0 4-1.8 4-4 1.2-.9 2-2.4 2-4 0-2.6-1.9-4.7-4.4-5zm.1 7.9c.2.3.3.7.3 1.1 0 1.1-.9 2-2 2-.8 0-1.4-.4-1.7-1-.6.6-1.4 1-2.3 1-.9 0-1.7-.4-2.3-1.1-.2 0-.5.1-.7.1h-.3c-.7.6-1.6 1-2.7 1-2.2 0-4-1.8-4-4 0-1.6.9-2.9 2.3-3.6.6-1.7 2.1-3 4-3.3.3-.6 1-1.1 1.8-1.1.5 0 1 .2 1.3.5.5-.3 1.1-.5 1.7-.5 1.7 0 3 1.3 3 3v.2c.3-.1.7-.2 1-.2 1.7 0 3 1.3 3 3-.1 1.4-1 2.6-2.4 2.9zm45.4-14.9c-.9-1.3-2.4-2.1-4.1-2.1-1.4 0-2.6.5-3.5 1.5-.2-.1-.4-.1-.5-.2-.7-.8-1.8-1.3-2.9-1.3-.5 0-1 .1-1.4.3-.5-.2-1-.3-1.6-.3-2.1 0-3.8 1.3-4.6 3-2.5.3-4.4 2.4-4.4 5 0 1.6.8 3.1 2 4 0 2.2 1.8 4 4 4 .7 0 1.3-.2 1.9-.5.7.3 1.4.5 2.1.5 1 0 2-.3 2.9-.9.9.6 2 .9 3.1.9s2.1-.3 3-.8c.7.5 1.6.8 2.5.8 2.1 0 3.9-1.5 4.4-3.4 1.3-1.1 2.1-2.8 2.1-4.6-.1-2.9-2.2-5.4-5-5.9zm.9 9.4c0 1.4-1.1 2.6-2.5 2.6-1.1 0-2-.7-2.3-1.6-.7 1-1.9 1.6-3.2 1.6-1 0-2-.4-2.7-1h-.3c-.2 0-.5 0-.7-.1-.6.6-1.4 1.1-2.3 1.1-.9 0-1.7-.4-2.3-1-.3.6-1 1-1.7 1-1.1 0-2-.9-2-2 0-.4.1-.8.3-1.1-1.3-.3-2.3-1.5-2.3-2.9 0-1.7 1.3-3 3-3 .4 0 .7.1 1 .2v-.2c0-1.7 1.3-3 3-3 .6 0 1.2.2 1.7.5.4-.3.8-.5 1.3-.5.8 0 1.4.4 1.8 1.1.9.1 1.7.5 2.4 1.1.4-1.2 1.5-2.1 2.9-2.1 1.3 0 2.4.8 2.8 2h.2c2.2 0 4 1.8 4 4-.1 1.3-.9 2.6-2.1 3.3z"
/>
</g>
<g id="bush1_1_">
<path id="bush" fill="#9DDCA0" d="M989 324c.5-1.1.7-2.3.7-3.5 0-3.2-1.7-6.2-4.4-7.8.3-.7.4-1.5.4-2.2 0-3.3-2.7-6-6-6-.5 0-1 .1-1.4.2-2.5-2.7-5.9-4.2-9.6-4.2-4.5 0-8.6 2.3-11 6.1-2.2.4-4 1.9-4.7 4-.4-.1-.9-.1-1.3-.1-4.4 0-8 3.6-8 8 0 .7.1 1.4.3 2-2.1.2-4.1 1.1-5.6 2.6-.8-.4-1.7-.6-2.7-.6-3.3 0-6 2.7-6 6 0 1.3.4 2.5 1.2 3.6.2.3.5.4.8.4h58.9c.5 0 .9-.4 1-.9.1-.4.1-.8.1-1.1 0-2.5-1-4.8-2.7-6.5z"
/>
<path fill="#7B908C" d="M990.1 323.8c.4-1.1.6-2.2.6-3.3 0-3.3-1.6-6.3-4.2-8.2.2-.6.2-1.2.2-1.8 0-3.9-3.1-7-7-7-.4 0-.7 0-1.1.1-2.6-2.6-6.2-4.1-9.9-4.1-4.7 0-9 2.4-11.6 6.2-2.1.5-3.8 1.9-4.7 3.8h-.7c-5 0-9 4-9 9 0 .4 0 .8.1 1.2-1.7.3-3.3 1.1-4.6 2.3-.8-.3-1.6-.4-2.4-.4-3.9 0-7 3.1-7 7 0 1.5.5 3 1.4 4.2.4.5 1 .8 1.6.8h58.9c1 0 1.9-.8 2-1.8.1-.5.1-.9.1-1.2-.1-2.6-1-5-2.7-6.8zm.5 7.6h-58.9c-.6-1-1-1.9-1-3 0-2.8 2.2-5 5-5 1.1 0 2 .3 2.8.9 1.5-1.8 3.7-2.9 6.2-2.9h.7c-.4-.9-.7-1.9-.7-3 0-3.9 3.1-7 7-7 .7 0 1.4.1 2.1.3.3-2.3 2.2-4.1 4.5-4.3 2.1-3.6 6-6 10.4-6 3.7 0 7 1.7 9.2 4.3.6-.2 1.1-.3 1.8-.3 2.8 0 5 2.2 5 5 0 1-.3 1.9-.8 2.7 2.8 1.2 4.8 4.1 4.8 7.3 0 1.4-.3 2.7-1 3.8 1.8 1.5 3 3.7 3 6.2 0 .4 0 1-.1 1zm-51.4-4.2l-1.6-.6c-1.2-.4-2.4.2-2.6 1.4l-.3 1.6c-.1.3.2.7.5.8.3.1.6 0 .7-.4l.3-1.6c.1-.6.7-.9 1.2-.7l1.6.6c.2.1.3 0 .4 0 .1-.1.2-.2.2-.3.1-.3-.1-.7-.4-.8zm14.7-9.5c-.5-1.3-1.7-1.6-2.7-.9l-1.3 1c-.2.2-.3.6-.2 1 .1.3.4.4.7.2l1.3-1c.4-.4 1-.2 1.3.4l.7 1.7c.1.2.2.3.3.3.1 0 .3 0 .4-.1.2-.2.3-.6.2-1l-.7-1.6zm17.6-9.8c-.3-.4-.7-.5-1.2-.5-.6.1-1.2.6-1.6 1.3-.3.6-.8.6-1.1 0-.4-.8-1-1.3-1.6-1.3-.4-.1-.9.1-1.2.5l-1 1.1c-.2.2-.2.6 0 .8.2.2.5.2.7 0l1-1.1c.1-.1.2-.2.4-.1.2 0 .6.3.9.8.4.7.9 1.1 1.4 1.1s1.1-.4 1.4-1.1c.3-.5.6-.8.9-.8.1 0 .3 0 .4.1l1 1.1c.2.2.5.2.7 0 .2-.2.2-.6 0-.8l-1.1-1.1zm9.4 11.4c-.2-.4-.6-.7-1.1-.7-.6-.1-1.3.2-1.9.8-.5.5-1 .4-1.1-.3-.2-.8-.6-1.4-1.2-1.6-.4-.2-.9-.1-1.3.1l-1.3.8c-.3.2-.3.5-.2.7.1.3.4.3.7.2l1.3-.8c.1-.1.3-.1.4 0 .2.1.5.4.6.9.2.7.6 1.2 1.1 1.3.5.1 1.2-.1 1.7-.6.4-.4.8-.5 1.1-.5.1 0 .3.1.3.2l.7 1.3c.1.3.4.3.7.2.3-.2.3-.5.2-.7l-.7-1.3zm-13.4 4.2c-.2-.1-.6-.1-.7.2l-.8 1.3c-.1.1-.2.2-.3.2-.2 0-.6-.1-1-.5-.5-.5-1.1-.7-1.7-.5-.6.1-1 .6-1.2 1.3-.2.5-.4.8-.7.9-.1.1-.3 0-.4 0l-1.3-.7c-.2-.1-.6-.1-.7.2-.1.2-.1.6.2.7l1.3.7c.4.2.9.3 1.3.1.6-.2 1.1-.8 1.3-1.6.2-.6.6-.8 1.1-.3.6.6 1.3.8 1.9.7.5-.1.8-.3 1.1-.7l.7-1.3c.2-.2.1-.5-.1-.7z"
/>
</g>
<g id="lamp1">
<path fill="#BC9275" d="M607.7 328.4v-12h-4v12h-2v4h8v-4z" />
<path fill="#7B908C" d="M613.7 233.3c-3.5 0-6.5 1.9-8 4.8-1.5-2.9-4.5-4.8-8-4.8-5 0-9 4.1-9 9.1h2c0-4 3.1-7.2 7-7.2s7 3.1 7 6.9v-.1 13.3h-2v2h2V315c-1 0-2 .9-2 2v10c-1 0-2 .9-2 2v4.3h10V329c0-1.1-.9-2-2-2v-10c0-1.1-.9-2-2-2v-57.7h2v-2h-2v-13c0-4 3.1-7 7-7s7 3 7 7h2c0-4.9-4.1-9-9-9zm-9 84.1h2v10h-2v-10zm4 12v2h-6v-2h6z"
/>
<path fill="#E7FFCC" d="M621.7 243.1c-3.3 0-6 2.8-6 6.2 0 .6.4 1.2 1 1.2h3.9c-.2 0-.4.5-.4.8 0 .8.7 1.4 1.5 1.4s1.5-.6 1.5-1.4c0-.4-.1-.9-.4-.9h3.9c.6 0 1-.6 1-1.2 0-3.2-2.7-6.1-6-6.1zm-32 0c-3.3 0-6 2.8-6 6.2 0 .6.4 1.2 1 1.2h3.9c-.2 0-.4.5-.4.8 0 .8.7 1.4 1.5 1.4s1.5-.6 1.5-1.4c0-.4-.1-.9-.4-.9h3.9c.6 0 1-.6 1-1.2 0-3.2-2.7-6.1-6-6.1z"
/>
<path fill="#7B908C" d="M621.7 242.1c-3.9 0-7 3.3-7 7.2 0 1.1.9 2.2 2 2.2h3c0 1 .9 2 2 2s2-1 2-2h3c1.1 0 2-1.1 2-2.2 0-3.9-3.2-7.2-7-7.2zm0 10c-.6 0-1-.4-1-1h2c0 .6-.5 1-1 1zm-5-2.7c0-3 2.2-5 5-5s5 2 5 5h-10zm-27-7.3c-3.9 0-7 3.3-7 7.2 0 1.1.9 2.2 2 2.2h3c0 1 .9 2 2 2s2-1 2-2h3c1.1 0 2-1.1 2-2.2 0-3.9-3.2-7.2-7-7.2zm0 10.3c-.6 0-1-1-1-1h2s-.5 1-1 1zm-5-3c0-3 2.2-5 5-5s5 2 5 5h-10z"
/>
</g>
<g id="lamp2">
<path fill="#BC9275" d="M915.7 328.4v-12h-4v12h-2v4h8v-4z" />
<path fill="#7B908C" d="M921.7 233.4c-3.5 0-6.5 2-8 4.9-1.5-2.9-4.5-4.9-8-4.9-5 0-9 4-9 9h2c0-4 3.1-7 7-7s7 3.1 7 7v13h-2v2h2v58c-1 0-2 .9-2 2v10c-1.1 0-2 .9-2 2v4h10v-4c0-1.1-.9-2-2-2v-10c0-1.1-.9-2-2-2v-58h2v-2h-2v-13c0-3.9 3.1-7 7-7s7 3 7 7h2c0-5-4-9-9-9zm-9 84h2v10h-2v-10zm4 12v2h-6v-2h6z"
/>
<path fill="#E7FFCC" d="M929.7 243.4c-3.3 0-6 2.7-6 6 0 .6.4 1 1 1h3.9c-.2.3-.4.6-.4 1 0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5c0-.4-.1-.7-.4-1h3.9c.6 0 1-.4 1-1 0-3.3-2.7-6-6-6zm-32 0c-3.3 0-6 2.7-6 6 0 .6.4 1 1 1h3.9c-.2.3-.4.6-.4 1 0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5c0-.4-.1-.7-.4-1h3.9c.6 0 1-.4 1-1 0-3.3-2.7-6-6-6z"
/>
<path fill="#7B908C" d="M929.7 242.4c-3.9 0-7 3.1-7 7 0 1.1.9 2 2 2h3c0 1.1.9 2 2 2s2-.9 2-2h3c1.1 0 2-.9 2-2 0-3.8-3.1-7-7-7zm0 10c-.6 0-1-.4-1-1h2c0 .6-.4 1-1 1zm-5-3c0-3 2.2-5 5-5s5 2 5 5h-10zm-27-7c-3.9 0-7 3.1-7 7 0 1.1.9 2 2 2h3c0 1.1.9 2 2 2s2-.9 2-2h3c1.1 0 2-.9 2-2 0-3.8-3.1-7-7-7zm0 10c-.6 0-1-.4-1-1h2c0 .6-.4 1-1 1zm-5-3c0-3 2.2-5 5-5s5 2 5 5h-10z"
/>
</g>
<g id="bush2_1_">
<path id="b2" fill="#9DDCA0" d="M153 324c.5-1.1.7-2.3.7-3.5 0-3.2-1.7-6.2-4.4-7.8.3-.7.4-1.5.4-2.2 0-3.3-2.7-6-6-6-.5 0-1 .1-1.4.2-2.5-2.7-5.9-4.2-9.6-4.2-4.5 0-8.6 2.3-11 6.1-2.2.4-4 1.9-4.7 4-.4-.1-.9-.1-1.3-.1-4.4 0-8 3.6-8 8 0 .7.1 1.4.3 2-2.1.2-4.1 1.1-5.6 2.6-.8-.4-1.7-.6-2.7-.6-3.3 0-6 2.7-6 6 0 1.3.4 2.5 1.2 3.6.2.3.5.4.8.4h58.9c.5 0 .9-.4 1-.9.1-.4.1-.8.1-1.1 0-2.5-1-4.8-2.7-6.5z"
/>
<path fill="#7B908C" d="M154.1 323.8c.4-1.1.6-2.2.6-3.3 0-3.3-1.6-6.3-4.2-8.2.2-.6.2-1.2.2-1.8 0-3.9-3.1-7-7-7-.4 0-.7 0-1.1.1-2.6-2.6-6.2-4.1-9.9-4.1-4.7 0-9 2.4-11.6 6.2-2.1.5-3.8 1.9-4.7 3.8h-.7c-5 0-9 4-9 9 0 .4 0 .8.1 1.2-1.7.3-3.3 1.1-4.6 2.3-.8-.3-1.6-.4-2.4-.4-3.9 0-7 3.1-7 7 0 1.5.5 3 1.4 4.2.4.5 1 .8 1.6.8h58.9c1 0 1.9-.8 2-1.8.1-.5.1-.9.1-1.2-.1-2.6-1-5-2.7-6.8zm.5 7.6H95.7c-.6-1-1-1.9-1-3 0-2.8 2.2-5 5-5 1.1 0 2 .3 2.8.9 1.5-1.8 3.7-2.9 6.2-2.9h.7c-.4-.9-.7-1.9-.7-3 0-3.9 3.1-7 7-7 .7 0 1.4.1 2.1.3.3-2.3 2.2-4.1 4.5-4.3 2.1-3.6 6-6 10.4-6 3.7 0 7 1.7 9.2 4.3.6-.2 1.1-.3 1.8-.3 2.8 0 5 2.2 5 5 0 1-.3 1.9-.8 2.7 2.8 1.2 4.8 4.1 4.8 7.3 0 1.4-.3 2.7-1 3.8 1.8 1.5 3 3.7 3 6.2 0 .4 0 1-.1 1zm-51.4-4.2l-1.6-.6c-1.2-.4-2.4.2-2.6 1.4l-.3 1.6c-.1.3.2.7.5.8.3.1.6 0 .7-.4l.3-1.6c.1-.6.7-.9 1.2-.7l1.6.6c.2.1.3 0 .4 0 .1-.1.2-.2.2-.3.1-.3-.1-.7-.4-.8zm14.7-9.5c-.5-1.3-1.7-1.6-2.7-.9l-1.3 1c-.2.2-.3.6-.2 1 .1.3.4.4.7.2l1.3-1c.4-.4 1-.2 1.3.4l.7 1.7c.1.2.2.3.3.3.1 0 .3 0 .4-.1.2-.2.3-.6.2-1l-.7-1.6zm17.6-9.8c-.3-.4-.7-.5-1.2-.5-.6.1-1.2.6-1.6 1.3-.3.6-.8.6-1.1 0-.4-.8-1-1.3-1.6-1.3-.4-.1-.9.1-1.2.5l-1 1.1c-.2.2-.2.6 0 .8.2.2.5.2.7 0l1-1.1c.1-.1.2-.2.4-.1.2 0 .6.3.9.8.4.7.9 1.1 1.4 1.1s1.1-.4 1.4-1.1c.3-.5.6-.8.9-.8.1 0 .3 0 .4.1l1 1.1c.2.2.5.2.7 0 .2-.2.2-.6 0-.8l-1.1-1.1zm9.4 11.4c-.2-.4-.6-.7-1.1-.7-.6-.1-1.3.2-1.9.8-.5.5-1 .4-1.1-.3-.2-.8-.6-1.4-1.2-1.6-.4-.2-.9-.1-1.3.1l-1.3.8c-.3.2-.3.5-.2.7.1.3.4.3.7.2l1.3-.8c.1-.1.3-.1.4 0 .2.1.5.4.6.9.2.7.6 1.2 1.1 1.3.5.1 1.2-.1 1.7-.6.4-.4.8-.5 1.1-.5.1 0 .3.1.3.2l.7 1.3c.1.3.4.3.7.2.3-.2.3-.5.2-.7l-.7-1.3zm-13.4 4.2c-.2-.1-.6-.1-.7.2l-.8 1.3c-.1.1-.2.2-.3.2-.2 0-.6-.1-1-.5-.5-.5-1.1-.7-1.7-.5-.6.1-1 .6-1.2 1.3-.2.5-.4.8-.7.9-.1.1-.3 0-.4 0l-1.3-.7c-.2-.1-.6-.1-.7.2-.1.2-.1.6.2.7l1.3.7c.4.2.9.3 1.3.1.6-.2 1.1-.8 1.3-1.6.2-.6.6-.8 1.1-.3.6.6 1.3.8 1.9.7.5-.1.8-.3 1.1-.7l.7-1.3c.2-.2.1-.5-.1-.7z"
/>
</g>
</g>
</g><!--city-->
<g id="sky">
<path fill="#9DDCA0" d="M766.7 70.4H726c-1-2.2-3.2-3.8-5.7-4 .3-.8.4-1.6.4-2.5 0-4.2-3.1-7.7-7.2-8.4.1-.5.2-1.1.2-1.6 0-4.7-3.8-8.5-8.5-8.5-3 0-5.6 1.5-7.1 3.9-2-2.4-5-3.9-8.4-3.9-6 0-10.9 4.8-11 10.8-.1 0-.1 0-.2.1-.2-.7-.5-1.3-.9-1.8v-.1c-.1-.1-.1-.2-.2-.3 0 0 0-.1-.1-.1-.1-.1-.1-.2-.2-.2l-.1-.1c-.1-.1-.2-.1-.2-.2 0 0-.1 0-.1-.1-.1-.1-.3-.2-.4-.3-.1 0-.1-.1-.2-.1s-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.2-.1-.2-.1c-.1 0-.1 0-.2-.1-.1 0-.2 0-.3-.1h-2.4c-.1 0-.2 0-.2.1-.1 0-.2.1-.2.1-.1 0-.1 0-.2.1-.1 0-.2.1-.3.1-.1 0-.1 0-.2.1-.1 0-.2.1-.3.1 0 0-.1 0-.1.1-.1.1-.2.1-.3.2l-.1.1c-.1.1-.2.1-.3.2-2-2-4.7-3.2-7.8-3.2-4.7 0-8.7 2.9-10.3 7h-.7c-3.2 0-6 1.9-7.3 4.7-1.4-2.2-3.9-3.7-6.7-3.7-2.8 0-5.2 1.4-6.6 3.5-1.3-1.5-3.2-2.5-5.4-2.5-3.2 0-5.9 2.2-6.7 5.1-.4-.1-.8-.1-1.3-.1-3.7 0-6.8 2.6-7.7 6h-41.3c-.6 0-1 .4-1 1s.4 1 1 1h42c.6 0 1-.4 1-1h.1c.5-2.8 2.9-5 5.9-5 .3 0 .6 0 .9.1h.3c.9 0 1.7-.6 1.9-1.5.6-2.1 2.6-3.6 4.8-3.6 1.5 0 2.9.7 3.8 1.8.4.5.9.7 1.5.7h.1c.6 0 1.2-.4 1.6-.9 1.1-1.7 3-2.6 5-2.6s3.9 1 5 2.8c.4.6 1 .9 1.7.9h.1c.7-.1 1.4-.5 1.7-1.2 1-2.1 3.1-3.5 5.5-3.5h.8c.8 0 1.6-.5 1.9-1.3 1.4-3.5 4.6-5.8 8.4-5.8 2.4 0 4.6.9 6.3 2.6.4.4.9.6 1.4.6.5 0 .9-.2 1.3-.5.1 0 .1-.1.2-.1s.1-.1.2-.1.1-.1.2-.1h.1c.1 0 .1 0 .2-.1h2.1s.1 0 .2.1h.1s.1 0 .1.1H675.1c.1.1.2.1.3.2h.1l.1.1h.1l.1.1c0 .1.1.1.2.2.2.3.4.7.5 1.1.1.6.5 1.1 1.1 1.3.3.1.6.2.9.2.3 0 .6-.1.8-.2.1 0 .1 0 .2-.1.7-.3 1.2-1 1.2-1.8.1-4.9 4.1-8.8 9-8.8 2.6 0 5.1 1.2 6.8 3.2.4.4.9.7 1.5.7h.1c.6 0 1.2-.4 1.5-.9 1.2-1.9 3.2-3 5.5-3 3.6 0 6.5 2.9 6.5 6.5 0 .4 0 .8-.1 1.2-.1.5 0 1.1.3 1.5.3.4.8.7 1.3.8 3.2.5 5.5 3.2 5.5 6.4 0 .6-.1 1.3-.3 1.9-.2.6-.1 1.2.2 1.7.3.5.9.8 1.5.9 1.8.2 3.3 1.3 4.1 2.8v.1c0 .6.4 1 1 1h41.5c.6 0 1-.4 1-1s-.3-.5-.9-.5z"
id="cloud3" />
<path fill="#9DDCA0" d="M289.2 87.4h-9.1c-.3-2.6-1.9-4.7-4-6 0-.3.1-.7.1-1 0-4.4-3.6-8-8-8-2.4 0-4.6 1.1-6.1 2.8-.9-.5-1.9-.8-2.9-.8-3.3 0-6 2.7-6 6 0 .2 0 .4.1.6-2.7 1.1-4.6 3.5-5 6.4h-7.1c-.6 0-1 .4-1 1s.4 1 1 1h8c.6 0 1-.4 1-1 0-2.5 1.5-4.7 3.8-5.6.8-.3 1.3-1.2 1.3-2v-.3-.1c0-2.2 1.8-4 4-4 .7 0 1.3.2 1.9.5.3.2.6.3 1 .3.6 0 1.1-.2 1.5-.7 1.1-1.3 2.8-2.1 4.6-2.1 3.3 0 6 2.7 6 6 0 .2 0 .5-.1.8-.1.8.3 1.6 1 2 1.9 1.1 3.1 3.1 3.1 5.2 0 .6.4 1 1 1h10c.6 0 1-.4 1-1-.1-.5-.5-1-1.1-1z"
id="cloud2" />
<path fill="#9DDCA0" d="M525.7 42.4c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10c0-5.6-4.5-10-10-10zm.8-2l-.8-5-.8 5h1.6zm-8.7 3l-4.1-3 3 4.1c.3-.4.7-.8 1.1-1.1zm-2.9 3.7l-5-1.2 4.4 2.6c.2-.5.4-1 .6-1.4zm6.9-6.1l-2.6-4.4 1.2 5c.5-.2.9-.4 1.4-.6zm20.9 11.4l-5-.8v1.6l5-.8zm-10.5-15.7l-2.6 4.4c.5.2 1 .4 1.4.6l1.2-5zm4.9 11.8l4.4-2.6-5 1.2c.2.4.4.9.6 1.4zm.6-8.2l-4.1 3c.4.3.7.7 1.1 1.1l3-4.1zm-24 24.1l4.1-3c-.4-.3-.7-.7-1.1-1.1l-3 4.1zm19.9-3l4.1 3-3-4.1c-.3.4-.7.7-1.1 1.1zm-4 2.3l2.6 4.4-1.2-5c-.5.3-.9.4-1.4.6zm-15.9-11.3v-.8l-5 .8 5 .8v-.8zm22.8 5.3l5 1.2-4.4-2.6c-.2.4-.4.9-.6 1.4zm-22.1-1.5l-4.4 2.6 5-1.2c-.3-.4-.5-.9-.6-1.4zm4.8 11.9l2.6-4.4c-.5-.2-1-.4-1.4-.6l-1.2 5zm5.7-3.8l.8 5 .8-5h-.8c-.3.1-.5 0-.8 0z"
id="sun_3_" />
<circle id="sun-color" fill-rule="evenodd" clip-rule="evenodd" fill="#F1F9BB" cx="525.7" cy="52.4" r="8" />
<path fill="#9DDCA0" d="M848.3 28.5h-9.1c-.3-2.6-1.9-4.7-4-6 0-.3.1-.7.1-1 0-4.4-3.6-8-8-8-2.4 0-4.6 1.1-6.1 2.8-.9-.5-1.9-.8-2.9-.8-3.3 0-6 2.7-6 6 0 .2 0 .4.1.6-2.7 1.1-4.6 3.5-5 6.4h-7.1c-.6 0-1 .4-1 1s.4 1 1 1h8c.6 0 1-.4 1-1 0-2.5 1.5-4.7 3.8-5.6.8-.3 1.3-1.2 1.3-2v-.3-.1c0-2.2 1.8-4 4-4 .7 0 1.3.2 1.9.5.3.2.6.3 1 .3.6 0 1.1-.2 1.5-.7 1.1-1.3 2.8-2.1 4.6-2.1 3.3 0 6 2.7 6 6 0 .2 0 .5-.1.8-.1.8.3 1.6 1 2 1.9 1.1 3.1 3.1 3.1 5.2 0 .6.4 1 1 1h10c.6 0 1-.4 1-1s-.6-1-1.1-1z"
id="cloud1" />
</g>
<g id="controls">
<path id="wheel-stem" fill="#8AA29A" stroke="#6B847F" stroke-miterlimit="10" d="M35.6 157.7c0-3.9 2.1-7.1 4.6-7.1 2.6 0 4.6 3.2 4.6 7.1v49.6c0 3.9-2.1 7.1-4.6 7.1-2.6 0-4.6-3.2-4.6-7.1v-49.6z" />
<path id="stem" fill="#6B847F" d="M43.7 355.3c0 3.6 2.9 6.2 6.5 6.2h45.1c3.6 0 6.5-2.9 6.5-6.5s-2.9-6.5-6.5-6.5H65.7v-78.2c0-6.3-4.9-11.5-11-11.5s-11 5.1-11 11.5v80.2" />
<g id="top-toggle" stroke="#6B847F" stroke-miterlimit="10">
<path fill="#96D8C2" d="M101.86 177.558l3.55 2.05-7.948 13.77-3.55-2.05z" />
<circle fill="#C68B7B" cx="104.4" cy="177.1" r="4.5" />
</g>
<path fill="#8AA29A" stroke="#6B847F" stroke-miterlimit="10" d="M95.6 190.5c-6.7 0-12.1 5.4-12.1 12.1h24.2c0-6.7-5.4-12.1-12.1-12.1z" />
<path fill="#99C0A2" stroke="#6B847F" stroke-miterlimit="10" d="M13.7 263.6v-55c0-3.3 2.6-5.9 5.9-5.9h90.2c3.3 0 5.9 2.6 5.9 5.9v55c0 3.3-2.6 5.9-5.9 5.9H19.6c-3.2 0-5.9-2.6-5.9-5.9z" />
<path fill="#AACEB0" stroke="#6B847F" stroke-miterlimit="10" d="M19.6 205.8h90.2c3.3 0 5.9 2.6 5.9 5.9v-2.8c0-3.3-2.6-5.9-5.9-5.9H19.6c-3.3 0-5.9 2.6-5.9 5.9v2.8c0-3.2 2.7-5.9 5.9-5.9z" />
<path fill="#8AA29A" stroke="#6B847F" stroke-miterlimit="10" d="M19.6 269.5h90.2c3.3 0 5.9-2.6 5.9-5.9v-1.5c0 3.3-2.6 5.9-5.9 5.9H19.6c-3.3 0-5.9-2.6-5.9-5.9v1.5c0 3.3 2.7 5.9 5.9 5.9z" />
<circle fill="#FFF" stroke="#6B847F" stroke-miterlimit="10" cx="36.4" cy="248.5" r="10.3" />
<path fill="#F1F9BB" stroke="#6B847F" stroke-miterlimit="10" d="M47.1 245.6c-1.6-5.9-7.7-9.3-13.5-7.7-5.9 1.6-9.3 7.7-7.7 13.5 1.6 5.9 7.7 9.3 13.5 7.7 5.8-1.6 9.3-7.6 7.7-13.5zM27.4 251c-1.4-5 1.6-10.1 6.6-11.5 5-1.4 10.1 1.6 11.5 6.6 1.4 5-1.6 10.1-6.6 11.5-5 1.3-10.1-1.7-11.5-6.6z"
/>
<g id="gauge" stroke="#6B847F" stroke-miterlimit="10">
<path fill="#C68B7B" d="M36.1 249l.6-1 4.9 3.5z" />
<path fill="#96D8C2" d="M36.7 248l-.6 1-4.8-3.5z" />
</g>
<circle id="button1" fill="#C68B7B" stroke="#6B847F" stroke-miterlimit="10" cx="80.7" cy="250.2" r="6.1" />
<circle id="button2" fill="#C68B7B" stroke="#6B847F" stroke-miterlimit="10" cx="99" cy="250.2" r="6.1" />
<g id="wheel" stroke="#6B847F" stroke-miterlimit="10">
<path fill="#7B908C" d="M35.65 130.81l8.896-.214.703 28.99-8.9.217z" />
<path fill="#7B908C" d="M40.94 163.95l4.2-7.848 25.57 13.685-4.2 7.847z" />
<path fill="#7B908C" d="M15.232 176.505l-3.9-8 26.064-12.713 3.902 8z" />
<path fill="#C68B7B" d="M40 127c-18 .4-32.2 15.4-31.8 33.4.4 18 15.4 32.2 33.4 31.8 18-.4 32.2-15.4 31.8-33.4-.5-18-15.4-32.2-33.4-31.8zm1.5 59.5c-14.8.4-27.2-11.4-27.5-26.2-.4-14.8 11.4-27.2 26.2-27.5 14.8-.4 27.2 11.4 27.5 26.2.3 14.8-11.4 27.1-26.2 27.5z"
/>
<circle fill="#C68B7B" cx="40.8" cy="159.6" r="10.2" />
<circle fill="#AD937F" cx="40.8" cy="159.6" r="6.2" />
</g>
<g id="side-toggle" stroke="#6B847F" stroke-miterlimit="10">
<path fill="#96D8C2" d="M2.332 231.193l1-1.732L10 233.31l-1 1.732z" />
<path fill="#C68B7B" d="M1.1 232.7c.5.2 1.1 0 1.4-.5l1.6-3.4c.2-.5 0-1.1-.5-1.4-.5-.2-1.1 0-1.4.5l-1.6 3.4c-.2.5 0 1.1.5 1.4z" />
</g>
<path fill="#8AA29A" stroke="#6B847F" stroke-miterlimit="10" d="M7.7 233.6c0 3.2 2.6 5.9 5.9 5.9v-11.8c-3.2 0-5.9 2.6-5.9 5.9z" />
</g>
</svg>
Raw
script.js
var sun = $("#sun_3_"),
cloud1 = $("#cloud1"),
cloud2 = $("#cloud2"),
cloud3 = $("#cloud3"),
gauge = $("#gauge"),
wheel = $("#wheel"),
city = $(".city path"),
tTog = $("#top-toggle"),
sTog = $("#side-toggle"),
bkFar = $("#bk-far"),
bkMid = $("#bk-mid"),
but1 = $("#button1"),
but2 = $("#button2"),
controls = $("#controls path"),
mult = [controls, bkFar, bkMid, city, extras],
body = $("body"),
extras = $(".extras path");
TweenMax.set(wheel, {
transformOrigin: "50% 50%"
});
TweenMax.set(city, {
visibility: "visible"
});
//animation that's repeated for all of the sections
function revolve() {
var tl = new TimelineMax({
repeat1: -1
});
tl.add("begin");
tl.to(sun, 15, {
transformOrigin: "50% 50%",
rotation: 360,
repeat: -1,
ease: Linear.easeNone
}, "begin");
tl.to(cloud1, 10, {
x: -110,
repeat: -1,
yoyo: true,
ease: Linear.easeNone
}, "begin");
tl.to(cloud2, 10, {
x: -70,
repeat: -1,
yoyo: true,
ease: Linear.easeNone
}, "begin");
tl.to(cloud3, 10, {
x: -50,
repeat: -1,
yoyo: true,
ease: Linear.easeNone
}, "begin");
return tl;
}
var repeat = revolve();
//bring it in
function cityIn() {
var tl = new TimelineMax({
paused: true
});
tl.add("in");
tl.from(tTog, 3, {
rotation: -30,
transformOrigin: "50% 100%",
ease: Circ.easeInOut
}, "in");
tl.staggerFrom(city, 0.75, {
y: -50,
scale: 0,
cycle:{
x:[300, 100, 200],
opacity:[0.5, 0.3, 0.2, 0.8],
rotation:[50, 100, 150],
},
transformOrigin: "50% 50%",
ease: Back.easeOut
}, 0.02, "in");
tl.staggerFrom(extras, 2.5, {
x: 300,
scale: 0,
transformOrigin: "50% 50%",
rotation: -30,
ease: Elastic.easeOut
}, 0.1, "in");
tl.from(bkFar, 2.5, {
scaleY: 0,
opacity: 0.7,
transformOrigin: "50% 100%",
ease: Circ.easeOut
}, "in");
tl.from(bkMid, 2.5, {
scaleY: 0,
opacity: 0.7,
transformOrigin: "50% 100%",
ease: Circ.easeOut
}, "in+=1");
tl.from(gauge, 2, {
rotation: 180,
transformOrigin: "50% 50%",
ease: Bounce.easeInOut
}, "in");
tl.from(gauge, 1, {
rotation: 0,
transformOrigin: "50% 50%",
ease: Sine.easeIn
}, "in+=3");
return tl;
}
var fullIn = cityIn();
//side toggle perspective
function perspective() {
var tl = new TimelineMax({
paused: true
});
tl.add("per");
tl.from(sTog, 1, {
rotation: -30,
transformOrigin: "100% 50%",
ease: Circ.easeInOut
}, "per");
tl.to(bkFar, 1, {
y: -30,
scaleY: 0.8,
opacity: 0.4,
transformOrigin: "50% 100%",
ease: Circ.easeInOut
}, "per");
tl.to(bkMid, 1, {
scaleY: 1.6,
transformOrigin: "50% 100%",
ease: Circ.easeInOut
}, "per");
tl.from(gauge, 0.5, {
rotation: 60,
transformOrigin: "50% 50%",
ease: Bounce.easeInOut
}, "per");
tl.from(gauge, 1, {
rotation: 0,
transformOrigin: "50% 50%",
ease: Sine.easeIn
}, "per+=0.5");
return tl;
}
var side = perspective();
//button hue
function hued() {
var ch1 = "hsl(+=110%, +=0%, +=0%)",
tl = new TimelineMax({
paused: true
});
tl.add("hu");
tl.to(mult, 1.25, {
fill: ch1
}, "hu");
tl.from(gauge, 2, {
rotation: "-=70",
transformOrigin: "50% 50%",
ease: Bounce.easeOut
}, "hu");
tl.to(body, 1.25, {
backgroundColor: ch1
}, "hu");
return tl;
}
var hue = hued();
//button saturation
function saturation() {
var ch2 = "hsl(+=5%, +=2%, -=10%)",
tl = new TimelineMax({
paused: true
});
tl.add("sated");
tl.to(body, 1, {
backgroundColor:ch2
}, "sated");
tl.from(gauge, 2, {
rotation: "-=100",
transformOrigin: "50% 50%",
ease: Bounce.easeOut
}, "sated");
tl.to(mult, 2, {
fill:ch2
}, "sated");
return tl;
}
var sat = saturation();
$(document).ready(function() {
Draggable.create(wheel, {
type: "rotation",
bounds: {
minRotation: 0,
maxRotation: 360
},
onDrag: function() {
fullIn.progress((this.rotation)/360 );
fullIn.pause();
}
});
$(tTog).on('click', function(e) {
e.preventDefault();
$(this).toggleClass('inTo');
if ($(this).hasClass('inTo')) {
fullIn.progress(0);
fullIn.restart();
} else {
fullIn.reverse();
}
});
$(sTog).on('click', function(e) {
e.preventDefault();
$(this).toggleClass('s-pers');
if ($(this).hasClass('s-pers')) {
side.restart();
} else {
side.reverse();
}
});
$(but1).on('click', function(e) {
e.preventDefault();
$(this).toggleClass('a-s');
if ($(this).hasClass('a-s')) {
sat.restart();
} else {
sat.reverse();
}
});
$(but2).on('click', function(e) {
e.preventDefault();
$(this).toggleClass('a-h');
if ($(this).hasClass('a-h')) {
hue.restart();
} else {
hue.reverse();
}
});
});
Raw
scripts
<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js"></script>
Raw
style.css
body {
background: #c5ebae;
width: 100vw;
height: 100vh;
font-family: 'Oswald', sans-serif;
color: #8cb594;
}
h2 {
font-weight: normal;
width: 90%;
margin-left: 5%;
text-align: center;
}
svg {
margin: -15px auto 0;
display: table;
width: 80%;
}
#wheel, #top-toggle, #side-toggle, #button1, #button2 {
cursor: pointer;
}
.city path {
visibility: hidden;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment