"puzzle"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/biokillos/pen/jWBqNa?limit=all&page=11&q=comment" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">html, body { height: 100%; } body { background-color: lightyellow; overflow: hidden; } svg { width: 100%; height: 100%; } </style></head><body> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"> <defs> <clipPath id='piece1'> <path fill="#D6694F" d="M631.7 224.1c.4-.9.7-1.8 1-2.7-5.8-4.8-9.5-12-9.5-20.1 0-14.4 11.7-26.1 26.1-26.1 14.4 0 26.1 11.7 26.1 26.1 0 8.1-3.7 15.3-9.4 20.1.3.9.6 1.8 1 2.7 22.2 1 44.4 4 66.3 8.9 4.9-21.9 7.8-44.1 8.9-66.4.9-.4 1.8-.7 2.7-1 4.8 5.8 12 9.5 20.1 9.5 14.4 0 26.1-11.7 26.1-26.1 0-14.4-11.7-26.1-26.1-26.1-8.1 0-15.3 3.7-20.1 9.5-.9-.3-1.8-.6-2.7-1-1-22.3-4-44.5-8.9-66.4-21.9 4.9-44 7.8-66.3 8.9-.4.9-.7 1.8-1 2.7 5.8 4.8 9.4 12 9.4 20.1 0 14.4-11.7 26.1-26.1 26.1-14.4 0-26.1-11.7-26.1-26.1 0-8.1 3.7-15.3 9.5-20.1-.3-.9-.6-1.8-1-2.7-22.2-1-44.4-4-66.3-8.9v.1c-4.9 21.9-7.8 44.1-8.8 66.3-.9.4-1.8.7-2.7 1-4.8-5.8-12-9.5-20.1-9.5-14.4 0-26.1 11.7-26.1 26.1 0 14.4 11.7 26.1 26.1 26.1 8.1 0 15.3-3.7 20.1-9.5.9.3 1.8.6 2.7 1 1 22.3 4 44.5 8.8 66.3v.1c21.9-5 44.1-7.9 66.3-8.9z"/> </clipPath> <clipPath id='piece2'> <path id="piece2" fill="#F2F0E9" d="M463.8 392.2c.4-.9.7-1.8 1-2.7-5.8-4.8-9.4-12-9.4-20.1 0-14.4 11.7-26.1 26.1-26.1 14.4 0 26.1 11.7 26.1 26.1 0 8.1-3.7 15.3-9.5 20.1.3.9.6 1.8 1 2.7 22.3 1 44.4 4 66.3 8.9 4.9-21.9 7.8-44.1 8.9-66.4.9-.4 1.8-.7 2.7-1 4.8 5.8 12 9.5 20.1 9.5 14.4 0 26.1-11.7 26.1-26.1 0-14.4-11.7-26.1-26.1-26.1-8.1 0-15.3 3.7-20.1 9.5-.9-.3-1.8-.6-2.7-1-1-22.3-4-44.5-8.9-66.4-21.9 4.9-44 7.8-66.3 8.9-.4.9-.7 1.8-1 2.7 5.8 4.8 9.5 12 9.5 20.1 0 14.4-11.7 26.1-26.1 26.1-14.4 0-26.1-11.7-26.1-26.1 0-8.1 3.7-15.3 9.4-20.1-.3-.9-.6-1.8-1-2.7-22.2-1-44.4-4-66.3-8.9v.1c-4.9 21.9-7.8 44.1-8.8 66.3-.9.4-1.8.7-2.7 1-4.8-5.8-12-9.5-20.1-9.5-14.4 0-26.1 11.7-26.1 26.1 0 14.4 11.7 26.1 26.1 26.1 8.1 0 15.3-3.7 20.1-9.5.9.3 1.8.6 2.7 1 1 22.3 4 44.5 8.8 66.3v.1c21.9-5 44.1-7.9 66.3-8.9z"/> </clipPath> <clipPath id='piece3'> <path id="piece3" fill="#E4BE69" d="M556.6 166.5c-.9-.4-1.8-.7-2.7-1-4.8 5.8-12 9.5-20.1 9.5-14.4 0-26.1-11.7-26.1-26.1s11.7-26.1 26.1-26.1c8.1 0 15.3 3.7 20.1 9.5.9-.3 1.8-.6 2.7-1 1-22.3 4-44.5 8.8-66.4-21.9-4.9-44-7.8-66.3-8.9-.4-.9-.7-1.8-1-2.7 5.8-4.8 9.4-12 9.4-20.1 0-14.4-11.7-26.1-26.1-26.1-14.4 0-26.1 11.7-26.1 26.1 0 8.1 3.7 15.3 9.4 20.1-.3.9-.6 1.8-1 2.7-22.3 1-44.4 4-66.3 8.9 4.9 21.9 7.8 44.1 8.8 66.4.9.4 1.8.7 2.7 1 4.8-5.8 12-9.5 20.1-9.5 14.4 0 26.1 11.7 26.1 26.1s-11.6 26.1-26 26.1c-8.1 0-15.3-3.7-20.1-9.5-.9.3-1.8.6-2.7 1-1 22.3-4 44.5-8.8 66.4h.1c21.8 4.9 44 7.8 66.2 8.9.4.9.7 1.8 1 2.7-5.8 4.8-9.5 12-9.5 20.1 0 14.4 11.7 26.1 26.1 26.1s26.1-11.7 26.1-26.1c0-8.1-3.7-15.3-9.4-20.1.3-.9.6-1.8 1-2.7 22.2-1 44.4-4 66.2-8.9h.1c-4.9-21.9-7.8-44.1-8.8-66.4z"/> </clipPath> <clipPath id='piece4'> <path id="piece4" fill="#59402F" d="M724.5 334.6c-.9-.4-1.8-.7-2.7-1-4.8 5.8-12 9.5-20.1 9.5-14.4 0-26.1-11.7-26.1-26.1 0-14.4 11.7-26.1 26.1-26.1 8.1 0 15.3 3.7 20.1 9.5.9-.3 1.8-.6 2.7-1 1-22.3 4-44.5 8.9-66.4-21.9-4.9-44-7.8-66.3-8.9-.4-.9-.7-1.8-1-2.7 5.8-4.8 9.4-12 9.4-20.1 0-14.4-11.7-26.1-26.1-26.1-14.4 0-26.1 11.7-26.1 26.1 0 8.1 3.7 15.3 9.4 20.1-.3.9-.6 1.8-1 2.7-22.3 1-44.4 4-66.3 8.9 4.9 21.9 7.8 44.1 8.8 66.4.9.4 1.8.7 2.7 1 4.8-5.8 12-9.5 20.1-9.5 14.4 0 26.1 11.7 26.1 26.1 0 14.4-11.7 26.1-26.1 26.1-8.1 0-15.3-3.7-20.1-9.5-.9.3-1.8.6-2.7 1-1 22.3-4 44.5-8.8 66.4h.1c21.8 4.9 44 7.8 66.2 8.9.4.9.7 1.8 1 2.7-5.8 4.8-9.5 12-9.5 20.1 0 14.4 11.7 26.1 26.1 26.1 14.4 0 26.1-11.7 26.1-26.1 0-8.1-3.7-15.3-9.4-20.1.3-.9.6-1.8 1-2.7 22.2-1 44.4-4 66.2-8.9h.1c-4.9-21.9-7.8-44.1-8.8-66.4z"/> </clipPath> <clipPath id='piece5'> <path id="piece5" fill="#59402F" d="M295.9 224.1c.4-.9.7-1.8 1-2.7-5.8-4.8-9.4-12-9.4-20.1 0-14.4 11.7-26.1 26.1-26.1 14.4 0 26.1 11.7 26.1 26.1 0 8.1-3.7 15.3-9.4 20.1.3.9.6 1.8 1 2.7 22.2 1 44.4 4 66.3 8.9 4.9-21.9 7.8-44.1 8.9-66.4.9-.4 1.8-.7 2.7-1 4.8 5.8 12 9.5 20.1 9.5 14.4 0 26.1-11.7 26.1-26.1 0-14.4-11.7-26.1-26.1-26.1-8.1 0-15.3 3.7-20.1 9.5-.9-.3-1.8-.6-2.7-1-1-22.3-4-44.5-8.9-66.4-21.9 4.9-44 7.8-66.3 8.9-.4.9-.7 1.8-1 2.7 5.8 4.8 9.4 12 9.4 20.1 0 14.4-11.7 26.1-26.1 26.1-14.4 0-26.1-11.7-26.1-26.1 0-8.1 3.7-15.3 9.4-20.1-.3-.9-.6-1.8-1-2.7-22.2-1-44.4-4-66.3-8.9v.1c-4.9 21.9-7.8 44.1-8.8 66.3-.9.4-1.8.7-2.7 1-4.8-5.8-12-9.5-20.1-9.5-14.4 0-26.1 11.7-26.1 26.1 0 14.4 11.7 26.1 26.1 26.1 8.1 0 15.3-3.7 20.1-9.5.9.3 1.8.6 2.7 1 1 22.3 4 44.5 8.8 66.3v.1c21.9-5 44.1-7.9 66.3-8.9z"/> </clipPath> <clipPath id='piece6'> <path id="piece6" fill="#D6694F" d="M128 392.2c.4-.9.7-1.8 1-2.7-5.8-4.8-9.4-12-9.4-20.1 0-14.4 11.7-26.1 26.1-26.1 14.4 0 26.1 11.7 26.1 26.1 0 8.1-3.7 15.3-9.4 20.1.3.9.6 1.8 1 2.7 22.2 1 44.4 4 66.3 8.9 4.9-21.9 7.8-44.1 8.9-66.4.9-.4 1.8-.7 2.7-1 4.8 5.8 12 9.5 20.1 9.5 14.4 0 26.1-11.7 26.1-26.1 0-14.4-11.7-26.1-26.1-26.1-8.1 0-15.3 3.7-20.1 9.5-.9-.3-1.8-.6-2.7-1-1-22.3-4-44.5-8.9-66.4-21.9 4.9-44 7.8-66.3 8.9-.4.9-.7 1.8-1 2.7 5.8 4.8 9.4 12 9.4 20.1 0 14.4-11.7 26.1-26.1 26.1-14.4 0-26.1-11.7-26.1-26.1 0-8.1 3.7-15.3 9.4-20.1-.3-.9-.6-1.8-1-2.7-22.2-1-44.4-4-66.3-8.9v.1c-4.9 21.9-7.8 44.1-8.8 66.3-.9.4-1.8.7-2.7 1-4.8-5.8-12-9.5-20.1-9.5C15.7 290.9 4 302.5 4 317c0 14.4 11.7 26.1 26.1 26.1 8.1 0 15.3-3.7 20.1-9.5.9.3 1.8.6 2.7 1 1 22.3 4 44.5 8.8 66.3v.1c21.9-4.9 44.1-7.8 66.3-8.8z"/> </clipPath> <clipPath id='piece7'> <path id="piece7" fill="#F2F0E9" d="M220.8 166.5c-.9-.4-1.8-.7-2.7-1-4.8 5.8-12 9.5-20.1 9.5-14.4 0-26.1-11.7-26.1-26.1s11.7-26.1 26.1-26.1c8.1 0 15.3 3.7 20.1 9.5.9-.3 1.8-.6 2.7-1 1-22.3 4-44.5 8.8-66.4-21.9-4.9-44-7.8-66.3-8.9-.4-.9-.7-1.8-1-2.7 5.8-4.8 9.4-12 9.4-20.1 0-14.4-11.7-26.1-26.1-26.1-14.4 0-26.1 11.7-26.1 26.1 0 8.1 3.7 15.3 9.4 20.1-.3.9-.6 1.8-1 2.7-22.3 1-44.4 4-66.3 8.9 4.9 21.9 7.8 44.1 8.8 66.4.9.4 1.8.7 2.7 1 4.8-5.8 12-9.5 20.1-9.5 14.4 0 26.1 11.7 26.1 26.1s-11.6 26.1-26 26.1c-8.1 0-15.3-3.7-20.1-9.5-.9.3-1.8.6-2.7 1-1 22.3-4 44.5-8.8 66.4h.1c21.8 4.9 44 7.8 66.2 8.9.4.9.7 1.8 1 2.7-5.8 4.8-9.4 12-9.4 20.1 0 14.4 11.7 26.1 26.1 26.1 14.4 0 26.1-11.7 26.1-26.1 0-8.1-3.7-15.3-9.4-20.1.3-.9.6-1.8 1-2.7 22.2-1 44.4-4 66.2-8.9h.1c-5-21.9-7.9-44.1-8.9-66.4z"/> </clipPath> <clipPath id='piece8'> <path id="piece8" fill="#E4BE69" d="M388.7 334.6c-.9-.4-1.8-.7-2.7-1-4.8 5.8-12 9.5-20.1 9.5-14.4 0-26.1-11.7-26.1-26.1 0-14.4 11.7-26.1 26.1-26.1 8.1 0 15.3 3.7 20.1 9.5.9-.3 1.8-.6 2.7-1 1-22.3 4-44.5 8.9-66.4-21.9-4.9-44-7.8-66.3-8.9-.4-.9-.7-1.8-1-2.7 5.8-4.8 9.4-12 9.4-20.1 0-14.4-11.7-26.1-26.1-26.1-14.4 0-26.1 11.7-26.1 26.1 0 8.1 3.7 15.3 9.4 20.1-.3.9-.6 1.8-1 2.7-22.3 1-44.4 4-66.3 8.9 4.9 21.9 7.8 44.1 8.8 66.4.9.4 1.8.7 2.7 1 4.8-5.8 12-9.5 20.1-9.5 14.4 0 26.1 11.7 26.1 26.1 0 14.4-11.7 26.1-26.1 26.1-8.1 0-15.3-3.7-20.1-9.5-.9.3-1.8.6-2.7 1-1 22.3-4 44.5-8.8 66.4h.1c21.8 4.9 44 7.8 66.2 8.9.4.9.7 1.8 1 2.7-5.8 4.8-9.4 12-9.4 20.1 0 14.4 11.7 26.1 26.1 26.1 14.4 0 26.1-11.7 26.1-26.1 0-8.1-3.7-15.3-9.4-20.1.3-.9.6-1.8 1-2.7 22.2-1 44.4-4 66.2-8.9h.1c-5-21.9-7.9-44.1-8.9-66.4z"/> </clipPath> <clipPath id='piece9'> <path id="piece9" fill="#E4BE69" d="M631.7 560.3c.4-.9.7-1.8 1-2.7-5.8-4.8-9.5-12-9.5-20.1 0-14.4 11.7-26.1 26.1-26.1 14.4 0 26.1 11.7 26.1 26.1 0 8.1-3.7 15.3-9.4 20.1.3.9.6 1.8 1 2.7 22.2 1 44.4 4 66.3 8.9 4.9-21.9 7.8-44.1 8.9-66.4.9-.4 1.8-.7 2.7-1 4.8 5.8 12 9.5 20.1 9.5 14.4 0 26.1-11.7 26.1-26.1 0-14.4-11.7-26.1-26.1-26.1-8.1 0-15.3 3.7-20.1 9.5-.9-.3-1.8-.6-2.7-1-1-22.3-4-44.5-8.9-66.4-21.9 4.9-44 7.8-66.3 8.9-.4.9-.7 1.8-1 2.7 5.8 4.8 9.4 12 9.4 20.1 0 14.4-11.7 26.1-26.1 26.1-14.4 0-26.1-11.7-26.1-26.1 0-8.1 3.7-15.3 9.5-20.1-.3-.9-.6-1.8-1-2.7-22.2-1-44.4-4-66.3-8.9v.1c-4.9 21.9-7.8 44.1-8.8 66.3-.9.4-1.8.7-2.7 1-4.8-5.8-12-9.5-20.1-9.5-14.4 0-26.1 11.7-26.1 26.1 0 14.4 11.7 26.1 26.1 26.1 8.1 0 15.3-3.7 20.1-9.5.9.3 1.8.6 2.7 1 1 22.3 4 44.5 8.8 66.3v.1c21.9-5 44.1-7.9 66.3-8.9z"/> </clipPath> <clipPath id='piece10'> <path id="piece10" fill="#59402F" d="M463.8 728.4c.4-.9.7-1.8 1-2.7-5.8-4.8-9.4-12-9.4-20.1 0-14.4 11.7-26.1 26.1-26.1 14.4 0 26.1 11.7 26.1 26.1 0 8.1-3.7 15.3-9.5 20.1.3.9.6 1.8 1 2.7 22.3 1 44.4 4 66.3 8.9 4.9-21.9 7.8-44.1 8.9-66.4.9-.4 1.8-.7 2.7-1 4.8 5.8 12 9.5 20.1 9.5 14.4 0 26.1-11.7 26.1-26.1 0-14.4-11.7-26.1-26.1-26.1-8.1 0-15.3 3.7-20.1 9.5-.9-.3-1.8-.6-2.7-1-1-22.3-4-44.5-8.9-66.4-21.9 4.9-44 7.8-66.3 8.9-.4.9-.7 1.8-1 2.7 5.8 4.8 9.5 12 9.5 20.1 0 14.4-11.7 26.1-26.1 26.1-14.4 0-26.1-11.7-26.1-26.1 0-8.1 3.7-15.3 9.4-20.1-.3-.9-.6-1.8-1-2.7-22.2-1-44.4-4-66.3-8.9v.1c-4.9 21.9-7.8 44.1-8.8 66.3-.9.4-1.8.7-2.7 1-4.8-5.8-12-9.5-20.1-9.5-14.4 0-26.1 11.7-26.1 26.1s11.7 26.1 26.1 26.1c8.1 0 15.3-3.7 20.1-9.5.9.3 1.8.6 2.7 1 1 22.3 4 44.5 8.8 66.3v.1c21.9-5 44.1-7.9 66.3-8.9z"/> </clipPath> <clipPath id='piece11'> <path id="piece11" fill="#D6694F" d="M556.6 502.7c-.9-.4-1.8-.7-2.7-1-4.8 5.8-12 9.5-20.1 9.5-14.4 0-26.1-11.7-26.1-26.1 0-14.4 11.7-26.1 26.1-26.1 8.1 0 15.3 3.7 20.1 9.5.9-.3 1.8-.6 2.7-1 1-22.3 4-44.5 8.8-66.4-21.9-4.9-44-7.8-66.3-8.9-.4-.9-.7-1.8-1-2.7 5.8-4.8 9.4-12 9.4-20.1 0-14.4-11.7-26.1-26.1-26.1-14.4 0-26.1 11.7-26.1 26.1 0 8.1 3.7 15.3 9.4 20.1-.3.9-.6 1.8-1 2.7-22.3 1-44.4 4-66.3 8.9 4.9 21.9 7.8 44.1 8.8 66.4.9.4 1.8.7 2.7 1 4.8-5.8 12-9.5 20.1-9.5 14.4 0 26.1 11.7 26.1 26.1 0 14.4-11.7 26.1-26.1 26.1-8.1 0-15.3-3.7-20.1-9.5-.9.3-1.8.6-2.7 1-1 22.3-4 44.5-8.8 66.4h.1c21.8 4.9 44 7.8 66.2 8.9.4.9.7 1.8 1 2.7-5.8 4.8-9.5 12-9.5 20.1 0 14.4 11.7 26.1 26.1 26.1s26.1-11.7 26.1-26.1c0-8.1-3.7-15.3-9.4-20.1.3-.9.6-1.8 1-2.7 22.2-1 44.4-4 66.2-8.9h.1c-4.8-21.9-7.7-44.1-8.7-66.4z"/> </clipPath> <clipPath id='piece12'> <path id="piece12" fill="#F2F0E9" d="M724.5 670.8c-.9-.4-1.8-.7-2.7-1-4.8 5.8-12 9.5-20.1 9.5-14.4 0-26.1-11.7-26.1-26.1 0-14.4 11.7-26.1 26.1-26.1 8.1 0 15.3 3.7 20.1 9.5.9-.3 1.8-.6 2.7-1 1-22.3 4-44.5 8.9-66.4-21.9-4.9-44-7.8-66.3-8.9-.4-.9-.7-1.8-1-2.7 5.8-4.8 9.4-12 9.4-20.1 0-14.4-11.7-26.1-26.1-26.1-14.4 0-26.1 11.7-26.1 26.1 0 8.1 3.7 15.3 9.4 20.1-.3.9-.6 1.8-1 2.7-22.3 1-44.4 4-66.3 8.9 4.9 21.9 7.8 44.1 8.8 66.4.9.4 1.8.7 2.7 1 4.8-5.8 12-9.5 20.1-9.5 14.4 0 26.1 11.7 26.1 26.1 0 14.4-11.7 26.1-26.1 26.1-8.1 0-15.3-3.7-20.1-9.5-.9.3-1.8.6-2.7 1-1 22.3-4 44.5-8.8 66.4h.1c21.8 4.9 44 7.8 66.2 8.9.4.9.7 1.8 1 2.7-5.8 4.8-9.5 12-9.5 20.1 0 14.4 11.7 26.1 26.1 26.1 14.4 0 26.1-11.7 26.1-26.1 0-8.1-3.7-15.3-9.4-20.1.3-.9.6-1.8 1-2.7 22.2-1 44.4-4 66.2-8.9h.1c-4.9-21.9-7.8-44.1-8.8-66.4z"/> </clipPath> <clipPath id='piece13'> <path id="piece13" fill="#F2F0E9" d="M295.9 560.3c.4-.9.7-1.8 1-2.7-5.8-4.8-9.4-12-9.4-20.1 0-14.4 11.7-26.1 26.1-26.1 14.4 0 26.1 11.7 26.1 26.1 0 8.1-3.7 15.3-9.4 20.1.3.9.6 1.8 1 2.7 22.2 1 44.4 4 66.3 8.9 4.9-21.9 7.8-44.1 8.9-66.4.9-.4 1.8-.7 2.7-1 4.8 5.8 12 9.5 20.1 9.5 14.4 0 26.1-11.7 26.1-26.1 0-14.4-11.7-26.1-26.1-26.1-8.1 0-15.3 3.7-20.1 9.5-.9-.3-1.8-.6-2.7-1-1-22.3-4-44.5-8.9-66.4-21.9 4.9-44 7.8-66.3 8.9-.4.9-.7 1.8-1 2.7 5.8 4.8 9.4 12 9.4 20.1 0 14.4-11.7 26.1-26.1 26.1-14.4 0-26.1-11.7-26.1-26.1 0-8.1 3.7-15.3 9.4-20.1-.3-.9-.6-1.8-1-2.7-22.2-1-44.4-4-66.3-8.9v.1c-4.9 21.9-7.8 44.1-8.8 66.3-.9.4-1.8.7-2.7 1-4.8-5.8-12-9.5-20.1-9.5-14.4 0-26.1 11.7-26.1 26.1 0 14.4 11.7 26.1 26.1 26.1 8.1 0 15.3-3.7 20.1-9.5.9.3 1.8.6 2.7 1 1 22.3 4 44.5 8.8 66.3v.1c21.9-5 44.1-7.9 66.3-8.9z"/> </clipPath> <clipPath id='piece14'> <path id="piece14" fill="#E4BE69" d="M128 728.4c.4-.9.7-1.8 1-2.7-5.8-4.8-9.4-12-9.4-20.1 0-14.4 11.7-26.1 26.1-26.1 14.4 0 26.1 11.7 26.1 26.1 0 8.1-3.7 15.3-9.4 20.1.3.9.6 1.8 1 2.7 22.2 1 44.4 4 66.3 8.9 4.9-21.9 7.8-44.1 8.9-66.4.9-.4 1.8-.7 2.7-1 4.8 5.8 12 9.5 20.1 9.5 14.4 0 26.1-11.7 26.1-26.1 0-14.4-11.7-26.1-26.1-26.1-8.1 0-15.3 3.7-20.1 9.5-.9-.3-1.8-.6-2.7-1-1-22.3-4-44.5-8.9-66.4-21.9 4.9-44 7.8-66.3 8.9-.4.9-.7 1.8-1 2.7 5.8 4.8 9.4 12 9.4 20.1 0 14.4-11.7 26.1-26.1 26.1-14.4 0-26.1-11.7-26.1-26.1 0-8.1 3.7-15.3 9.4-20.1-.3-.9-.6-1.8-1-2.7-22.2-1-44.4-4-66.3-8.9v.1c-4.9 21.9-7.8 44.1-8.8 66.3-.9.4-1.8.7-2.7 1-4.8-5.8-12-9.5-20.1-9.5-14.4-.1-26.1 11.5-26.1 26s11.7 26.1 26.1 26.1c8.1 0 15.3-3.7 20.1-9.5.9.3 1.8.6 2.7 1 1 22.3 4 44.5 8.8 66.3v.1c21.9-4.9 44.1-7.8 66.3-8.8z"/> </clipPath> <clipPath id='piece15'> <path id="piece15" fill="#59402F" d="M220.8 502.7c-.9-.4-1.8-.7-2.7-1-4.8 5.8-12 9.5-20.1 9.5-14.4 0-26.1-11.7-26.1-26.1 0-14.4 11.7-26.1 26.1-26.1 8.1 0 15.3 3.7 20.1 9.5.9-.3 1.8-.6 2.7-1 1-22.3 4-44.5 8.8-66.4-21.9-4.9-44-7.8-66.3-8.9-.4-.9-.7-1.8-1-2.7 5.8-4.8 9.4-12 9.4-20.1 0-14.4-11.7-26.1-26.1-26.1-14.4 0-26.1 11.7-26.1 26.1 0 8.1 3.7 15.3 9.4 20.1-.3.9-.6 1.8-1 2.7-22.3 1-44.4 4-66.3 8.9 4.9 21.9 7.8 44.1 8.8 66.4.9.4 1.8.7 2.7 1 4.8-5.8 12-9.5 20.1-9.5 14.4 0 26.1 11.7 26.1 26.1 0 14.4-11.7 26.1-26.1 26.1-8.1 0-15.3-3.7-20.1-9.5-.9.3-1.8.6-2.7 1-1 22.3-4 44.5-8.8 66.4h.1c21.8 4.9 44 7.8 66.2 8.9.4.9.7 1.8 1 2.7-5.8 4.8-9.4 12-9.4 20.1 0 14.4 11.7 26.1 26.1 26.1 14.4 0 26.1-11.7 26.1-26.1 0-8.1-3.7-15.3-9.4-20.1.3-.9.6-1.8 1-2.7 22.2-1 44.4-4 66.2-8.9h.1c-4.9-21.9-7.8-44.1-8.8-66.4z"/> </clipPath> <clipPath id="piece16"> <path id="piece16" fill="#D6694F" d="M388.7 670.8c-.9-.4-1.8-.7-2.7-1-4.8 5.8-12 9.5-20.1 9.5-14.4 0-26.1-11.7-26.1-26.1 0-14.4 11.7-26.1 26.1-26.1 8.1 0 15.3 3.7 20.1 9.5.9-.3 1.8-.6 2.7-1 1-22.3 4-44.5 8.9-66.4-21.9-4.9-44-7.8-66.3-8.9-.4-.9-.7-1.8-1-2.7 5.8-4.8 9.4-12 9.4-20.1 0-14.4-11.7-26.1-26.1-26.1-14.4 0-26.1 11.7-26.1 26.1 0 8.1 3.7 15.3 9.4 20.1-.3.9-.6 1.8-1 2.7-22.3 1-44.4 4-66.3 8.9 4.9 21.9 7.8 44.1 8.8 66.4.9.4 1.8.7 2.7 1 4.8-5.8 12-9.5 20.1-9.5 14.4 0 26.1 11.7 26.1 26.1 0 14.4-11.7 26.1-26.1 26.1-8.1 0-15.3-3.7-20.1-9.5-.9.3-1.8.6-2.7 1-1 22.3-4 44.5-8.8 66.4h.1c21.8 4.9 44 7.8 66.2 8.9.4.9.7 1.8 1 2.7-5.8 4.8-9.4 12-9.4 20.1 0 14.4 11.7 26.1 26.1 26.1 14.4 0 26.1-11.7 26.1-26.1 0-8.1-3.7-15.3-9.4-20.1.3-.9.6-1.8 1-2.7 22.2-1 44.4-4 66.2-8.9h.1c-5-21.9-7.9-44.1-8.9-66.4z"/> </clipPath> </defs> <symbol id='balloon'> <g id='balloon-innards' transform='matrix(1, 0, 0, 1, 0, 0)'> <path fill="#56473E" d="M375.3 350.3h1.2v19.8h-1.2z"/> <path fill="#56473E" d="M409.2 350.3h1.2v20.1h-1.2z"/> <path fill="#8C4130" d="M419.1 393.2c0 4.3-4.5 7.7-10 7.7h-32.9c-5.5 0-10-3.5-10-7.7V377c0-4.3 4.5-7.7 10-7.7 0 0 6.5 2.6 17.9 2.6 11.4 0 15-2.6 15-2.6 5.5 0 10 3.5 10 7.7v16.2z"/> <path fill="#733329" d="M396.1 390.5c-8.4 3.1-20.2 6-29.2 5.3 1.4 3 5 5.2 9.4 5.2h32.9c5.5 0 10-3.5 10-7.7v-15.5c-2.4 2.2-10.2 7.9-23.1 12.7z"/> <path fill="#56473E" d="M366.3 377.8s4.2 2.6 8.5-.4c0 0 6.4 4.3 11.3-.1 0 0 7.3 4.4 12.4-.1 0 0 5.4 4.1 10.9.2 0 0 4 4.5 9.9.1v1.8c-5.3 4.4-9.9-.1-9.9-.1-5.4 3.8-10.9-.2-10.9-.2-5.1 4.5-12.4.1-12.4.1-4.8 4.4-11.3.1-11.3.1-4.3 2.9-8.5.4-8.5.4v-1.8z"/> <g fill="#DA8D5B"> <path d="M375.7 380c0 .1 0 .1 0 0 0 .9-.3 1.5-.8 1.5-.4 0-.8-.6-.8-1.4v-.2c-1.8.6-3.2 3.7-3.2 5.6 0 2.2 1.7 4 3.8 4s3.8-1.8 3.8-4c.1-1.8-1.1-4.7-2.8-5.5z"/> <path d="M375 381.5c.4 0 .8-.6.8-1.4v-.1c0-.7-.4-1.3-.8-1.3s-.7.5-.8 1.2v.2c0 .8.4 1.4.8 1.4z"/> </g> <g fill="#DA8D5B"> <path d="M386.9 380c0 .1 0 .1 0 0 0 .9-.3 1.5-.8 1.5-.4 0-.8-.6-.8-1.4v-.2c-1.8.6-3.2 3.7-3.2 5.6 0 2.2 1.7 4 3.8 4 2.1 0 3.8-1.8 3.8-4 .1-1.8-1.1-4.7-2.8-5.5z"/> <path d="M386.1 381.5c.4 0 .8-.6.8-1.4v-.1c0-.7-.4-1.3-.8-1.3s-.7.5-.8 1.2v.2c.1.8.4 1.4.8 1.4z"/> </g> <g fill="#DA8D5B"> <path d="M399.3 380c0 .1 0 .1 0 0 0 .9-.3 1.5-.8 1.5-.4 0-.8-.6-.8-1.4v-.2c-1.8.6-3.2 3.7-3.2 5.6 0 2.2 1.7 4 3.8 4 2.1 0 3.8-1.8 3.8-4 .1-1.8-1.1-4.7-2.8-5.5z"/> <path d="M398.5 381.5c.4 0 .8-.6.8-1.4v-.1c0-.7-.4-1.3-.8-1.3s-.7.5-.8 1.2v.2c.1.8.4 1.4.8 1.4z"/> </g> <g fill="#DA8D5B"> <path d="M410.2 380c0 .1 0 .1 0 0 0 .9-.3 1.5-.8 1.5-.4 0-.8-.6-.8-1.4v-.2c-1.8.6-3.2 3.7-3.2 5.6 0 2.2 1.7 4 3.8 4 2.1 0 3.8-1.8 3.8-4 .1-1.8-1.1-4.7-2.8-5.5z"/> <path d="M409.4 381.5c.4 0 .8-.6.8-1.4v-.1c0-.7-.4-1.3-.8-1.3s-.7.5-.8 1.2v.2c.1.8.4 1.4.8 1.4z"/> </g> <path fill="#C85D54" d="M374.7 306.1s-18.4-34.7-47.2-83.6c-.2-.4-.5-.8-.7-1.3-11.5-19.6-20.9-39.7-27-59.5-6.1-19.7-9-38.9-7.8-56.9.6-9.6 2.4-18.8 5.6-27.5 3.6-9.9 8.4-17.4 13.7-23.1-3.9.5-26.3 5-41.3 50.1-.1.2-.1.3-.2.5-6.3 19.4-6.4 38.7-2.3 56.9 5.2 22.9 17.2 44 31.7 60.7 3.3 3.9 6.8 7.5 10.4 10.9 31.4 29.8 59.5 76.6 59.5 76.6s4.9.3 7.3-2.6c-.9-.5-1.7-1.2-1.7-1.2z"/> <path fill="#C85D54" d="M514.3 104.9c-.1-.2-.1-.3-.2-.5-15-45.1-37.3-49.6-41.3-50.1 5.3 5.7 10.1 13.2 13.7 23.1 3.1 8.7 4.9 17.9 5.6 27.5 1.2 18-1.7 37.2-7.8 56.9-6.1 19.7-15.4 39.9-27 59.5-.3.4-.5.8-.7 1.3-28.8 48.9-47.2 83.6-47.2 83.6s-.8.7-1.7 1.3c2.3 2.9 7.3 2.6 7.3 2.6s28.1-46.9 59.5-76.6c3.6-3.4 7-7 10.4-10.9 14.5-16.8 26.5-37.8 31.7-60.7 4.1-18.3 4-37.6-2.3-57z"/> <path fill="#F2F0E9" d="M291.8 107.8c-.1 2.6-.1 5.2-.1 7.8l.1 3.9c.1 2.7.3 5.3.6 8l.5 3.9c.3 2.4.7 4.9 1.1 7.3l.4 2.2.3 1.4c.1.6.2 1.1.3 1.7l.9 3.9c1.1 4.6 2.3 9.1 3.7 13.8 6.1 19.7 15.4 39.9 27 59.5.2.4.5.8.7 1.3 28.8 48.9 47.2 83.6 47.2 83.6s.8.7 1.7 1.3c1.5.8 3.6 1.3 4.4-1.9-.7-.5-1.1-1-1.1-1s-14.5-46.2-28.8-82c-1.2-3.1-2.5-6.1-3.7-9-6.6-15.4-13.4-32.7-18.1-51.8-.2-.8-.4-1.7-.6-2.5l-.9-3.9c-.1-.6-.3-1.3-.4-1.9l-.8-3.9c-.4-2.2-.8-4.5-1.1-6.8h-.1v-1.6c-.3-1.8-.5-3.7-.7-5.5v1.6l-.2-3.9c-.3-2.6-.5-5.2-.6-7.9l-.2-3.9c-.1-2.4-.1-4.8-.1-7.2l.1-3.9c0-1.8.1-3.6.2-5.4.6-9.9 2-20.2 4.5-30.8 4.4-18.8 11.8-29.8 19.7-36.2-3.8-.7-21.7.8-36.3 16.4-5.3 5.7-10.1 13.2-13.7 23.1-3.1 8.7-4.9 17.9-5.6 27.5"/> <path fill="#F2F0E9" d="M492.8 104.9c-.6-9.6-2.4-18.8-5.6-27.5-3.6-9.9-8.4-17.4-13.7-23.1-14.6-15.6-32.5-17.1-36.3-16.4 7.9 6.4 15.3 17.4 19.7 36.2 2.5 10.6 3.9 20.9 4.5 30.8 1.2 20.5-1.3 39.5-5.6 56.9-4.7 19.1-11.6 36.3-18.1 51.8-1.2 2.9-2.5 5.9-3.7 9-14.3 35.7-28.8 82-28.8 82s-.4.4-1.1 1c.7 3.2 2.8 2.8 4.4 1.9 1-.5 1.7-1.3 1.7-1.3s18.4-34.7 47.2-83.6c.2-.4.5-.8.7-1.3 11.5-19.6 20.9-39.7 27-59.5 6-19.7 8.9-38.9 7.7-56.9z"/> <path fill="#C85D54" d="M385.7 302.8c-2.4-28.7-9.1-54-15.8-80.3-4.8-19.1-9.6-38.8-12.7-60.7-2.4-17.3-3.7-36-3.1-56.9 0-1.1.1-2.2.1-3.3 1.8-46.9 14.6-64.6 25.8-71-4.9-1.2-19.5-3.3-32.6 7.2-7.9 6.4-15.3 17.4-19.7 36.2-2.5 10.6-3.9 20.9-4.5 30.8-1.2 20.5 1.3 39.5 5.6 56.9 4.7 19.1 11.6 36.3 18.1 51.8 1.2 2.9 2.5 5.9 3.7 9 14.3 35.7 28.8 82 28.8 82s.4.4 1.1 1c1.8 1.4 5.1 3.3 6.6-.2-.7-1.2-1.4-2.5-1.4-2.5z"/> <path fill="#C85D54" d="M461.4 104.9c-.6-9.9-2-20.2-4.5-30.8-4.4-18.8-11.8-29.8-19.7-36.2-13.1-10.6-27.7-8.4-32.6-7.2 11.3 6.4 24 24.1 25.8 71 0 1.1.1 2.2.1 3.3.6 20.9-.7 39.6-3.1 56.9-3 21.9-7.8 41.6-12.7 60.7-6.7 26.4-13.4 51.7-15.8 80.3 0 0-.6 1.3-1.7 2.5 1.5 3.5 4.8 1.5 6.6.2.7-.5 1.1-1 1.1-1s14.5-46.2 28.8-82c1.2-3.1 2.5-6.1 3.7-9 6.6-15.4 13.4-32.7 18.1-51.8 4.6-17.4 7.1-36.4 5.9-56.9z"/> <path fill="#F2F0E9" d="M430.6 104.9c0-1.1-.1-2.2-.1-3.3-1.8-46.9-14.6-64.6-25.8-71-2.4-1.4-4.7-2.2-6.8-2.7v-.1s-2.1-.6-5.5-.6c-3.3-.1-5.5.6-5.5.6v.1c-2.1.5-4.4 1.4-6.8 2.7-11.3 6.4-24 24.1-25.8 71 0 1.1-.1 2.2-.1 3.3-.6 20.9.7 39.6 3.1 56.9 3 21.9 7.8 41.6 12.7 60.7 6.7 26.4 13.4 51.7 15.8 80.3 0 0 .6 1.3 1.7 2.5 1.2 1.3 3 2.5 5 1 2 1.5 3.8.3 5-1 1-1.2 1.7-2.5 1.7-2.5 2.4-28.7 9.1-54 15.8-80.3 4.8-19.1 9.6-38.8 12.7-60.7 2.2-17.3 3.5-36 2.9-56.9z"/> <g> <path opacity=".1" fill="#999" d="M503.9 83.1s24.8 76.6-63.4 127.9c-88.2 51.3-164.3-29.2-164.3-29.2s5.5 22.6 29.8 46.8c24.3 24.3 61.2 73.9 63.4 81.6 0 0 27.6-8.3 44.1 0 0 0 29.8-48 59.5-79.4 29.8-31.4 66.7-82.7 30.9-147.7z"/> </g> <g> <g fill="#56473E"> <path d="M377.6 351.2c-.3 0-.6-.3-.6-.6-.4-21.2-2.6-33.1-2.6-33.2-.1-.3.2-.7.5-.8.4-.1.7.2.8.5 0 .1 2.3 12.1 2.7 33.4-.2.4-.4.7-.8.7z"/> <path d="M384.6 350.4c-.4 0-.7-.3-.6-.7.8-14-.7-33-.9-34.2-.1-.3.1-.6.4-.8.3-.1.7 0 .8.4.2.5 1.7 20.3.9 34.6 0 .5-.3.7-.6.7z"/> <path d="M392.7 349.4c-.4 0-.6-.3-.6-.6v-33.9c0-.4.3-.6.6-.6.4 0 .6.3.6.6v33.9c0 .3-.3.6-.6.6z"/> <path d="M400.5 349.5c-.3 0-.6-.2-.6-.6-1.7-13.1.9-33.5 1.3-34.1.2-.3.6-.4.9-.2.3.2.4.5.3.8-.4 1.4-2.8 20.7-1.2 33.4 0 .3-.2.7-.7.7.1 0 .1 0 0 0z"/> <path d="M407.8 349.4c-.3 0-.6-.3-.6-.6-1.5-20.9 1.1-33.4 1.1-33.5.1-.3.4-.6.8-.5.3.1.6.4.5.8 0 .1-2.5 12.5-1.1 33.2 0 .2-.3.5-.7.6z"/> </g> <path fill="#B06451" d="M367.7 307.6s23.3-12.1 49.7-.3c0 0-4.8 8.5-6.3 16.3 0 0-21.5-4-37.2 1.5 0 0-.9-8.5-6.2-17.5z"/> <path fill="#984D3C" d="M373 319.9s16.2-7.2 39.2-.6l-1.3 5.1s-20.8-4.7-36.9.7l-1-5.2z"/> <path opacity=".4" fill="#9E2037" d="M366.6 305.7s23.8-13.4 51.9.3l-1.2 1.7s-23.6-12.2-49.5.2l-1.2-2.2z"/> <path fill="#B06451" d="M374.9 349.5s19.2-5.2 36.1-.4c0 0 3 2.4-.5 4.8 0 0-18.6-3.8-35.3 1.1 0-.1-3.5-2.8-.3-5.5z"/> </g> </g> </symbol> <symbol id="landscape"> <path id="bg" fill="#E6B54A" d="M0 0h800v800H0z"/> <path fill="#91B4C8" d="M130.2 563.5l150.5-292.3L440 563.5z"/> <path fill="#87A6BC" d="M440 563.5L280.7 271.2v292.3z"/> <path fill="#FFF" d="M235 360.1l19.9-9.1-4.1 34.4 20.6-26.4 9.3 46.9 17-55.9 39.2 24.2-12.1-22.1-44.1-80.9z"/> <path fill="#91B4C8" d="M334.9 563.5l142.3-225.3 150.7 225.3z"/> <path fill="#87A6BC" d="M627.9 563.5L477.2 338.2v225.3z"/> <path fill="#FFF" d="M433.9 406.7l18.9-7-3.9 26.6 19.5-20.4 8.8 36.1 16.1-43 37 18.6-11.4-17-41.7-62.4z"/> <path fill="#A3BC3D" d="M698.2 583.3c0 5.6-3.6 10.1-8.1 10.1H93.9c-4.5 0-8.1-4.5-8.1-10.1s3.6-10.1 8.1-10.1H690c4.5 0 8.2 4.5 8.2 10.1z"/> <path fill="#E6B863" d="M408.8 556.5h-33.4v-26.4l16.7-12.7 16.7 12.7z"/> <path fill="#E3912F" d="M381 529.6h19.1v10.9H381z"/> <path fill="#223C3B" d="M391.7 530.9h6.6v8.1h-6.6z"/> <path fill="#223C3B" d="M382.8 530.9h6.6v8.1h-6.6z"/> <path fill="#834C13" d="M410.3 531.3c-.6 0-1.3-.2-1.8-.6l-16.4-12.5-16.4 12.5c-1.3 1-3.2.7-4.2-.6-1-1.3-.7-3.2.6-4.2l18.3-13.9c1.1-.8 2.5-.8 3.6 0l18.3 13.9c1.3 1 1.6 2.9.6 4.2-.8.8-1.7 1.2-2.6 1.2z"/> <path fill="#834C13" d="M404.1 514.1h4.7v10.1h-4.7z"/> <path fill="#834C13" d="M403.7 512.5h5.6v1.9h-5.6z"/> <path fill="#E8C437" d="M283.2 484h-29.8v-23.6l14.9-11.4 14.9 11.4z"/> <path fill="#E3912F" d="M258.3 459.9h17.1v9.8h-17.1z"/> <path fill="#223C3B" d="M268 461.1h5.9v7.3H268z"/> <path fill="#223C3B" d="M260 461.1h5.9v7.3H260z"/> <path fill="#D0613B" d="M284.6 461.5c-.6 0-1.1-.2-1.6-.5l-14.7-11.2-14.7 11.2c-1.2.9-2.8.7-3.7-.5-.9-1.2-.7-2.8.5-3.7l16.3-12.4c1-.7 2.3-.7 3.2 0l16.3 12.4c1.2.9 1.4 2.6.5 3.7-.5.6-1.3 1-2.1 1z"/> <path fill="#D0613B" d="M279.1 446.1h4.2v9h-4.2z"/> <path fill="#D0613B" d="M278.7 444.6h5v1.7h-5z"/> <g class="cloud" transform='translate(0 0)'> <path fill="#DAEDF9" d="M280 149.4h-.3c-1.9-15.3-14.9-27.2-30.7-27.2-17.1 0-31 13.9-31 31v.5c-1.2-.3-2.5-.5-3.8-.5-8.1 0-14.7 6.1-15.7 13.9-2-.7-4.1-1.1-6.2-1.1-10.4 0-18.9 8.5-18.9 18.9 0 10.4 8.5 18.9 18.9 18.9H280c15 0 27.2-12.2 27.2-27.2S295 149.4 280 149.4z"/> <path fill="#FCFBF1" d="M187 192.7c2.2 0 4.3.4 6.2 1.1 1-7.8 7.6-13.9 15.7-13.9 1.3 0 2.6.2 3.8.5v-.5c0-17.1 13.9-31 31-31 15.8 0 28.9 11.9 30.7 27.2h.3c12 0 22.1 7.7 25.8 18.5 4.2-4.8 6.8-11.1 6.8-18 0-15-12.2-27.2-27.2-27.2h-.3c-1.9-15.3-14.9-27.2-30.7-27.2-17.1 0-31 13.9-31 31v.5c-1.2-.3-2.5-.5-3.8-.5-8.1 0-14.7 6.1-15.7 13.9-2-.7-4.1-1.1-6.2-1.1-10.4 0-18.9 8.5-18.9 18.9 0 4 1.3 7.7 3.4 10.8 2.9-1.9 6.3-3 10.1-3z"/> </g> <g class="cloud" transform='translate(0 0)'> <path fill="#DAEDF9" d="M458.6 252.1h-.3c-1.9-15.3-14.9-27.2-30.7-27.2-17.1 0-31 13.9-31 31v.5c-1.2-.3-2.5-.5-3.8-.5-8.1 0-14.7 6.1-15.7 13.9-2-.7-4.1-1.1-6.2-1.1-10.4 0-18.9 8.5-18.9 18.9s8.5 18.9 18.9 18.9h87.7c15 0 27.2-12.2 27.2-27.2 0-15.1-12.2-27.2-27.2-27.2z"/> <path fill="#FCFBF1" d="M365.6 295.4c2.2 0 4.3.4 6.2 1.1 1-7.8 7.6-13.9 15.7-13.9 1.3 0 2.6.2 3.8.5v-.5c0-17.1 13.9-31 31-31 15.8 0 28.9 11.9 30.7 27.2h.3c12 0 22.1 7.7 25.8 18.5 4.2-4.8 6.8-11.1 6.8-18 0-15-12.2-27.2-27.2-27.2h-.3c-1.9-15.3-14.9-27.2-30.7-27.2-17.1 0-31 13.9-31 31v.5c-1.2-.3-2.5-.5-3.8-.5-8.1 0-14.7 6.1-15.7 13.9-2-.7-4.1-1.1-6.2-1.1-10.4 0-18.9 8.5-18.9 18.9 0 4 1.3 7.7 3.4 10.8 2.9-1.9 6.3-3 10.1-3z"/> </g> <g class="cloud" transform='translate(0 0)'> <path fill="#DAEDF9" d="M631.6 350.1h-.2c-1.2-10.2-9.9-18.1-20.5-18.1-11.4 0-20.6 9.2-20.6 20.6v.3c-.8-.2-1.7-.3-2.5-.3-5.4 0-9.8 4.1-10.4 9.3-1.3-.5-2.7-.7-4.2-.7-7 0-12.6 5.6-12.6 12.6s5.6 12.6 12.6 12.6h58.4c10 0 18.1-8.1 18.1-18.1.1-10.1-8-18.2-18.1-18.2z"/> <path fill="#FCFBF1" d="M569.7 378.9c1.5 0 2.9.3 4.2.7.6-5.2 5-9.3 10.4-9.3.9 0 1.7.1 2.5.3v-.3c0-11.4 9.2-20.6 20.6-20.6 10.5 0 19.2 7.9 20.5 18.1h.2c8 0 14.7 5.1 17.2 12.3 2.8-3.2 4.5-7.4 4.5-12 0-10-8.1-18.1-18.1-18.1h-.2c-1.2-10.2-9.9-18.1-20.5-18.1-11.4 0-20.6 9.2-20.6 20.6v.3c-.8-.2-1.7-.3-2.5-.3-5.4 0-9.8 4.1-10.4 9.3-1.3-.5-2.7-.7-4.2-.7-7 0-12.6 5.6-12.6 12.6 0 2.7.8 5.2 2.3 7.2 1.9-1.2 4.2-2 6.7-2z"/> </g> <path fill="#887152" d="M104.1 593.9l176.6 70.7 72.3-33.9L468.6 703l62.6-68.5h72.9l40.6-41.1z"/> <path fill="#B29968" d="M264.5 630.7l-31.6 14.7 47.8 19.2 21.7-10.2z"/> <path fill="#B29968" d="M556.1 593.5l-40.6 41h-72.8l-30.4 33.3 56.3 35.2 62.6-68.5h72.9l40.6-41.1z"/> <g> <path fill="#C5E348" d="M94.4 573.2s52.6-13.5 79.3-38.1c36.2-33.3 55.5-60.1 94.6-60.1 44.3 0 106.7 91.6 173.9 98.2H94.4z"/> <path fill="#A3BC3D" d="M312 573.2h130.2C375 566.6 312.6 475 268.3 475c-19.1 0-33.5 6.4-47.4 16.9 34.6 9.6 81.1 56.3 91.1 81.3z"/> </g> <g> <path fill="#C5E348" d="M335.5 573.2s53.9-13.3 81.3-37.7c37.1-33 56.8-59.5 96.9-59.5 45.4 0 109.3 90.7 178.2 97.2H335.5z"/> <path fill="#A3BC3D" d="M558.5 573.2h133.4C623 566.7 559.1 476 513.7 476c-19.6 0-34.3 6.4-48.6 16.7 35.5 9.5 83.1 55.8 93.4 80.5z"/> </g> <g> <path fill="#5E9B51" d="M472.7 527.8h24.1l-12.9-31z"/> <path fill="#59452B" d="M481.9 527.8h4v3.2h-4z"/> <path fill="#334C27" d="M483.9 527.8h12.9l-12.9-31z"/> </g> <g> <path fill="#5E9B51" d="M562.3 565.8h24.1l-12.9-31z"/> <path fill="#59452B" d="M571.5 565.8h4v3.2h-4z"/> <path fill="#334C27" d="M573.5 565.8h12.9l-12.9-31z"/> </g> <g> <path fill="#5E9B51" d="M228.2 544.9h24.2l-12.9-31z"/> <path fill="#59452B" d="M237.5 544.9h4v3.2h-4z"/> <path fill="#334C27" d="M239.5 544.9h12.9l-12.9-31z"/> </g> <g> <path fill="#5E9B51" d="M225.4 488.9h24.1L236.6 458z"/> <path fill="#59452B" d="M234.6 488.9h4v3.2h-4z"/> <path fill="#334C27" d="M236.6 488.9h12.9L236.6 458z"/> </g> <g> <path fill="#5E9B51" d="M314 551.4h24.1l-12.9-30.9z"/> <path fill="#59452B" d="M323.2 551.4h4v3.2h-4z"/> <path fill="#334C27" d="M325.2 551.4h12.9l-12.9-30.9z"/> </g> <g> <path fill="#E6E3E5" d="M519.8 485.6h-29.9V462l15-11.4 14.9 11.4z"/> <path fill="#6D4922" d="M503.9 464.3h9.5v17.1h-9.5z"/> <path fill="#223C3B" d="M506 466.5h5.9v12.7H506z"/> <path fill="#223C3B" d="M495.1 466.5h5.9v5.8h-5.9z"/> <path fill="#834C13" d="M521.2 463.1c-.6 0-1.1-.2-1.6-.5h-29.4c-1.2.9-2.8.7-3.7-.5-.9-1.2-.7-2.8.5-3.7l16.3-12.4c1-.7 2.3-.7 3.2 0l16.3 12.4c1.2.9 1.4 2.6.5 3.7-.5.6-1.3 1-2.1 1z"/> <path fill="#834C13" d="M515.6 447.7h4.2v9h-4.2z"/> <path fill="#834C13" d="M515.2 446.2h5v1.7h-5z"/> </g> <g> <path fill="#5E9B51" d="M512.1 499.4h29.3l-15.7-40.6z"/> <path fill="#59452B" d="M523.3 499.4h4.9v4.1h-4.9z"/> <path fill="#334C27" d="M525.7 499.4h15.7l-15.7-40.6z"/> </g> <g> <circle fill="#6BB354" cx="458.8" cy="479.7" r="16.6"/> <path fill="#59452B" d="M457.7 510.7l.1-17.8-8-9.4 7.9 6.5 1.2-7.4 1.5 7.9 8.7-6.3-8.7 8.7-.1 17.8z"/> </g> <g> <circle fill="#6BB354" cx="338.1" cy="499.1" r="16.6"/> <path fill="#59452B" d="M337 530.2l.1-17.8-7.9-9.5 7.8 6.5 1.2-7.4 1.5 8 8.7-6.3-8.7 8.7-.1 17.8z"/> </g> <g> <circle fill="#6BB354" cx="176.8" cy="520.1" r="16.6"/> <path fill="#59452B" d="M175.7 551.1l.1-17.8-8-9.4 7.9 6.5 1.1-7.4 1.5 8 8.8-6.3-8.8 8.6-.1 17.8z"/> </g> <g> <path fill="#834C13" d="M545.2 555.4c.6 0 1.1-.5 1.1-1.1v-11.9c0-.6-.5-1.1-1.1-1.1-.6 0-1.1.5-1.1 1.1v11.9c0 .7.5 1.1 1.1 1.1z"/> <path fill="#834C13" d="M550.8 544.4c.6 0 1.1-.5 1.1-1.1v-11.9c0-.6-.5-1.1-1.1-1.1-.6 0-1.1.5-1.1 1.1v11.9c0 .6.5 1.1 1.1 1.1z"/> <path fill="#834C13" d="M546.9 530.4c.6 0 1.1-.5 1.1-1.1v-11.9c0-.6-.5-1.1-1.1-1.1-.6 0-1.1.5-1.1 1.1v11.9c0 .7.5 1.1 1.1 1.1z"/> <path fill="#834C13" d="M534.6 554c.6 0 1.1-.5 1.1-1.1V541c0-.6-.5-1.1-1.1-1.1-.6 0-1.1.5-1.1 1.1v12c0 .5.5 1 1.1 1z"/> <path fill="#834C13" d="M526 549.5c.6 0 1.1-.5 1.1-1.1v-11.9c0-.6-.5-1.1-1.1-1.1-.6 0-1.1.5-1.1 1.1v11.9c.1.6.5 1.1 1.1 1.1z"/> <path fill="#834C13" d="M513.6 549.5c.6 0 1.1-.5 1.1-1.1v-11.9c0-.6-.5-1.1-1.1-1.1-.6 0-1.1.5-1.1 1.1v11.9c0 .6.5 1.1 1.1 1.1z"/> <path fill="#834C13" d="M501.9 554c.6 0 1.1-.5 1.1-1.1V541c0-.6-.5-1.1-1.1-1.1-.6 0-1.1.5-1.1 1.1v12c.1.5.5 1 1.1 1z"/> <path fill="#834C13" d="M488.8 549.5c.6 0 1.1-.5 1.1-1.1v-11.9c0-.6-.5-1.1-1.1-1.1-.6 0-1.1.5-1.1 1.1v11.9c0 .6.5 1.1 1.1 1.1z"/> <path fill="#834C13" d="M478.2 548.1c.6 0 1.1-.5 1.1-1.1v-11.9c0-.6-.5-1.1-1.1-1.1-.6 0-1.1.5-1.1 1.1V547c0 .6.5 1.1 1.1 1.1z"/> <path fill="#834C13" d="M467.1 549.5c.6 0 1.1-.5 1.1-1.1v-11.9c0-.6-.5-1.1-1.1-1.1-.6 0-1.1.5-1.1 1.1v11.9c0 .6.5 1.1 1.1 1.1z"/> <g> <path fill="#834C13" d="M545.8 549.5c.2 0 .4-.1.5-.3l5-10.7c.1-.1.1-.2 0-.4l-3.9-16.4c-.1-.3-.4-.5-.6-.4-.3.1-.5.4-.4.6l3.9 16.2-4.7 10.1-10.7-1.9-8.5-4.5c-.1 0-.2-.1-.3-.1h-12-.1l-12 3.1-12.8-4.5H478.3L467 542c-.3 0-.5.3-.5.6s.3.5.6.5l11.1-1.4h10.5l12.9 4.5h.3l12.1-3.1h11.8l8.4 4.4c.1 0 .1 0 .2.1l11.4 1.9c-.1 0 0 0 0 0z"/> </g> </g> <g> <path fill="#834C13" d="M173.1 567.5c-.6 0-1.1-.5-1.1-1.1v-11.9c0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1v11.9c0 .7-.5 1.1-1.1 1.1z"/> <path fill="#834C13" d="M167.6 556.5c-.6 0-1.1-.5-1.1-1.1v-11.9c0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1v11.9c-.1.6-.5 1.1-1.1 1.1z"/> <path fill="#834C13" d="M171.5 542.5c-.6 0-1.1-.5-1.1-1.1v-11.9c0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1v11.9c-.1.7-.5 1.1-1.1 1.1z"/> <path fill="#834C13" d="M183.8 566.1c-.6 0-1.1-.5-1.1-1.1v-11.9c0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1V565c-.1.6-.5 1.1-1.1 1.1z"/> <path fill="#834C13" d="M192.3 561.6c-.6 0-1.1-.5-1.1-1.1v-11.9c0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1v11.9c0 .6-.5 1.1-1.1 1.1z"/> <path fill="#834C13" d="M204.8 561.6c-.6 0-1.1-.5-1.1-1.1v-11.9c0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1v11.9c0 .6-.5 1.1-1.1 1.1z"/> <path fill="#834C13" d="M216.4 566.1c-.6 0-1.1-.5-1.1-1.1v-11.9c0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1V565c0 .6-.5 1.1-1.1 1.1z"/> <path fill="#834C13" d="M229.5 561.6c-.6 0-1.1-.5-1.1-1.1v-11.9c0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1v11.9c0 .6-.5 1.1-1.1 1.1z"/> <path fill="#834C13" d="M240.2 560.2c-.6 0-1.1-.5-1.1-1.1v-11.9c0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1v11.9c0 .6-.5 1.1-1.1 1.1z"/> <path fill="#834C13" d="M251.3 561.6c-.6 0-1.1-.5-1.1-1.1v-11.9c0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1v11.9c0 .6-.5 1.1-1.1 1.1z"/> <g> <path fill="#834C13" d="M172.5 561.6c-.2 0-.4-.1-.5-.3l-5-10.7c0-.1-.1-.2 0-.4l3.9-16.4c.1-.3.4-.5.6-.4.3.1.5.4.4.6l-3.9 16.2 4.7 10.1 10.7-1.9 8.5-4.5c.1 0 .2-.1.3-.1h12.1l12 3.1 12.8-4.5H240l11.2 1.4c.3 0 .5.3.5.6s-.3.5-.6.5l-11.1-1.4h-10.5l-12.9 4.5h-.3l-12.1-3.1h-11.8l-8.4 4.4s-.1 0-.2.1l-11.3 2.2c.1 0 .1 0 0 0z"/> </g> </g> <g id="sun"> <circle fill="#DB9600" cx="545.6" cy="245.5" r="32.5"/> <path fill="#EFE13D" d="M578.1 245.5c0-18-14.6-32.5-32.5-32.5v65c17.9 0 32.5-14.5 32.5-32.5z"/> </g> <g class="cloud" transform='translate(0 0)'> <path fill="#DAEDF9" d="M634.6 231.9h-.3c-1.9-15.3-14.9-27.2-30.7-27.2-17.1 0-31 13.9-31 31v.5c-1.2-.3-2.5-.5-3.8-.5-8.1 0-14.7 6.1-15.7 13.9-2-.7-4.1-1.1-6.2-1.1-10.4 0-18.9 8.5-18.9 18.9 0 10.4 8.5 18.9 18.9 18.9h87.7c15 0 27.2-12.2 27.2-27.2s-12.2-27.2-27.2-27.2z"/> <path fill="#FCFBF1" d="M541.6 275.3c2.2 0 4.3.4 6.2 1.1 1-7.8 7.6-13.9 15.7-13.9 1.3 0 2.6.2 3.8.5v-.5c0-17.1 13.9-31 31-31 15.8 0 28.9 11.9 30.7 27.2h.3c12 0 22.1 7.7 25.8 18.5 4.2-4.8 6.8-11.1 6.8-18 0-15-12.2-27.2-27.2-27.2h-.3c-1.9-15.3-14.9-27.2-30.7-27.2-17.1 0-31 13.9-31 31v.5c-1.2-.3-2.5-.5-3.8-.5-8.1 0-14.7 6.1-15.7 13.9-2-.7-4.1-1.1-6.2-1.1-10.4 0-18.9 8.5-18.9 18.9 0 4 1.3 7.7 3.4 10.8 2.9-1.9 6.4-3 10.1-3z"/> </g> </symbol> <g class='piece'> <use clip-path='url(#piece1)' xlink:href='#landscape' /> <use clip-path='url(#piece1)' xlink:href='#balloon' /> </g> <g class='piece'> <use clip-path='url(#piece2)' xlink:href='#landscape' /> <use clip-path='url(#piece2)' xlink:href='#balloon' /> </g> <g class='piece'> <use clip-path='url(#piece3)' xlink:href='#landscape' /> <use clip-path='url(#piece3)' xlink:href='#balloon' /> </g> <use class='piece' clip-path='url(#piece4)' xlink:href='#landscape' /> <g class='piece'> <use clip-path='url(#piece5)' xlink:href='#landscape' /> <use clip-path='url(#piece5)' xlink:href='#balloon' /> </g> <use class='piece' clip-path='url(#piece6)' xlink:href='#landscape' /> <use class='piece' clip-path='url(#piece7)' xlink:href='#landscape' /> <g class='piece'> <use clip-path='url(#piece8)' xlink:href='#landscape' /> <use clip-path='url(#piece8)' xlink:href='#balloon' /> </g> <use class='piece' clip-path='url(#piece9)' xlink:href='#landscape' /> <use class='piece' clip-path='url(#piece10)' xlink:href='#landscape' /> <g class='piece'> <use clip-path='url(#piece11)' xlink:href='#landscape' /> <use clip-path='url(#piece11)' xlink:href='#balloon' /> </g> <use class='piece' clip-path='url(#piece12)' xlink:href='#landscape' /> <g class='piece'> <use clip-path='url(#piece13)' xlink:href='#landscape' /> <use clip-path='url(#piece13)' xlink:href='#balloon' /> </g> <use class='piece' clip-path='url(#piece14)' xlink:href='#landscape' /> <use class='piece' clip-path='url(#piece15)' xlink:href='#landscape' /> <use class='piece' clip-path='url(#piece16)' xlink:href='#landscape' /> </svg> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/utils/Draggable.min.js'></script><script src='https://www.greensock.com/js/src/plugins/ThrowPropsPlugin.min.js'></script> <script > // Throw pieces TweenMax.staggerTo('.piece', 2.1, { cycle: { x: random, y: random }, delay: .5, ease: Elastic.easeInOut }, .03); // Draggable var s = 25; Draggable.create('.piece', { throwProps: true, snap: { x: function(endValue) { return Math.round(endValue / s) * s; }, y: function(endValue) { return Math.round(endValue / s) * s; } } }); // Helpers function random() { return (Math.random() * 4 - 2) * 60; } // Balloon Animation /* / If you experience any performance issues you can comment out the code below (read the comments for more info) */ TweenMax.to('#balloon-innards', 4, { attr: { transform: 'matrix(1, 0, 0, 1, 0, 60)' }, repeat: -1, yoyo: true, ease: Power1.easeInOut }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: