cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="header">
<div class="social">
    <a href="https://www.linkedin.com/in/rominamartinliberon/" class="social"><img src="https://i.imgsafe.org/e2/e285e93f9c.png" alt="linkedin"></img></a>
    <a href="https://rominamartin.github.io/" class="social"><img src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="github"></img></a>
    <a href="https://twitter.com/rominamartinlib" class="social"><img src="https://i.imgsafe.org/43/431dd07874.png" alt="twitter"></img></a>
</div>
</div>
<div class="content">

<div class="draw_container">
    <div class="canvas_container">
        <canvas id="canvas"></canvas>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" width="340" height="404">
        <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="168.897" y1="327.638" x2="168.897" y2="13.093">
            <stop offset="0" stop-color="#60b2cc"/>
            <stop offset="1" stop-color="#246189"/>
        </linearGradient>
        <path fill="url(#a)" d="M332.854 182.439c0-93.528-73.406-169.347-163.957-169.347S4.939 88.911 4.939 182.439c0 0 13.161 95.116 61.372 116.03 215.839 93.632 266.543-63.519 266.543-116.03"/>
        <path fill="#3B538B" d="M68.519 278.823a305.793 305.793 0 0 1 7.865-23.146c-1.47.659-2.938 1.323-4.407 1.989 3.021-10.063 9.036-19.292 12.256-29.429.801 5.174.906 10.499 2.259 15.575 1.384 5.189 4.062 9.438 6.72 14.021-1.517-.133-3.114-.283-4.708-.529.917 1.461 1.938 2.968 3.058 4.59 3.284 4.753 6.028 9.722 8.639 14.871-1.746-.477-3.495-.932-5.243-1.387 3.991 7.181 8.014 14.239 11.274 21.813-6.344-2.852-12.314.782-18.857-1.55-5.497 3.459-11.622 1.114-17.16 4.507 1.879-7.964 2.291-16.007 4.165-23.96a109.13 109.13 0 0 1-5.861 2.635z"/>
        <path fill="#26437D" d="M42.552 280.953c2.53-6.559 3.063-7.42 6.093-13.741a74.243 74.243 0 0 0 2.638-6.28c-2.012 1.001-4.196 1.678-6.857 2.348 6.051-13.116 10.279-26.58 10.238-41.114 2.884 7.284 5.244 14.806 8.483 21.944 2.614 5.761 5.753 11.099 7.87 17.085a52.49 52.49 0 0 0-5.479-2.422c4.274 9.72 8.729 19.382 12.848 29.135a678.005 678.005 0 0 0-5.993-2.169l.05.118c3.876 9.107 3.115 18.624 5.76 28.005"/>
        <path fill="#405E93" d="M224.726 267.66c.208-.207.411-.416.616-.625-3.009.979-6.02 1.939-8.975 2.969 6.821-7.852 11.835-15.448 15.518-24.644a384.226 384.226 0 0 1-7.101 2.83c3.28-6.367 7.607-12.129 10.938-18.408.494-.933.941-1.888 1.354-2.855a26.26 26.26 0 0 1-4.321 1.525c3.313-8.358 5.452-16.969 9.13-25.24.883 9 5.074 16.434 8.726 24.731-1.698-.64-2.978-1.108-4.207-1.569 3.009 7.597 5.851 15.175 8.276 23.139a137.997 137.997 0 0 0-3.973-2.2c2.135 7.944 3.789 16 5.286 23.921a82.366 82.366 0 0 1-6.031-3.816c.078.914.166 1.835.274 2.77 1.399 11.996 8.244 23.788 12.272 35.246a1193.347 1193.347 0 0 0-29.992-14.918c-9.035 4.429-17.714 9.191-27.02 13.206 5.928-13.187 8.455-25.308 19.23-36.062z"/>
        <path fill="#2A4982" d="M99.324 262.188a71.35 71.35 0 0 1 1.107-2.697c-2.961 1.91-5.884 3.866-8.818 5.771 3.191-8.61 6.569-17.01 10.986-25.19-2.995 1.222-5.983 2.456-8.925 3.784 3.173-6.698 7.001-13.179 9.965-19.948a52.537 52.537 0 0 0 1.996-5.368c-2.2.983-4.448 1.883-6.637 2.812 4.214-10.775 5.461-22.089 9.061-33.01 2.312 11.337 9.424 19.163 15.631 28.832a160.3 160.3 0 0 1-4.226-.563 72.608 72.608 0 0 1 2.789 4.037c3.667 5.756 6.641 11.449 11.076 16.816-1.931-.312-3.878-.583-5.828-.856 5.443 7.285 12.023 13.75 17.116 21.268a429.175 429.175 0 0 0-10.231-2.747c.81 1.174 1.604 2.36 2.375 3.569 6.466 10.135 6.729 21.51 11.078 32.28-9.793-3.615-19.637 1.034-29.49-2.455-9.491 5.496-18.954 2.835-28.479 8.284 3.379-11.596 5.054-23.21 9.454-34.619z"/>
        <path fill="#26427C" d="M286.605 301.857c-8.474-4.715-9.689-5.056-18.24-9.646-9.658 3.449-19.05 7.58-28.59 11.312 4.898-11.174 10.194-22.134 15.64-33.034-2.934 1.365-5.844 2.809-8.81 4.218 4.396-8.31 9.592-16.313 13.454-24.859a177.599 177.599 0 0 0-7.752 3.78c3.493-6.79 5.622-13.675 8.385-20.679a63.192 63.192 0 0 1 2.5-5.496c-1.959.734-3.881 1.532-5.678 2.499 5.426-8.933 11.891-18.961 15.914-35.385 1.066 15.5 5.575 26.15 9.323 35.956a313.499 313.499 0 0 0-4.48-2.18c3.502 8.561 7.267 17.034 11.2 25.402-1.743-.786-3.488-1.57-5.232-2.357 3.688 8.468 7.059 17.037 9.521 25.829a445.423 445.423 0 0 0-7.61-4.182"/>
        <path fill="#3B538B" d="M278.528 298.344c2.321-5.306 9.998-15.153 9.998-15.153l-5.195.2s7.421-6.532 14.533-17.469c-2.439.59-4.92 1.067-7.286 1.822 6.811-9.846 13.737-17.921 18.412-30.896-.422 9.678-.052 10.92 2.901 19.472"/>
        <path fill="#94A9E0" d="M286.249 292.443L254.333 318l-162 1-27.5-19.986s15-10.597 28.01-15.74c.875-.346 2.174-.332 2.8-.384 17.827-1.474 36.435 2.812 36.435 2.812s1.933.263 5.284.624c1.556.168 3.42.354 5.535.551 8.096.749 19.917 1.572 32.599 1.572 26.219 0 47.682 6.847 64.254 3.335 30.709-6.505 46.499.659 46.499.659z"/>
        <path fill="#5872A5" d="M231.219 299.602s-79.208-47.867-152.835 1.821c0 0 35.269 4.587 73.386 4.668 38.119.081 79.449-6.489 79.449-6.489z"/>
        <path fill="#94A9E0" d="M273.294 296.813s-29.61 7.146-60.457 8.495c-.718.035-1.983 1.261-2.703 1.278-31.675.725-58.538 3.48-58.538 3.48 7.688-7.368 15.477-12.959 23.194-17.12 19.303-10.412 38.573-12.678 54.341-10.926 24.723 2.75 44.163 14.793 44.163 14.793z"/>
        <path fill="#0D3842" d="M116.457 265.742c.095.005.197 0 .296 0-1.455 2.676-2.572 6.258.456 7.762 1.614.806 3.998-.008 6.438-1.606-.904 3.866-.649 7.219 1.959 8.349 2.905 1.262 5.806.169 8.349-1.75-1.027 3.743-.871 6.915 2.026 7.626 3.805.937 6.549-1.491 8.468-5.136-1.007 6.438.304 10.37 4.548 11.249 3.167.657 5.871-1.684 8-5.752.012.173.029.345.045.514.329 3.143 1.603 5.538 4.434 5.871 2.44.288 4.392-2.029 5.719-5.21 1.036 5.49 3.476 8.94 8.14 8.106 3.657-.657 5.186-4.359 5.657-9.19 1.286 4.983 3.751 7.836 8.128 7.248 3.582-.477 5.223-4.282 5.789-9.085 5.32 10.732 12.707 8.752 13.541 1.537.174-1.496.107-3.328-.147-5.366 5.419 5.949 9.376 3.122 9.376-3.378 0-.312-.012-.653-.036-1.007 2.858 4.455 6.028 6.754 9.126 5.234 2.511-1.232 2.789-5.016 1.334-9.811 3.501 3.323 7.301 4.141 9.475 1.417 1.34-1.672 1.442-3.85.797-6.172 6.442-.537 8.078-5.304 8.477-8.073.165-1.117.128-1.906.124-1.959.004-.004.008-.004.008-.004s-7.708-1.829-16.192-6.04c-2.544-1.266-5.16-2.745-7.662-4.459-4.336-2.962-8.317-6.618-10.971-11.044-1.36-2.268-2.375-4.732-2.909-7.412-2.511-12.568-18.485-4.129-32.528 6.176-12.942-9.072-26.682-15.321-29.73-3.916-.214.806-.46 1.583-.74 2.334-3.451 9.426-11.476 14.878-19.146 18.018a60.87 60.87 0 0 1-1.874.727c-8.333 3.045-15.749 3.468-15.749 3.468s-1.511 10.336 6.974 10.734z"/>
        <path fill="#0B4F48" d="M154.209 269.544a7.92 7.92 0 0 0 1.106 2.044c.98 2.34 2.948 3.974 5.732 3.412 2.277-.459 3.992-2.354 5.228-4.194.138-.205.27-.413.401-.623.169 4.031.461 8.548 2.429 12.083 1.024 1.839 2.973 3.594 5.242 3.393 3.085-.269 5.623-2.494 7.034-5.185 2.409-4.596 2.994-9.896 2.787-15.143.109.267.213.536.323.803 1.099 2.656 2.501 6.096 5.248 7.467 1.987.989 4.035 1.066 5.612-.748 1.037-1.19 1.809-2.507 2.275-4.023.437-1.41.672-2.856.758-4.313.723 1.494 1.414 3.005 2.24 4.442 1.201 2.092 2.824 4.653 5.107 5.697 2.958 1.351 6.035.748 8.02-1.915 1.496-2.011 1.663-4.913 1.371-7.315a27.899 27.899 0 0 0-.749-3.84c2.771 2.859 6.612 6.079 10.563 5.629.958.256 1.95.304 2.956.02 3.424-.971 4.56-4.63 3.892-7.845-.304-1.471-.906-2.839-1.649-4.135.308.144.617.286.93.424 3.656 1.595 7.782 2.618 11.797 2.547.313-.006.634-.018.96-.034.066.022.135.042.201.061.921.384 1.872.71 2.828.868.163-1.118.126-1.906.122-1.962l.007-.002s-7.705-1.83-16.192-6.043c-2.545-1.264-5.159-2.744-7.66-4.456-4.335-2.961-8.318-6.617-10.974-11.045a5.271 5.271 0 0 0-.952 2.194 2.905 2.905 0 0 0-1.214.653 9.567 9.567 0 0 0-2.333-.869c-1.737-.39-3.071.453-3.634 1.79a62.546 62.546 0 0 0-.599-.915c-.831-1.25-2.103-1.601-3.263-1.376-.629-.408-1.313-.706-2.064-.838-.614-.109-1.182-.095-1.697.046-.508-.66-1.303-1.115-2.389-1.115h-.574c-1.484 0-2.466.908-2.913 2.133a3.386 3.386 0 0 0-1.663.935c-1.479-1.734-3.584-2.778-5.951-1.961-2.248.776-3.486 2.805-4.1 5.044-.563-.809-1.479-1.431-2.469-1.377a12.837 12.837 0 0 0-.187-1.051c-.524-2.329-2.528-4.651-4.989-4.563-1.121-.905-2.756-1.115-4.046.235a57.651 57.651 0 0 0-1.644 1.781c-4.757 5.439-9.07 12.092-10.667 19.24a52.735 52.735 0 0 0-1.055 6.753c-.202 2.304-.36 4.981.458 7.192zM135.639 255.77c.656-2.159 1.693-4.204 2.83-6.169 1.331-3.72 3.126-7.587 6.17-10.073.713-.745 1.528-1.348 2.42-1.568 1.118-.936 2.75-1.146 4.005.275 1.749 1.98 2.235 4.427 2.262 7.01.027 2.604-.073 5.08-.595 7.649-.904 4.449-3.153 9.016-6.565 12.079-1.894 1.7-4.185 2.692-6.741 2.127-2.125-.469-3.729-2.514-4.087-4.577a9.948 9.948 0 0 1-.102-.798c-.424-2.004-.068-4.41.403-5.955z"/>
        <path fill="#06252D" d="M127.102 250.813a8.222 8.222 0 0 0 1.6 1.072 9.415 9.415 0 0 0 3.298.975c.479.052.98.077 1.5.074a16.957 16.957 0 0 0 3.441-.39 16.823 16.823 0 0 0 3.14-.997c.35-.15.694-.313 1.029-.488.038.175.078.345.121.507.777 2.929 2.606 4.13 4.006 4.614.9.313 1.81.505 2.698.57a9.213 9.213 0 0 0 5.755-1.434 11.5 11.5 0 0 0 1.075-.774c.058.103.12.203.187.304.048.08.1.16.155.238a8.032 8.032 0 0 0 1.783 1.844c1.385 1.043 3.088 1.674 4.815 1.915.123.021.246.034.37.049.12.014.243.026.367.037.103.005.207.015.31.018 2.346.092 4.531-.801 6.458-2.642.104-.097.207-.197.307-.3a8.586 8.586 0 0 0 3.721 3.641 9.646 9.646 0 0 0 3.419.986c.339.034.683.053 1.028.053h.256c3.766-.058 6.725-2.688 8.115-6.077a7.438 7.438 0 0 0 2.633.479c.068 0 .137 0 .203-.002.158-.003.318-.012.479-.029a8.513 8.513 0 0 0 1.687-.313 6.13 6.13 0 0 0 1.625-.72c.007-.003.013-.005.019-.009.002.004.006.006.008.009 1.727 1.915 4.111 3.258 6.67 3.375a7.468 7.468 0 0 0 1.721-.115 7.983 7.983 0 0 0 2.855-1.16c.863-.554 1.744-1.331 2.586-2.412a11.148 11.148 0 0 0 1.629-2.87c1.959 1.391 4.359 2.319 7.141 2.07a10.676 10.676 0 0 0 3.014-.731c2.32-.927 3.917-2.604 4.619-4.82.072-.229.135-.462.187-.703-6.552-4.479-12.302-10.54-13.881-18.454-2.509-12.568-18.487-4.13-32.529 6.173-12.94-9.069-26.682-15.32-29.73-3.913-2.909 10.873-11.606 16.958-19.89 20.35z"/>
        <path fill="#0D3842" d="M117.389 228.592c2.437 6.727 9.409 6.455 12.798 5.88-1.746 4.207.119 11.34 7.844 8.575 2.806-1.007 4.795-2.827 6.18-5.087-.44 3.903.3 7.157 3.377 7.724 3.994.74 6.668-1.019 8.509-3.813a2.6 2.6 0 0 0 .029.173c.493 3.052 2.038 5.313 5.769 5.177 3.065-.115 5.156-2.28 6.562-5.152.641 3.723 2.358 6.554 6.15 6.467 3.058-.065 4.82-3.188 5.74-7.129 1.063 1.727 2.612 2.93 4.853 2.302 1.056-.296 1.865-1.204 2.469-2.474 2.33 4.426 6.139 6.722 9.578 2.474 1.475-1.82 2.065-4.052 2.07-6.435 2.182 3.751 5.234 6.418 9.121 5.164 2.695-.866 3.575-3.376 3.473-6.5 2.772 3.058 5.174 4.651 9.442 1.771 1.509-1.015 1.582-3.911.999-5.907 5.292.637 6.441-.322 7.56-2.29.678-1.204.747-4.209.747-4.209-9.146-2.371-15.86-7.081-22.586-14.834a49.682 49.682 0 0 1-2.125-2.617c-2.609-3.427-4.597-6.969-5.686-10.342-.616-1.895-.945-3.73-.945-5.465 0 0-33.112-8.168-44.313-2.465-2.28 1.158-3.652 2.892-3.652 5.391 0 3.529-1.118 6.89-2.942 10.017a29.81 29.81 0 0 1-1.943 2.905c-9.393 12.515-29.078 20.699-29.078 20.699z"/>
        <path fill="#0B4F48" d="M148.827 217.166c-.115 1.819.84 4.161 2.708 4.449 2.13.328 3.784-.495 5.385-2.016a28.248 28.248 0 0 0-1.221 4.855c-.427 2.715-.29 6.436 2.324 7.8 4.417 2.308 7.702-2.345 9.633-6.267-.048 2.427.248 4.856 1.586 6.83.842 1.245 2.248 2.341 3.764 1.704 2.153-.9 3.399-2.838 4.168-5.072.662 1.1 1.512 1.98 2.586 2.429 1.258.525 2.551.212 3.547-.587.025.069.047.143.071.212.968 2.688 2.61 6.022 5.479 6.645 5.373 1.166 7.098-4.719 6.227-9.617 2.256 2.302 6.182 4.241 8.223.948.732-1.183.739-2.682.401-4.183a51.257 51.257 0 0 1 2.088 2.039c.247.195.495.388.744.578 2.138 1.629 5.13 3.926 7.81 3.707 4.383-.357 4.037-4.586 2.049-8.269a46.509 46.509 0 0 0 13.774 4.36c.12.02.237.03.354.037.517-1.264.57-2.32.57-2.32-8.979-2.462-18.674-9.377-25.458-17.064a52.217 52.217 0 0 1-2.112-2.541c-2.573-3.289-4.551-6.644-5.686-9.797-1.678-.37-3.346-.689-5.059-.796-3.799-.228-7.574.163-11.363.245-4.003.091-7.981.119-11.955.767-1.326.215-2.191 1.593-2.307 2.93a37.84 37.84 0 0 0-1.86.133c-.568-1.513-1.957-2.161-3.259-1.957a2.875 2.875 0 0 0-.922-.152c-1.245 0-2.854.971-3.086 2.368-.219 1.319-.531 2.627-.878 3.933-1.889 1.216-3.426 3.726-4.646 5.538-1.547 2.305-3.493 5.205-3.679 8.131z"/>
        <path fill="#06252D" d="M148.77 205.864c.822.633 1.844.96 3.003.96 1.058 0 2.249-.27 3.53-.806a11.799 11.799 0 0 0 1.588-.809c.058 1.567.336 2.897.832 3.963.792 1.708 2.125 2.762 3.959 3.129.42.083.836.125 1.24.125 2.525 0 4.621-1.571 6.23-4.648 1.452 3.504 3.813 5.361 6.896 5.361.616 0 1.267-.078 1.933-.229 2.361-.539 4.096-2.73 5.081-6.354 1.646 3.181 3.931 4.805 6.798 4.805.133 0 .271-.007.407-.012 2.097-.116 4.528-1.297 4.961-5.925 2.505 2.632 4.923 3.975 7.19 3.975 1.141 0 2.227-.351 3.221-1.035a52.772 52.772 0 0 1-2.111-2.541c-3.997-5.114-6.564-10.38-6.76-14.819 0 0-42.362-10.524-42.955 2.675-.146 3.271-1.303 6.42-3.115 9.392a30.792 30.792 0 0 1-1.928 2.793z"/>
        <path fill="#0D3842" d="M138.82 187.016c.308 1.713.813 3.045 1.442 4.072 1.22 1.992 2.896 2.847 4.441 3.163a8.653 8.653 0 0 0 2.708.099c-.058 1.447.205 2.897.854 4.035 1.113 1.968 3.369 3.012 7.054 1.521a10.44 10.44 0 0 0 2.152-1.171c.07 3.64 1.414 6.372 4.795 7 3.25.604 5.428-1.52 6.878-4.691 1.052 3.34 3.771 6.332 8.813 5.26 2.732-.588 4.314-3.743 5.025-7.643 1.278 3.62 3.468 6.372 7.19 6.18 3.386-.169 4.544-3.172 4.507-7.174 3.119 3.492 6.857 5.58 10.424 3.262 2.211-1.438 2.576-3.952 1.932-6.874h.127c8.541 1.003 9.549-7.038 9.549-7.038a40.96 40.96 0 0 1-2.018-1.072c-6.184-3.521-10.855-8.201-14.208-12.577-2.503-3.275-4.269-6.38-5.386-8.71 0 0-.982-.382-2.627-.962-4.671-1.643-14.654-4.86-22.457-5.292-2.251-.127-4.323-.017-6.028.423a9.168 9.168 0 0 0-1.216.398c-1.882.769-3.135 2.091-3.415 4.175-.398 2.958-1.68 5.793-3.427 8.41-5.674 8.509-16.217 14.693-17.059 15.177-.034.016-.05.029-.05.029z"/>
        <path fill="#0D3842" d="M205.318 191.198s1.115.954 1.719 2.855h.127c8.541 1.003 9.549-7.038 9.549-7.038-.765 2.483-5.223 5.934-11.395 4.183z"/>
        <path fill="#0B4F48" d="M158.642 185.847c1.433 2.805 4.964 4.007 7.346 1.435.166-.178.327-.369.485-.567a27.91 27.91 0 0 0 .705 4.108c.955 3.815 3.214 7.77 7.774 6.993 2.869-.489 4.729-2.814 5.736-5.676.906-1.702 1.451-3.679 1.604-5.594 1.155 1.889 2.695 3.433 4.877 4.259 1.812.688 3.695-.751 4.232-2.403.02-.057.033-.114.051-.169.104.15.201.305.307.453 1.145 1.644 2.363 3.47 3.961 4.72.711.556 1.543 1.082 2.422 1.418 1.478 1.047 3.16 1.782 4.87 1.442 3.565-.709 3.708-5.132 2.971-7.93-.386-1.471-.936-3.084-1.762-4.489 2.948 1.639 7.534 3.683 10.476 2.095-6.186-3.519-10.856-8.199-14.209-12.577-2.503-3.272-4.27-6.377-5.385-8.708 0 0-.983-.384-2.627-.963-1.133.057-1.983.617-2.537 1.437-.619-1.027-1.807-1.729-3.002-1.729-1.795 0-3.08 1.31-3.381 2.964-.037.009-.074.014-.115.025-.221.061-.436.15-.639.256.63-1.296.519-2.839-.6-3.96-1.216-1.213-3.481-1.399-4.743-.126-1.05-1.132-3.002-1.692-4.304-.697a8.695 8.695 0 0 0-.703.608c-.464-.59-1.104-1.049-1.807-1.242-.051-.014-.103-.022-.157-.035.347-1.046.101-2.03-.471-2.792-1.313-1.75-4.338-2.337-5.838.106a8.048 8.048 0 0 0-.189.318c-2.088 3.493-3.562 7.596-4.287 11.579-.332 1.828-.546 3.672-.506 5.475-1.345 3.093-2.173 6.799-.555 9.966zm15.475 1.44c-.037.078-.077.164-.114.247l-.018-.081c-.005-.066-.009-.135-.017-.204.052.012.1.026.149.038z"/>
        <path fill="#06252D" d="M155.932 171.808c.393 1.956 1.204 3.373 2.578 3.879 3.932 1.451 7.189-.794 9.391-4.763.814 2.406 2.434 4.482 5.577 4.069 1.552-.204 2.824-1.439 3.843-3.212 1.213 3.484 3.316 5.873 6.908 5.44l.191-.026a4.326 4.326 0 0 0 1.941-.785 5.607 5.607 0 0 0 1.318-1.391l.004-.003c.209-.31.406-.65.584-1.015.004-.003.004-.006.007-.009.581-1.198.985-2.658 1.243-4.261a16.123 16.123 0 0 0 1.66 2.458c1.412 1.703 3.051 2.767 4.875 2.85 1.253.058 2.596-.35 4.006-1.333.152-.106.293-.218.428-.341-2.503-3.272-4.27-6.377-5.385-8.708 0 0-34.118-13.302-35.744-1.255-.398 2.955-1.679 5.791-3.425 8.406z"/>
        <path fill="#0D3842" d="M148.665 157.117s0 .053.004.148c.049 1.257.752 10.177 10.781 7.93.214 2.165.982 3.771 2.564 4.232 3.143.912 5.731-.645 7.531-3.447.588 1.874 1.91 3.451 4.844 3.188 1.327-.118 2.404-1.146 3.254-2.625 1.036 2.687 2.807 4.491 5.798 4.076 2.416-.336 3.665-2.732 4.202-5.801 2.199 4.01 5.367 6.261 9.041 3.816 1.339-.891 1.807-2.473 1.68-4.424 3.857.834 7.133-.913 9.002-3.628a9.42 9.42 0 0 0 1.27-2.605c.09-.279.165-.567.227-.858 0 0-.887-.415-2.289-1.273a38.81 38.81 0 0 1-1.857-1.212 40.88 40.88 0 0 1-2.711-2.042 42.917 42.917 0 0 1-2.043-1.788c-.214-.193-.423-.398-.642-.604-.11-.115-.23-.23-.35-.345-.045-.045-.086-.091-.132-.132a12.642 12.642 0 0 0-.382-.39c-.036-.045-.082-.087-.122-.131a17.873 17.873 0 0 1-.371-.395c-.057-.062-.114-.119-.167-.185-.115-.123-.23-.247-.337-.369-.141-.153-.28-.313-.416-.469-.115-.131-.226-.262-.341-.394-.028-.033-.057-.066-.082-.103a27.705 27.705 0 0 1-.41-.497c-.128-.16-.26-.321-.387-.489-.119-.152-.242-.308-.354-.464a32.476 32.476 0 0 1-1.578-2.268 32.906 32.906 0 0 1-2.761-5.321 31.88 31.88 0 0 1-1.427-4.405 34.1 34.1 0 0 1-.59-3.103c-2.594-18.345-11.185-4.368-11.185-4.368s-8.719-8.041-11.627 4.286c-.111.46-.214.944-.304 1.463a50.21 50.21 0 0 1-1.512 6.27 42.955 42.955 0 0 1-1.287 3.563c-3.593 8.754-9.246 13.828-14.534 15.163z"/>
        <path fill="#0B4F48" d="M148.666 157.118s0 .051.003.146c1.689.643 19.805-5.094 19.149-16.263-.103-1.753-.361-2.867-1.667-2.537a2.664 2.664 0 0 0-1.666-.078c-.39 1.25-.82 2.437-1.285 3.564-3.595 8.759-9.249 13.832-14.534 15.168z"/>
        <path fill="#0B4F48" d="M167.709 157.895c.794 1.723 2.701 2.498 4.499 2.214 1.465-.229 2.692-1.523 3.354-2.778.095-.178.187-.361.278-.551.57 2.306 1.54 4.556 3.462 5.987a4.726 4.726 0 0 0 7.131-1.703c.966 1.417 2.21 2.506 3.727 2.733 2.295.344 4.783-.637 5.277-3.163.16-.812.209-1.687.146-2.561 2.305 1.62 5.061 2.672 7.652 2.944 1.367.144 2.834.041 4.129-.436a9.508 9.508 0 0 0 1.269-2.606 8.12 8.12 0 0 0 .226-.857s-.885-.416-2.285-1.273a41.587 41.587 0 0 1-4.57-3.255c-.143-.118-.287-.235-.431-.358a37.083 37.083 0 0 1-1.092-.952 20.392 20.392 0 0 1-.519-.476 27.367 27.367 0 0 1-.641-.608c-.117-.112-.232-.227-.35-.344-.045-.043-.089-.089-.132-.131l-.382-.391-.123-.128a36.531 36.531 0 0 1-.877-.95 26.351 26.351 0 0 1-.416-.47c-.111-.129-.227-.261-.338-.396a35.077 35.077 0 0 1-1.236-1.552 34.269 34.269 0 0 1-1.578-2.268 32.787 32.787 0 0 1-2.758-5.322c-1.201-.061-2.354 1.164-2.259 2.46-.331-.401-.659-.797-.993-1.19-.688-.817-1.7-.812-2.489-.361-.708-2.383-4.323-2.28-4.963-.164a2.86 2.86 0 0 0-.843-.734c-.058-.08-.112-.163-.172-.244-.672-.912-1.638-1.311-2.538-1.21a24.59 24.59 0 0 0 .31-3.51c.046-3.329-5.115-3.326-5.162 0 0 .075-.006.149-.008.225a2.442 2.442 0 0 0-.828 1.846c0 .198.02.404.068.623-1.511.693-1.947 3.171-.525 4.43-.791 2.558-1.783 5.073-2.517 7.647-.859 3.011-1.88 6.851-.503 9.833z"/>
        <path fill="#06252D" d="M163.201 141.952c.611 1.199 1.58 2.113 3.002 2.632 2.718.987 4.967-.152 6.807-2.415 1.299 3.055 3.467 5.638 6.953 4.565 1.598-.49 2.746-2.147 3.537-4.416.653.935 1.373 1.74 2.161 2.366 1.182.935 2.523 1.459 4.034 1.379a6.5 6.5 0 0 0 1.316-.212c1.383-.37 2.312-1.17 2.879-2.285-2.254-3.53-4.065-7.791-4.777-12.83-2.592-18.343-11.183-4.364-11.183-4.364s-9.379-8.651-11.932 5.746c-.65 3.675-1.61 6.955-2.797 9.834z"/>
        <path fill="#06252D" d="M184.621 142.082a5.689 5.689 0 0 1-2.828 4.913 5.68 5.68 0 0 1-8.541-4.912c0-1.89.92-3.564 2.34-4.597a5.648 5.648 0 0 1 3.343-1.09 5.686 5.686 0 0 1 5.686 5.686z"/>
        <path fill="#0B4F48" d="M156.109 129.799c0 4.622 4.121 7.281 8.34 3.948.025 2.544.925 4.557 3.345 5.362 2.358.781 4.306-.124 5.901-1.91 1.129 2.416 3.003 4.454 6.027 3.612 1.384-.391 2.374-1.702 3.064-3.493 1.656 2.161 3.788 3.455 6.508 2.79 2.572-.628 3.336-2.826 3.069-5.687.597.058 1.142.094 1.623.112 6.628.205 6.181-4.327 6.181-4.327-5.63-3.283-9.463-6.718-12.064-10.23-.008-.005-.012-.013-.02-.021-.029-.037-.059-.074-.084-.115-.007-.008-.012-.017-.02-.025a5.738 5.738 0 0 0-.201-.275 27.402 27.402 0 0 1-1.689-2.708 24.64 24.64 0 0 1-1.188-2.494 27.786 27.786 0 0 1-1.347-4.224 32.617 32.617 0 0 1-.329-1.611c-.02-.091-.032-.185-.049-.275-.189-1.105-.666-2.21-1.061-3.315-.291-.834-.538-1.664-.574-2.498l-3.621.436-3.191.382c-.1 1.319-.621 2.646-1.122 3.895-.361.908-.711 1.771-.88 2.572a42.613 42.613 0 0 1-.628 2.605 37.24 37.24 0 0 1-.765 2.404 31.624 31.624 0 0 1-1.413 3.348 28.327 28.327 0 0 1-.706 1.332 5.978 5.978 0 0 0-.953 1.471c-.045.094-.086.188-.132.287-.094.14-.189.271-.284.407-5.13 7.283-11.737 8.245-11.737 8.245z"/>
        <path fill="#0D3842" d="M156.109 129.799c0 4.622 4.121 7.281 8.34 3.948.025 2.544.925 4.557 3.345 5.362 5.846-11.98 9.626-27.726 10.127-36.259l-3.191.382c-.1 1.319-.621 2.646-1.122 3.895-.361.908-.711 1.771-.88 2.572a42.613 42.613 0 0 1-.628 2.605 37.24 37.24 0 0 1-.765 2.404 31.624 31.624 0 0 1-1.413 3.348 28.327 28.327 0 0 1-.706 1.332 5.978 5.978 0 0 0-.953 1.471c-.045.094-.086.188-.132.287-.094.14-.189.271-.284.407-5.131 7.284-11.738 8.246-11.738 8.246z"/>
        <path fill="#243327" d="M171.262 112.376c2.641-.989 10.771-3.14 13.071-3.896-.021-.092-.095-1.227-.112-1.318-.188-1.107-1.71-1.145-2.104-2.248l-8.508 2.213c-.363.906-1.49 1.856-1.66 2.656-.189.908-.459 1.764-.687 2.593z"/>
        <path fill="#CF2F2F" d="M184.293 108.127l-6.923 1.103-5.565.884c.102-.469.491-2.194.592-2.986.273-2.206.492-4.897.631-6.726.02-.184.704-.12.717-.276l.678-.035 8.02-.399c.066 1.572 1.521 2.751 1.781 5.005.032.27.032 1.104.035 1.886-.001.708.005 1.373.034 1.544z"/>
        <path fill="#FF553E" d="M184.293 108.127l-6.923 1.103-.007-.032c.317-1.823 4.676-2.773 4.676-2.773l2.219.158c0 .708.006 1.373.035 1.544z"/>
        <path fill="#243327" d="M166.798 121.237c.44-.505 1.237-1.746 1.306-1.877.166-.305 1.658-.981 1.818-1.306 3.558-.877 11.558-2.867 14.98-3.719.344.834 1.497.974 1.95 1.802.493.907 1.138 2.037 1.774 2.934-.85-1.11-3.237-1.805-8.001-1.203-5.16.657-14.386 4.009-13.827 3.369z"/>
        <path fill="#CF2F2F" d="M173.029 107.755l5.181-2.535s3.108-.129 5.052.532c-.26-2.251-.754-4.488-.82-6.058l-8.02.399-.719.546c-.14 1.828-.402 4.91-.674 7.116z"/>
        <path fill="#FF553E" d="M169.434 118.997l5.781-.751 11.784-1.835c-1.208-2.218-1.849-4.045-2.378-6.296l-8.137 2.658-5.148 1.936a30.479 30.479 0 0 1-1.902 4.288z"/>
        <path fill="#E02B27" d="M168.104 119.36l7.111-1.115c.488-2.01 1.002-4.294 1.27-5.473l-6.479 2.298a30.52 30.52 0 0 1-1.902 4.29z"/>
        <path fill="#FFDE52" d="M177.827 93.397l5.441-7.601 12.163 1.757z"/>
        <path fill="#FFDE52" d="M177.957 74.811l5.496 10.958.151.022-5.777 7.606z"/>
        <path fill="#FFB31A" d="M172.329 85.876l.032-.005 5.596-11.06-.109 18.593z"/>
        <path fill="#FFEF7E" d="M177.848 93.404l-17.585-5.813-.04-.038 12.131-1.753 5.494 7.604z"/>
        <path fill="#F8D033" d="M177.827 102.407l-10.88 5.686 10.901-14.706z"/>
        <path fill="#FFB31A" d="M188.707 108.126l-10.88-5.686.021-9.053z"/>
        <path fill="#FFDE52" d="M186.629 96.061l2.078 12.044-10.859-14.718z"/>
        <path fill="#FFB31A" d="M195.422 87.553l-8.803 8.53-8.771-2.696zM169.024 96.087l8.824-2.7-10.901 14.739z"/>
        <path fill="#FFB31A" d="M169.024 96.087l.001-.004-8.762-8.492 17.585 5.796z"/>
        <g>
            <path fill="#C62626" d="M186.055 139.214a5.63 5.63 0 0 1-.992 3.206 5.672 5.672 0 0 1-1.835 1.706 5.68 5.68 0 0 1-8.542-4.912c0-1.89.92-3.564 2.34-4.597a5.686 5.686 0 0 1 9.029 4.597z"/>
            <path fill="#FF4743" d="M186.055 139.214a5.63 5.63 0 0 1-.992 3.206c-4.307-.714-7.211-5.072-8.037-7.802a5.685 5.685 0 0 1 9.029 4.596zM183.228 144.125a5.68 5.68 0 0 1-7.991-2.469c2.376-.564 6.242 1.251 7.991 2.469z"/>
            <path opacity=".8" fill="#FFF" d="M181.391 134.655a.268.268 0 0 1 .027.007.54.54 0 0 1 .33.019c1.215.494 3.283 2.468 1.535 3.62-.684.451-1.642-.037-2.222-.433-.657-.448-1.241-1.035-1.321-1.865-.091-.974.768-1.501 1.651-1.348z"/>
        </g>
        <g>
            <path fill="#C62626" d="M169.696 133.384a3.816 3.816 0 0 1-1.021 2.609 3.85 3.85 0 1 1-2.83-6.461 3.853 3.853 0 0 1 3.851 3.852z"/>
            <path fill="#FF4743" d="M169.696 133.384a3.816 3.816 0 0 1-1.021 2.609c-3.426-.72-5.282-2.383-6.122-4.611a3.853 3.853 0 0 1 7.143 2.002z"/>
            <path opacity=".8" fill="#FFF" d="M166.385 130.379c.683-.135 1.297.212 1.527.859.441 1.243-1.574 1.81-2.028.022-.09-.357.117-.805.501-.881z"/>
        </g>
        <g>
            <circle fill="#06252D" cx="193.891" cy="160.692" r="4.986"/>
            <path fill="#C62626" d="M200.729 158.44c0 1.19-.402 2.288-1.076 3.166a5.223 5.223 0 0 1-1.918 1.545 5.205 5.205 0 0 1-6.781-2.231 5.165 5.165 0 0 1-.628-2.48c0-1.79.903-3.37 2.282-4.304a5.202 5.202 0 0 1 8.121 4.304z"/>
            <path fill="#FF4743" d="M200.729 158.44c0 1.19-.402 2.288-1.076 3.166-5.163 1.699-9.182-4.387-7.045-7.47a5.202 5.202 0 0 1 8.121 4.304z"/>
            <path opacity=".7" fill="#FFF" d="M194.896 154.808c.104-.13.222-.229.349-.304.133-.166.314-.298.528-.386 1.063-.442 2.343.248 3.004 1.08.861 1.084.884 2.483-.392 3.25-1.252.753-3.104-.366-3.671-1.533-.337-.696-.31-1.496.182-2.107z"/>
            <path fill="#FF4743" d="M197.734 163.151a5.205 5.205 0 0 1-6.781-2.231c2.735-.144 6.139 1.354 6.781 2.231z"/>
        </g>
        <g>
            <path fill="#06252D" d="M170.131 170.055c0 1.188.335 2.299.918 3.243a6.18 6.18 0 0 0 5.273 2.948 6.172 6.172 0 0 0 4.303-1.739 6.1 6.1 0 0 0 .969-1.205c.585-.944.92-2.058.92-3.248a6.19 6.19 0 0 0-6.191-6.192 6.17 6.17 0 0 0-4.524 1.964 6.17 6.17 0 0 0-1.668 4.229z"/>
            <path fill="#C62626" d="M171.949 168.098c0 .386.04.765.123 1.127a5.298 5.298 0 0 0 7.817 3.469c.188-.106.365-.227.537-.356a5.282 5.282 0 0 0 2.124-4.24 5.273 5.273 0 0 0-1.195-3.352 5.29 5.29 0 0 0-5.381-1.793 5.317 5.317 0 0 0-3.061 2.103 5.25 5.25 0 0 0-.964 3.042z"/>
            <path fill="#FF4743" d="M179.092 170.778c1.85-.007 3.537-2.456 2.609-4.582-1.157-2.653-3.691-3.231-4.373-3.231a4.96 4.96 0 0 0-1.187.145c-.802.381-1.426 1.018-1.597 1.82-.608 2.9 1.491 5.859 4.548 5.848z"/>
            <path opacity=".8" fill="#FFF" d="M177.597 164.157a.945.945 0 0 1 .299-.147.826.826 0 0 1 .576-.031c.737.21 1.368.837 1.785 1.458.218.326.378.81.228 1.194-.216.555-.711.821-1.299.781-.523-.037-.855-.274-1.252-.587-.318-.251-.645-.582-.812-.955-.299-.669-.114-1.281.475-1.713z"/>
            <path opacity=".8" fill="#FF4743" d="M172.072 169.225a5.298 5.298 0 0 0 7.817 3.469c-.588-.522-6.196-3.389-7.817-3.469z"/>
        </g>
        <g>
            <path fill="#06252D" d="M144.418 192.322c0 .671.098 1.318.284 1.93a8.655 8.655 0 0 0 2.709.098c-.06 1.448.204 2.896.852 4.035a6.7 6.7 0 0 0 9.337-4.331 6.702 6.702 0 0 0-6.337-8.432c-.046-.003-.095-.003-.141-.003a6.704 6.704 0 0 0-6.704 6.703z"/>
            <path fill="#CD303B" d="M147.733 189.845a5.569 5.569 0 0 0 2.612 4.723 5.55 5.55 0 0 0 2.968.854 5.563 5.563 0 0 0 3.906-1.597 5.578 5.578 0 1 0-9.486-3.98z"/>
            <path fill="#FF4743" d="M149.219 186.06c.597 3.831 4.519 6.584 8 7.766a5.578 5.578 0 1 0-8-7.766z"/>
            <path opacity=".8" fill="#FFF" d="M153.979 185.817c.644-.279 1.252-.108 1.783.32.411.331.791.893.729 1.446-.036.322-.192.6-.526.692-.921.252-1.66-.584-2.244-1.477-.193-.297-.1-.825.258-.981z"/>
            <path opacity=".8" fill="#FF4743" d="M147.733 189.845a5.569 5.569 0 0 0 2.612 4.723c.307-2.75-2.096-7.101-2.244-6.713a5.539 5.539 0 0 0-.368 1.99z"/>
        </g>
        <g>
            <ellipse fill="#06252D" cx="172.81" cy="198.263" rx="4.336" ry="4.345"/>
            <path fill="#E02B27" d="M177.507 196.349a4.031 4.031 0 0 1-1.328 2.996 4.008 4.008 0 0 1-2.71 1.052 4.042 4.042 0 0 1-4.041-4.048c0-.944.327-1.818.875-2.508a4.018 4.018 0 0 1 3.166-1.537 4.044 4.044 0 0 1 4.038 4.045z"/>
            <path fill="#FF4743" d="M177.507 196.349c0 .885-.284 1.703-.766 2.37-4.063-.609-5.709-2.867-6.438-4.878a4.018 4.018 0 0 1 3.166-1.537 4.044 4.044 0 0 1 4.038 4.045z"/>
            <path opacity=".7" fill="#FFF" d="M174.051 193.831c.172-.078.336-.152.529-.139a1.318 1.318 0 0 1 .271.048l.018.003a.71.71 0 0 1 .434.2c.189.19.375.389.459.652.097.304.012.626-.156.889-.164.258-.5.438-.81.329-.557-.195-.922-.598-1.074-1.172-.076-.287.04-.677.329-.81z"/>
            <path fill="#FF4743" d="M176.18 199.345a4.008 4.008 0 0 1-2.71 1.052 4.042 4.042 0 0 1-3.943-3.166c2.028.304 5.049 1.128 6.653 2.114z"/>
        </g>
        <g>
            <path fill="#06252D" d="M183.229 209.179c0 1.531.433 2.963 1.184 4.18a7.969 7.969 0 0 0 6.796 3.799 7.943 7.943 0 0 0 5.543-2.24 7.936 7.936 0 0 0 2.435-5.739 7.977 7.977 0 0 0-7.978-7.979 7.96 7.96 0 0 0-5.831 2.531 7.95 7.95 0 0 0-2.149 5.448z"/>
            <path fill="#E02B27" d="M184.92 206.621c0 1.422.402 2.753 1.099 3.882a7.405 7.405 0 0 0 6.314 3.53 7.374 7.374 0 0 0 5.149-2.081 7.371 7.371 0 0 0 1.162-1.442 7.412 7.412 0 0 0-11.727-8.95 7.388 7.388 0 0 0-1.997 5.061z"/>
            <path fill="#FF4743" d="M186.917 201.56c1.276 4.771 6.771 7.579 11.728 8.95a7.412 7.412 0 0 0-6.311-11.302 7.392 7.392 0 0 0-5.417 2.352z"/>
            <path opacity=".8" fill="#FFF" d="M192.58 202.274c-.035-1.156 1.091-1.638 2.064-1.45.58.061 1.096.364 1.55.761.506.438.948 1.104.987 1.787.027.465-.163.815-.466 1.051a1.645 1.645 0 0 1-.979.471c-.451.055-.916-.124-1.33-.373-.843-.403-1.796-1.279-1.826-2.247z"/>
            <path fill="#FF4743" d="M186.019 210.503a7.405 7.405 0 0 0 6.314 3.53 7.374 7.374 0 0 0 5.149-2.081c-4.251-1.667-8.474-1.852-11.463-1.449z"/>
        </g>
        <g>
            <path fill="#06252D" d="M144.899 213.747c0 5.408 4.385 9.789 9.79 9.789a9.799 9.799 0 0 0 9.171-6.345 9.773 9.773 0 0 0 .622-3.443c0-5.409-4.385-9.79-9.793-9.79a9.786 9.786 0 0 0-9.79 9.789z"/>
            <path fill="#C12727" d="M148.806 211.072c0 1.787.539 3.447 1.468 4.823a8.649 8.649 0 0 0 7.194 3.84 8.601 8.601 0 0 0 5.055-1.629 8.657 8.657 0 0 0 3.06-3.985 8.657 8.657 0 0 0 .551-3.049c0-4.785-3.88-8.662-8.666-8.662a8.5 8.5 0 0 0-2.374.333 8.657 8.657 0 0 0-6.288 8.329z"/>
            <path fill="#FF4743" d="M152.499 208.521a7.743 7.743 0 0 0 7.742 7.742c2.07 0 3.954-.814 5.342-2.142a8.657 8.657 0 0 0 .551-3.049c0-4.785-3.88-8.662-8.666-8.662a8.5 8.5 0 0 0-2.374.333 7.707 7.707 0 0 0-2.595 5.778z"/>
            <path opacity=".7" fill="#FFF" d="M159.018 205.534c.091-.616.866-.955 1.411-.801.126.036.25.079.37.128.248.033.494.142.71.311.978.761 1.617 1.87 1.442 3.123-.075.533-.645.793-1.106.842-.915.098-1.696-.595-2.196-1.278-.503-.687-.755-1.479-.631-2.325z"/>
            <path opacity=".8" fill="#FF4743" d="M150.274 215.896a8.649 8.649 0 0 0 7.194 3.84 8.601 8.601 0 0 0 5.055-1.629c-3.432-1.136-8.479-2.579-12.249-2.211z"/>
        </g>
        <g>
            <path fill="#CD303B" d="M162.168 242.469a6.513 6.513 0 0 1-2.52 5.155 6.566 6.566 0 0 1-1.715.963 6.472 6.472 0 0 1-2.299.416 6.534 6.534 0 0 1-3.384-12.129 6.535 6.535 0 0 1 9.918 5.595z"/>
            <path fill="#FF4743" d="M162.168 242.469a6.513 6.513 0 0 1-2.52 5.155c-6.045-1.97-7.077-7.039-7.398-10.75a6.535 6.535 0 0 1 9.918 5.595z"/>
            <path opacity=".8" fill="#FFF" d="M156.943 237.605c.306-.07.62-.02.907.105.036.007.07.012.107.023 1.081.359 2.004 1.294 1.938 2.494-.031.559-.387 1.116-.973 1.207-.578.089-1.118-.128-1.571-.479-.666-.516-1.262-1.274-1.365-2.123-.069-.57.436-1.104.957-1.227z"/>
            <path opacity=".8" fill="#FF4743" d="M157.933 248.587a6.472 6.472 0 0 1-2.299.416 6.534 6.534 0 0 1-6.171-4.375c1.545.028 4.069.983 8.006 3.483.229.147.381.305.464.476z"/>
        </g>
        <g>
            <path fill="#06252D" d="M173.074 259.123c0 1.317.371 2.551 1.018 3.598a6.859 6.859 0 0 0 5.85 3.271 6.84 6.84 0 0 0 4.771-1.929 6.838 6.838 0 0 0 1.076-1.337 6.824 6.824 0 0 0 1.02-3.603 6.867 6.867 0 0 0-11.886-4.689 6.845 6.845 0 0 0-1.849 4.689z"/>
            <path fill="#C12727" d="M188.472 255.719a6.368 6.368 0 0 1-1.044 3.501 6.506 6.506 0 0 1-1.025 1.208 6.364 6.364 0 0 1-4.326 1.686 6.382 6.382 0 0 1-5.697-3.5 6.347 6.347 0 0 1-.693-2.895c0-1.616.598-3.085 1.586-4.209a6.365 6.365 0 0 1 4.805-2.182 6.395 6.395 0 0 1 6.394 6.391z"/>
            <path opacity=".8" fill="#FF4743" d="M186.402 260.428a6.364 6.364 0 0 1-4.326 1.686 6.382 6.382 0 0 1-5.697-3.5c3.019.035 6.869.488 10.023 1.814z"/>
            <path fill="#FF4743" d="M188.472 255.719a6.368 6.368 0 0 1-1.044 3.501c-4.551-.86-7.823-4.222-10.156-7.71a6.365 6.365 0 0 1 4.805-2.182 6.395 6.395 0 0 1 6.395 6.391z"/>
            <path opacity=".7" fill="#FFF" d="M182.971 251.313c.313-.434.742-.642 1.281-.521.338.075.65.206.937.378.03.014.062.023.091.039a2.47 2.47 0 0 1 1.139 1.271c.008.016.018.028.025.044.139.268.175.566.113.841-.037.6-.322 1.256-.943 1.431-.38.108-.756.1-1.137.005-1.381-.343-2.407-2.244-1.506-3.488z"/>
        </g>
        <g>
            <path fill="#06252D" d="M206.971 257.95a4.255 4.255 0 1 0 6.984 3.263 4.253 4.253 0 0 0-2.731-7.516 4.238 4.238 0 0 0-3.632 2.045 4.206 4.206 0 0 0-.621 2.208z"/>
            <path fill="#FF4743" d="M207.88 255.35a4.036 4.036 0 0 0 4.037 4.037 4.033 4.033 0 0 0 4.037-4.037 4.039 4.039 0 0 0-4.037-4.038 4.022 4.022 0 0 0-3.447 1.942 3.974 3.974 0 0 0-.59 2.096z"/>
            <path fill="#FF9792" d="M212.955 252.314c.326-.128.621-.088.941.035a.704.704 0 0 1 .334.275.664.664 0 0 1 .205.262c.123.28.136.571-.047.832-.173.247-.497.373-.791.352-.486-.036-.814-.394-1.008-.811-.157-.343.007-.804.366-.945z"/>
            <path fill="#DD2F2F" d="M207.879 255.35a4.036 4.036 0 0 0 6.629 3.097c-3.451-.114-6.104-2.766-6.039-5.192a3.977 3.977 0 0 0-.59 2.095z"/>
        </g>
        <g>
            <path fill="#C12727" d="M177.248 288.172c0 .8.095 1.577.275 2.319a9.797 9.797 0 0 0 17.949 2.662 9.767 9.767 0 0 0 1.359-4.98c0-5.408-4.384-9.793-9.793-9.793a9.745 9.745 0 0 0-5.786 1.893 9.809 9.809 0 0 0-2.473 2.639 9.755 9.755 0 0 0-1.531 5.26z"/>
            <path fill="#EF4136" d="M181.254 280.271c2.024 4.654 6.424 8.694 14.22 12.881a9.767 9.767 0 0 0 1.359-4.98c0-5.408-4.384-9.793-9.793-9.793a9.75 9.75 0 0 0-5.786 1.892z"/>
            <path fill="#FFF" d="M189.634 281.568c.345-.989 2.163-.999 3.183.537.406.611.445 1.752-.324 2.105-.401.186-.813.141-1.195-.014a1.976 1.976 0 0 1-.654-.373 4.257 4.257 0 0 1-.282-.223c-.575-.485-.991-1.274-.728-2.032z"/>
            <path opacity=".6" fill="#EF4136" d="M180.861 295.768a9.75 9.75 0 0 0 6.179 2.196 9.766 9.766 0 0 0 7.356-3.329c-3.257-1.606-15.165-.194-13.535 1.133z"/>
        </g>
        <g>
            <path fill="#C12727" d="M140.845 277.021a6.981 6.981 0 0 0 6.974 6.979h.005a6.932 6.932 0 0 0 4.267-1.459 6.95 6.95 0 0 0 2.716-5.52 6.98 6.98 0 0 0-6.982-6.979 6.97 6.97 0 0 0-6.695 5.006 6.84 6.84 0 0 0-.285 1.973z"/>
            <path opacity=".8" fill="#FF4743" d="M143.113 271.868c.645 7.025 4.456 9.451 8.978 10.673a6.95 6.95 0 0 0 2.716-5.52 6.98 6.98 0 0 0-6.982-6.979 6.97 6.97 0 0 0-4.712 1.826z"/>
            <path opacity=".7" fill="#FFF" d="M147.911 272.791c.179-1.053 1.45-1.379 2.338-1.084.925.308 1.718 1.143 2.061 2.044.286.753.086 1.394-.4 1.779l-.031.041c-.71.832-1.979.377-2.668-.192-.731-.603-1.47-1.584-1.3-2.588z"/>
            <path opacity=".8" fill="#FF4743" d="M140.845 277.021a6.981 6.981 0 0 0 6.974 6.979c-1.658-3.338-4.448-6.583-6.69-8.952a6.875 6.875 0 0 0-.284 1.973z"/>
        </g>
        <path fill="#FF3B44" d="M170.877 112.838c0 .017.004.014.009-.014-.005.006-.009.011-.009.014z"/>
        <g>
            <path fill="#C7DDF2" d="M196.167 292.688c-4.171 1.736-7.614 4.687-11.059 8.231 0 0 2.292.458 6.187 1.079 7.989 1.272 22.719 3.23 38.229 3.303 6.22.029 13.164-.388 19.996-1.012 2.639-.241 6.941-1.692 9.465-1.559 12.03.634 27.327-2.642 21.854-6.168-6.313-4.069-19.767-9.319-38.956-10.314-23.908-1.239-38.804 3.56-45.716 6.44zM168.896 302.284s-1.93.313-5.274.765a389.568 389.568 0 0 1-13.804 1.613c-6.425.636-14.013 1.235-22.019 1.547-2.007.076-4.039.136-6.086.174-7.756.143-13.985-2.842-25.291-1.68-14.003 1.439-33.704-4.332-30.111-6.234 7.09-3.753 22.164-7.953 35.437-9.867 18.025-2.6 33.389-1.733 49.962 4.428 4.897 1.822 9.667 4.329 14.41 7.395.925.598 1.851 1.22 2.776 1.859z"/>
            <path fill="#94A9E0" d="M64.311 299.983c8.241 10.354 41.321 9.439 49.076 9.297 24.632-.451 52.028-7.806 52.028-7.806-5.658-3.922-8.975-6.668-16.159-8.993-24.934 1.48-61.49 15.532-84.945 7.502zM185.109 300.92s26.939.639 54.605 4.381c7.216.976 25.108 1.48 43.51-2.57-24.036 1.003-68.648-13.895-89.409-10.486-5.663 1.396-4.473 5.127-8.706 8.675z"/>
        </g>
        <path fill="#C7DDF2" d="M246.74 305.011s-64.758-27.071-124.591-3.7c-12.831 5.012-5.978 5.792 1.01 6.491 75.015 7.501 123.581-2.791 123.581-2.791z"/>
        <path fill="#3B538B" d="M278.528 298.344l23.771-26.989 9.4-15.592"/>
        <g>
            <path fill="#438ED1" d="M285.75 290.376s-.417 22.291-109.75 23.485c-3.815.042-12-1.028-17 0-23.442 4.821-94.844-13.003-94.844-13.003-9.588 13.448-35.287 61.665-32.18 72.436 1.771 12.682 62.425 22.867 136.992 22.867 74.566 0 135.223-10.186 136.993-22.867 3.109-10.771-12.733-68.952-20.211-82.918z"/>
            <path fill="none" stroke="#FFF" stroke-width="2" stroke-miterlimit="10" d="M59.169 297.606c-33.237-30.004-54.126-73.43-54.126-121.735 0-90.551 73.405-163.957 163.958-163.957 90.55 0 163.956 73.406 163.956 163.957 0 48.307-20.892 91.736-54.134 121.742v-.001c-14.156 12.346-60.891 16.249-109.823 16.249-49.621 0-91.454-6.459-109.831-16.255z"/>
            <path fill="#FFF" fill-opacity=".5" d="M27.4 186.428c0-83.668 67.827-151.496 151.497-151.496 40.998 0 78.186 16.292 105.461 42.748-27.79-32.613-69.155-53.305-115.357-53.305-83.67 0-151.497 67.828-151.497 151.496 0 42.671 17.647 81.214 46.036 108.749-22.532-26.446-36.14-60.726-36.14-98.192z"/>
            <text transform="matrix(1 0 0 1 89.8706 358)" fill="#FFFFFF" font-family="'Mountains of Christmas' " font-size="25" font-weight="bold">Merry Christmas</text>
        </g>
        </svg>
    </div>
</div>
            
          
!
            
              html, body {
    margin:0;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(180,186,214,1) 0%, rgba(232,203,192,1) 100%);
}
  
.header {text-align: center; margin: 30px 0;}
.social a img { height: 1.5em; }

.content {
    text-align: center;
    width: 100%;
}

svg {
    max-width: 575px;
}

#canvas {
    border-radius: 50%;
    position: relative;
    width: 310px;
    height: 290px;
    top: 10px;
    left: 0px;
}

.canvas_container {
    position: absolute;
    width: 100%;
}

.draw_container {
    position: absolute;
    top: 50px;
    width: 100%;
}
            
          
!
            
              $(function() {
    var canvas = $("#canvas")[0];
    var ctx = canvas.getContext("2d");
    var WIDTH = 320;
    var HEIGHT = 320;
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
    clearCanvas();

    var particles = [];
    for (var i = 0; i < WIDTH; i++) {
        particles.push({
            x: Math.random() * WIDTH,
            y: Math.random() * HEIGHT,
            r: Math.random() * 2 + 1
        })
    }
    
    function draw() {
        clearCanvas();
        ctx.fillStyle = "rgba(255, 255, 255, 0.6)";
        ctx.beginPath();

        for (let i = 0; i < WIDTH; i++) {
            let p = particles[i];
            ctx.moveTo(p.x, p.y);
            ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, true);
        }
        ctx.fill();
        update();
    }
    
    function update() {
        for (let i = 0; i < WIDTH; i++) {
            let p = particles[i];
            p.y += p.r;
            if (p.y > canvas.height) {
                particles[i] = {
                    x: Math.random() * canvas.width,
                    y: -10,
                    r: p.r
                };
            }
        }
    }
    var timer = setInterval(draw, 50);

    function clearCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

})
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console