Skip to content

Instantly share code, notes, and snippets.

@milindsingh

milindsingh/bb8-from-starwars-with-svg-gsap.markdown

Created February 12, 2021 20:44
Show Gist options
  • Save milindsingh/f64379964b7e8e8c751ee6177691db61 to your computer and use it in GitHub Desktop.
Save milindsingh/f64379964b7e8e8c751ee6177691db61 to your computer and use it in GitHub Desktop.
Download ZIP
BB8 from Starwars ⚾️ – with SVG & GSAP
Raw
bb8-from-starwars-with-svg-gsap.markdown

BB8 from Starwars ⚾️ – with SVG & GSAP

Droids 🤖

Link: BB8 reference on Youtube

I'm not a blockbuster kind of guy, but I just can't resist when it comes to Starwars. It's such a captivating saga. The divine Force that connects us all, the inner battle against evil, and of course the little companion droids. BB8 is such a well designed character. While recognising some reused features from R2D2's lovable personality, we also so see a reinvented droid with his own quirky style and functionality.

Making a BB8 graphic (SVG) and bringing him to life (GSAP) was my way of getting some quality time and getting to know the little guy.

Null objects 🅾️

// Tween null object from 0 to 100 over 1 second
null = { value: 0 }
TweenMax.to(null, 1, { value: 100 })

In this exploration I mainly wanted to try out this idea I had about creating the javascript equivalent of a concept from After Effects called null object. It basically means that you animate the value of an non-visual element and connect that value to one or many visual elements that should depend equally on that value. In this case that means that I could set up the relationship between all the parallaxing elements of the head once and then control them in perfect sync by only tweening the null object. It's really powerful.

Search for headNull in the javascript.

It's a first rough draft of the concept and can for sure be developed to be both smarter and more straight forward. Next time I'll do it I'll simply create an object called null and then add descriptive properties to it, such as headX and headRotation, and tween those. It'll keep everything smart, readable and confined.

Superior UX , tech and bla bla bla 🚀

I always feel like emphasising the greatness of these methods and technologies. Be sure to check out GSAP if you're unfamiliar. It really takes vector animation to a new level. It's also important to stress that this stuff weighs virtually nothing compared to other online media. You can create 10 animations like this and load for the same cost as one optimised image. It enables us to load websites super fast and use a more emotional language when communicating to people. Same goes for interactivity. It's super easy to draw inspiration from games and immersive experiences to make websites more interactive, engaging and meaningful.

❤️ Did you notice you can hover him for slow motion? ❤️

A Pen by Nerdmanship on CodePen.

License.

Raw
index.html
<section id="header">
<svg class="artwork" data-bb8="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 2935 2935" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id="path-1" data-bb8="largeMask" cx="1467.5" cy="1467.5" r="1467.5"></circle>
<path id="path-3" d="M0 10h3378v1068H0z"></path>
<mask id="mask-4" width="3378" height="1068" x="0" y="0" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<lineargradient id="linearGradient-5" x1="50%" x2="50%" y1="0%" y2="65.101%">
<stop stop-color="#9B775B" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#BE9371" stop-opacity=".742" offset="52.792%"></stop>
<stop stop-color="#CA9D79" offset="99.968%"></stop>
</lineargradient>
<circle id="path-6" cx="412" cy="412" r="412"></circle>
<path id="path-8" d="M-488.933-686.737h1860.777V1174.04H-488.933z"></path>
<mask id="mask-9" width="1860.777" height="1860.777" x="0" y="0" fill="white">
<use xlink:href="#path-8"></use>
</mask>
<lineargradient id="linearGradient-10" x1="48.662%" x2="48.662%" y1="36.666%" y2="87.375%">
<stop stop-color="#000000" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#000000" offset="100%"></stop>
</lineargradient>
<circle id="path-11" cx="412.747" cy="412.128" r="412"></circle>
<path id="path-13" d="M264 370.683c244.5 0 241.808-41.645 241.808-41.645s13.634-2.917 14.683-7.156c4.91-19.82 7.51-40.528 7.51-61.835C528 116.427 409.803 0 264 0S0 116.427 0 260.047c0 21.157 2.565 41.724 7.405 61.415 1.764 7.177 19.336.646 21.69 7.576 2.355 6.93-9.596 41.645 234.905 41.645z"></path>
<path id="path-15" d="M0 7h1174v66H0z"></path>
<mask id="mask-16" width="1174" height="66" x="0" y="0" fill="white">
<use xlink:href="#path-15"></use>
</mask>
<rect id="path-17" width="42" height="12" x="312" y="18" rx="6"></rect>
<mask id="mask-18" width="42" height="12" x="0" y="0" fill="white">
<use xlink:href="#path-17"></use>
</mask>
<rect id="path-19" width="42" height="12" x="312" y="36" rx="6"></rect>
<mask id="mask-20" width="42" height="12" x="0" y="0" fill="white">
<use xlink:href="#path-19"></use>
</mask>
<path id="path-21" d="M61 0h884v36H61z"></path>
<mask id="mask-22" width="884" height="36" x="0" y="0" fill="white">
<use xlink:href="#path-21"></use>
</mask>
<path id="path-23" d="M0 51h1060v16H0z"></path>
<mask id="mask-24" width="1060" height="16" x="0" y="0" fill="white">
<use xlink:href="#path-23"></use>
</mask>
<lineargradient id="linearGradient-25" x1="50%" x2="50%" y1="0%" y2="61.269%">
<stop stop-color="#7F7268" offset="0%"></stop>
<stop stop-color="#35240B" offset="100%"></stop>
</lineargradient>
<path id="path-26" d="M458.955 92h-87.96c-5.51 0-9.995 4.475-9.995 9.994v47.012c0 5.52 4.475 9.994 9.995 9.994h144.96c-30.5-8.378-53.546-34.758-57-67z"></path>
<mask id="mask-27" width="154.954" height="67" x="0" y="0" fill="white">
<use xlink:href="#path-26"></use>
</mask>
<path id="path-28" d="M287.955 92H9.995C4.485 92 0 96.475 0 101.994v47.012C0 154.526 4.475 159 9.995 159h334.96l-57-67z"></path>
<mask id="mask-29" width="344.954" height="67" x="0" y="0" fill="white">
<use xlink:href="#path-28"></use>
</mask>
<path id="path-30" d="M632.244 93H813.99c5.528 0 10.01 4.482 10.01 10.003v92.994c0 5.524-4.478 10.003-10.01 10.003H619.01c-5.528 0-10.01-4.482-10.01-10.003v-57.112c12.396-11.952 20.856-27.96 23.244-45.885z"></path>
<mask id="mask-31" width="215" height="113" x="0" y="0" fill="white">
<use xlink:href="#path-30"></use>
</mask>
<path id="path-32" d="M872.244 93h181.746c5.528 0 10.01 4.482 10.01 10.003v92.994c0 5.524-4.478 10.003-10.01 10.003H859.01c-5.528 0-10.01-4.482-10.01-10.003v-57.112c12.396-11.952 20.856-27.96 23.244-45.885z"></path>
<mask id="mask-33" width="215" height="113" x="0" y="0" fill="white">
<use xlink:href="#path-32"></use>
</mask>
<lineargradient id="linearGradient-34" x1="50%" x2="50%" y1="13.3%" y2="100%">
<stop stop-color="#000000" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#000000" offset="100%"></stop>
</lineargradient>
<path id="path-35" d="M264 370.683c244.5 0 241.808-41.645 241.808-41.645s13.634-2.917 14.683-7.156c4.91-19.82 7.51-40.528 7.51-61.835C528 116.427 409.803 0 264 0S0 116.427 0 260.047c0 21.157 2.565 41.724 7.405 61.415 1.764 7.177 19.336.646 21.69 7.576 2.355 6.93-9.596 41.645 234.905 41.645z"></path>
<ellipse id="path-37" cx="54.36" cy="54.36" rx="54.36" ry="54.36"></ellipse>
</defs>
<g id="comp" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="artwork" mask="url(#mask-2)">
<g id="background">
<g id="sky" transform="translate(-199 -115)">
<use fill="#DDBE9A" stroke="#979797" stroke-width="2" mask="url(#mask-4)" xlink:href="#path-3"></use>
<path id="clouds" fill="#E0C39F" d="M385.2 669.795c5.423-1.59 458.03-283.254 462.624-266.534 148.17-11.437 137.33-19.674 130.025-21.598 5.576 18.858 9.566 22.728 12.03 27.448 6.002 11.49 13.082 22.663 16.767 35.092 2.817 9.503 6.612 20.652 2.423 29.634-5.173 11.092-17.774 16.908-27.56 24.26-239.206 9.69-224.056 117.825-169.642 105.166 73.37-17.068 3.16 2.7 31.584-19.468 33.838-7.37 58.542-16.864 83.86-24.37 69.814-20.81 86.705-26.175 103.79-30.762 74.546 17.09 111.054 22.43 147.583 27.53 74.677-26.923 255.056-47.828 242.336-107.17-5.07-23.66-49.42-23.68-60.8-26.446-43.71-10.62-45.668-13.813-89.89-40.05-12.76-7.572-26.825-13.77-37.32-24.26-23.77-23.753 27.303-56.29 15.93-82.063-48.27-18.264-75.43-25.28-103.078-26.863-238.808-3.932-188.848-32.874-187.133-34.146 25.984-19.28 51.22-39.562 77.19-58.864 9.166-6.814 18.36-13.667 28.198-19.468 32.696-14.094 42.206-16.716 51.874-17.38 83.15 3.685 99.122 16.005 116.906 22.978 18.26 7.158 36.607 14.307 55.55 19.384 131.615-11.135 154.39-30.327 181.772-38.017 156.148-20.927 195.8-29.343 235.763-35.9 58.6 65.25-89.165 8.933-196.214 82.412 10.203-2.526 21.016-12.205 32.976-20.193 14.42-9.632 29.162-18.784 44.06-27.657 19.355 27.086 5.134 18.424 44.507 38.658 45.013 14.337 57.405 14.02 69.225 16.725-16.518 14.462-37.012 23.356-57.57 31.89-31.884 13.236-64.667 24.213-96.713 37.056 65.59 26.036 13.968 43.697 33.1 49.798 81.206-18.105 83.215-28.426 89.71-28.73 44.628 22.067 28.273 30.38 13.258 40.748-16.444 11.353-57.68 18.85-47.78 36.206 211.92-14.706 266.232-13.785 320.46-15.304 44.348-16.094 79.62-34.117 116.725-47.5 55.047-53.54 63.492-93.4 55.174-131.445-9.858-45.088-55.304-41.417-75.784-73.737-1.907-3.01-8.3-30.32-3.565-36.68 6.638-8.916 16.462-15.073 25.72-21.223 10.665-7.085 22.838-11.636 33.77-18.3 18.48 16.127 53.922 18.8 89.39 20.444 88.62 18.556 74.432 25.835 61.816 34.647-19.67 13.74-40.3 26.084-59.84 40.01-12.678 9.035-25.187 18.4-36.75 28.825-5.622 5.07-16.154 10.036-14.552 17.434 197.987 30.374 149.25 81.416 111.837 110.863-29.42 23.157-60.27 44.463-89.612 67.72-9.6 7.61-15.987 19.68-27.113 24.802-27.27 12.55-56.93 19.16-85.852 27.196-33.03 9.177-66.223 18.024-99.903 24.412-44.055 8.356-88.642 13.637-133.06 19.775-229.997 6.058-230.254 12.158-233.075 14.482-20.76 13.714-26.653 19.352-32.252 25.22-11.97 16.96-16.11 23.41-19.176 30.372-5.298 19.74-7.84 25.282-4.707 26.57 185.335 3.804 185.18 15.932 192.398 20.304 45.44 27.52 89.423 13.572 140.97 16.043 610.213 77.047 90.993 24.993 218.453 23.813 7.55-.07 9.77 19.476 9.943 19.914 25.295 63.827 3.482 34.482 32 50.035 517.566 6.252-1850.48 57.868-1742.76 26.26z"></path>
</g>
<g id="mtns">
<g id="Group-2">
<g id="mtn3">
<path id="mtn-highlight" fill="#CB9D79" d="M-639.91 886.432l144.608-62.398 64.896-39.327 59.642-25.885 39.602-2.95 33.96-17.834 16.242-3.22 28.278-14.315 36.394-3.383 48.828-26.32 15.52-29.3 29.204 8.604 25.814-5.424 60.385-23.018 73.338-26.09 35.448-19.83h29.877l37.728-24.888 3.503-10.204 45.783-11.295 55.852-18.572 28.666-12.86h28.532l57.168-16.58 40.192-2.246 44.02-17.07 39.287-10.323 18.543-2.516 3.575-9.887 21.11-13.487 23.013 18.385 39.204 4.386L613.932 496l23.686 23.423 29.776 29.657 24.357 2.363 29.95 13.74 7.474 23.87 38.227 4.22 34.44 1.244 1.415 12.79 36.903 7.12 40.63 14.93 12.14 8.91 2.015 9.476 23.96 4.586 31.232 8.32 37.35 9.718 10.978 17.007 33.943 14.234 18.194 19.242h44.033l17.715 10.852 15.19 12.785 33.06 18.502 52.368 16.676 56.952 12.85h34.81l35.852 5.93 22.722 24.09 57.587 25.116 47.276 22.776 36.515 26.48 35.586 13.62-2180.177-24.098z"></path>
<path id="mtn-shadow" fill="#AD8769" d="M-639.91 886.432l144.608-62.397 64.896-39.327 59.642-25.886 39.602-2.95 33.96-17.833 16.242-3.22 28.278-14.316 36.394-3.384 48.828-26.32 15.52-29.298 29.204 8.603 25.814-5.425 60.385-23.018 73.338-26.09 35.448-19.828h29.877l37.728-24.89 3.503-10.203 45.783-11.294 55.852-18.573 28.666-12.86h28.532l57.168-16.58 40.192-2.245 44.02-17.072 39.287-10.32 18.543-2.517 3.575-9.89 21.11-13.487 36.473 36.213 14.91 22.89-14.91 16.276 36.227 12.706 47.31 30.12-24.86 21.63 71.837 17.484-10.21 12.106 100.764 26.424 100.31 23.018-34.5 19.748 69.56 12.52 22.438 10.35v27.52l36.797 12.897-33.032 8.157 53.564 2.95-13.338 16.796 19.747-6.605 31.73 15.695 10.454 21.783-43.882-8.05v18.436l47.446 7.16 65.338 19.288-35.855 20.83 70.907 16.803 21.684 25.515z"></path>
</g>
<g id="mtn2">
<path id="mtn-highlight" fill="#CA9D79" d="M1680.42 876.476l-67.805-31.386 3.58-55.394-96.234-12.54-33.392-54.27-26.535-45.852-45.932-5.12-32.455-28.982-31.977-21.354-9.178-36.923-25.214-9.542-5.576-5.224-22.712-2.753-14.408-37.198-20.277-7.35-7.373-26.683-40.45-21.39-25.727 35.477-13.265 4.186-21.197 21.582-22.108 10.27-18.95 13.673-28.458 16.424-.283 16.83-19.57 17.995-17.717 3.986-2.163 7.197-25.783-.91-10.787 15.546-14.363 13.657-18.248 6.373-37.014 17.995-25.984 9.996-16.29 14.55-20.913 2.728-30.932 32.53-53.704 32.13-41.89 19.607-34.524 55.52-28.24 37.877z"></path>
<path id="mtn-shadow" fill="#AD8769" d="M1204.48 474.516l-25.727 35.478-13.265 4.186-21.197 21.582-22.108 10.27-18.95 13.673-28.458 16.424-.283 16.83-19.57 17.995-17.717 3.986-2.163 7.197-25.783-.91-10.787 15.546-14.363 13.657-18.248 6.373-37.014 17.995-25.984 9.996-16.29 14.55-20.913 2.728-30.932 32.53-53.704 32.13-41.89 19.607-34.524 55.52-28.24 37.877 808.38-2.626-39.804-79.21-37.738-14.736-21.13-48.562-46.11-23.472-38.99-17.28-19.826-37.047-26.303-3.303 5.233-42.545 15.357-17.996-20.59-5.605v-46.703l-38.06-9.57 14.615-13.52-18.577-7.568z"></path>
</g>
<g id="mtn1">
<path id="mtn-highlight" fill="#CB9D79" d="M1044.434 896.11l132.223-99.074 59.338-62.443 54.534-41.1 36.21-4.684 31.05-28.317 14.85-5.112 25.857-22.728 33.277-5.373 44.646-41.79 14.19-46.52 26.703 13.66 23.603-8.613 55.214-36.548 67.056-41.427 32.412-31.482h27.318l34.496-39.517 3.203-16.202 41.862-17.932 51.07-29.49 26.21-20.42h26.09l52.27-26.323 36.75-3.566 40.25-27.107 35.922-16.388 16.954-3.994 3.268-15.7 19.302-21.415 21.042 29.19 35.847 6.966 23.436 43.532 21.656 37.19 27.225 47.088 22.272 3.752 27.383 21.817 6.835 37.897 34.952 6.704 31.49 1.975 1.294 20.308 33.743 11.304 37.15 23.707 11.097 14.144 1.844 15.047 21.91 7.282 28.556 13.213 34.152 15.43 10.037 27.002 31.035 22.6 16.636 30.553h40.262l16.197 17.23 13.89 20.3 30.228 29.38 47.883 26.477 52.075 20.403h31.828l32.782 9.414 20.776 38.252 52.655 39.877 43.23 36.162 33.387 42.044 32.537 21.628-1993.45-38.265z"></path>
<path id="mtn-shadow" fill="#AD8769" d="M1044.434 896.11l132.223-99.074 59.338-62.443 54.534-41.1 36.21-4.684 31.05-28.317 14.85-5.112 25.858-22.728 33.277-5.373 44.645-41.79 14.19-46.52 26.703 13.66 23.603-8.613 55.214-36.548 67.057-41.427 32.41-31.482h27.32l34.495-39.517 3.203-16.202 41.862-17.932 51.07-29.49 26.21-20.42h26.09l52.27-26.323 36.75-3.566 40.25-27.107 35.922-16.388 16.954-3.994 3.27-15.7 19.3-21.415v57.498l13.633 36.345-13.633 25.842-6.895 20.173 43.256 47.823-22.73 34.345 48.434 88.94 18.35 36.547-31.546 31.355 63.603 19.878 20.515 16.433v43.698l33.645 20.477 83.186 12.952 48.976 4.683-12.197 26.667 51.406-10.486 29.01 24.92 9.56 34.586 59.925-12.78v29.268l43.382 11.368 59.742 30.626-32.785 33.074 64.833 26.68 19.827 40.512z"></path>
</g>
</g>
<path id="mtn" fill="#A57C5D" d="M1520 966.124l-99.124-42.79-44.485-26.97-40.88-17.75-27.147-2.023-23.278-12.23-11.133-2.207-19.384-9.816-24.947-2.32-33.47-18.05-10.636-20.092-20.02 5.9-17.694-3.72-41.392-15.785-50.27-17.892-24.298-13.597h-20.48l-25.86-17.067-2.402-6.997-31.383-7.746-38.285-12.736-19.65-8.82h-19.558l-39.186-11.37-27.55-1.54L777.31 688.8l-26.928-7.078-12.71-1.725-2.45-6.78-14.47-9.25-15.776 12.608-26.873 3.008-17.57 18.802-16.235 16.062-20.41 20.337-16.696 1.622-20.53 9.423-5.122 16.367-26.203 2.896-23.607.853-.97 8.772-25.296 4.882-27.85 10.24-8.32 6.108-1.383 6.5-16.423 3.143-21.408 5.707-3.488.908-7.292-3.547-12.508-4.37-9.845-9.365-7.394-10.66-17.674.623-1.483-4.934-12.144-2.733-13.416-12.342-.194-11.54-19.507-11.263-12.99-9.376-15.155-7.042-14.528-14.8-9.093-2.87-17.637-24.33-27.726 14.67-5.054 18.298-13.9 5.04-9.875 25.508-15.568 1.887-3.823 3.583-17.283 6.544-6.29 25.32-71.92 14.644-1.754 1.568-9.798 165.416z"></path>
<path id="mtn" fill="#A47C5D" d="M2595.565 962.65l249.196-2.756-140.466-180.753-1.754 1.568-9.797-8.616-22.81-3.685-30.604-28.657-9.727-31.902-18.305 9.368-16.18-5.907-37.845-25.064-45.966-28.408-22.216-21.59h-18.725l-23.646-27.1-2.197-11.11-28.694-12.298-35.008-20.222-17.966-14.003h-17.883l-35.83-18.052-25.19-2.445-27.592-18.588-24.62-11.24-11.623-2.738-2.24-10.766-13.23-14.686-14.425 20.018-24.572 4.776-16.064 29.852-14.845 25.503-18.66 32.29-15.267 2.574-18.77 14.96-4.685 25.99-23.96 4.597-21.584 1.354-.887 13.927-23.13 7.753-25.465 16.257-7.607 9.7-1.264 10.318-15.016 4.993-19.575 9.062-23.41 10.58-6.88 18.52-21.275 15.497-11.403 20.95h-27.598l-11.103 11.817-9.52 13.92-20.72 20.148-32.822 18.157-35.696 13.99h-21.816l-22.47 6.457-14.242 26.23-36.093 27.347-29.63 24.8-22.887 28.83L1569 979l1035.812-19.89z"></path>
<path id="mtn" fill="#997457" d="M667.27 915.94l-23.607-.852-26.203-2.896-5.124-16.367-20.528-9.423-16.696-1.62-20.41-20.338-16.236-16.062-17.57-18.8-26.872-3.01-15.775-12.607-14.47 9.25-15.162 8.505-26.93 7.078-30.174 11.707-27.55 1.54-39.187 11.37H305.22l-19.65 8.82-38.286 12.735-31.382 7.746-28.263 24.065h-20.48l-24.298 13.598-48.264 32.947-18.747-1.63L47.98 988H-199v2059h3447V988l-215.018-.806-32.106-13.86-44.484-26.97-40.883-17.75-27.146-2.023-23.28-12.23-11.132-2.207-19.384-9.816-24.947-2.32-33.468-18.05-10.638-20.092-20.02 5.9-17.694-3.72-41.392-15.785-50.27-17.892-24.298-13.597h-20.48l-25.86-17.067-33.784-14.743-38.286-12.736-19.65-8.82h-19.557l-39.187-11.37-27.55-1.54-30.175-11.706-26.928-7.078-12.71-1.725-16.92-16.03-15.776 12.608-26.873 3.008-17.57 18.802-16.235 16.062-20.41 20.337-16.696 1.622-20.528 9.423-5.124 16.367-26.203 2.896-23.607.853-.97 8.772-25.296 4.882-27.85 10.24-8.32 6.108-17.807 9.643-21.408 5.707-10.78-2.64-12.508-4.37-9.845-9.364-7.394-10.66-17.673.623-13.627-7.667-13.416-12.342-.194-11.54-19.507-11.263-12.99-9.376-15.155-7.042-14.528-14.8-26.73-27.2-27.725 14.67-5.054 18.298-13.9 5.04-9.875 25.508-15.568 1.887-21.106 10.127-6.29 25.32-21.92 14.644-11.552-7.048-22.81-3.685-30.603-28.657-9.728-31.902-18.304 9.368-16.18-5.907-37.846-25.064-45.965-28.408-22.217-21.59h-18.725l-23.647-27.1-2.195-11.11-18.695 77.702-35.006-20.222-17.967-14.003h-17.883l-35.83-18.052-25.19-2.445-27.59-18.588-24.624-11.24-11.622-2.738-2.24-10.766-13.23-14.686-14.424 20.018-24.572 4.776-16.064 29.852-14.846 25.503-18.66 32.29-15.268 2.574-18.77 14.96-4.684 25.99-23.96 4.597-21.584 1.354-.887 13.927-23.13 7.753-25.465 16.257-7.608 9.7-1.263 10.318-15.017 4.993-19.574 9.062-23.41 10.58-16.882-71.48-21.273 15.497-11.403 20.95h-27.598L847.2 854.288l-9.52 13.92-20.72 20.148-32.823 18.157-35.695 13.99h-21.817l-22.47 6.457-12.328 22.707z"></path>
</g>
<g id="ground" fill="url(#linearGradient-5)" transform="translate(-650 1467)">
<path d="M0 0h4033v1623H0z"></path>
</g>
<g data-bb8="gravelGroup">
<g data-bb8="gravel">
<path fill="#BB9C83" d="M213 1969.8l1-18-31.7-9.8-17.4 11-8.8 18.7 34 5.2"></path>
<path fill="#7E5F46" d="M213 1969.8l1-18-23.7-3.7-5.2 8.6-15.8 2.2-13 13 34 5"></path>
</g>
<g data-bb8="gravel">
<path fill="#BB9C83" d="M213 1969.8l1-18-31.7-9.8-17.4 11-8.8 18.7 34 5.2"></path>
<path fill="#7E5F46" d="M213 1969.8l1-18-23.7-3.7-5.2 8.6-15.8 2.2-13 13 34 5"></path>
</g>
<g data-bb8="gravel">
<path fill="#BB9C83" d="M213 1969.8l1-18-31.7-9.8-17.4 11-8.8 18.7 34 5.2"></path>
<path fill="#7E5F46" d="M213 1969.8l1-18-23.7-3.7-5.2 8.6-15.8 2.2-13 13 34 5"></path>
</g>
<g data-bb8="gravel">
<path fill="#BC9C83" d="M189.6 1950l-33.2 58.4 25.4 36.5h155.5l10.4-37.4-54-39.8-54.2-25"></path>
<path fill="#7E5F46" d="M189.6 1950l-33.2 58.4 25.4 36.5h155.5l-15.6-21.4-94-39.8-14.2-25"></path>
</g>
<g data-bb8="gravel">
<path fill="#BC9C83" d="M172.8 1946l-16.6 29.5L169 1994h77.6l5.2-19-27-20-27-12.5"></path>
<path fill="#7E5F46" d="M172.8 1946l-16.6 29.5L169 1994h77.6l-7.8-10.8-47-20-7-12.6"></path>
</g>
<g data-bb8="gravel">
<path fill="#BC9C83" d="M172.8 1946l-16.6 29.5L169 1994h77.6l5.2-19-27-20-27-12.5"></path>
<path fill="#7E5F46" d="M172.8 1946l-16.6 29.5L169 1994h77.6l-7.8-10.8-47-20-7-12.6"></path>
</g>
<g data-bb8="gravel">
<path fill="#BC9C83" d="M169.5 1945l-13.3 23.5 10 14.5h62.5l4.2-15-21.8-15.7-21.7-10"></path>
<path fill="#7E5F46" d="M169.5 1945l-13.3 23.5 10 14.5h62.5l-6.3-8.5-37.7-16-5.7-9.8"></path>
</g>
<g data-bb8="gravel">
<path fill="#BB9C83" d="M158.3 1999.2l-2-36.8L221 1942l35.8 22.6 17.7 38.5-70 11"></path>
<path fill="#7E5F46" d="M158.3 1999.2l-2-36.8 48.3-7.8 10.8 17.3 32.5 4.6 26.5 26.5-70 11"></path>
</g>
<g data-bb8="gravel">
<path fill="#BB9C83" d="M195 1964.8l16-15.7-16-6.5-35 5.4-3.8 16.7h39z"></path>
<path fill="#7E5F46" d="M195 1964.8l16-15.7-31 9-4.7-7.4-15.6-2.4-3.6 16.5h39z"></path>
</g>
<g data-bb8="gravel">
<path fill="#BB9C83" d="M178 1973.7l-22-22 22-9 48.5 7.5 5.3 23.4H178z"></path>
<path fill="#7E5F46" d="M178 1973.7l-22-22 22-1.5 34.2 5.2 16.2 18.2H178z"></path>
</g>
<g data-bb8="gravel">
<path fill="#BC9C83" d="M179.5 1947.5l-23.2 41L174 2014h108.5l7.3-26.2L252 1960l-37.8-17.3"></path>
<path fill="#7E5F46" d="M179.5 1947.5l-23.2 41L174 2014h108.5l-11-15-65.6-27.8-10-17.4"></path>
</g>
<g data-bb8="gravel">
<path fill="#BB9C83" d="M200 2005.3l-44-43.6 43.8-18.4 97 15 10.7 47H200z"></path>
<path fill="#7E5F46" d="M200 2005.3l-44-43.6 44-3.3 68.4 10.5 32.4 36.2h-101z"></path>
</g>
<g data-bb8="gravel">
<path fill="#BB9C83" d="M233.5 1987.5 265 1956l-31.4-13-69.7 10.8-7.7 33.6h77.2z"></path>
<path fill="#7E5F46" d="M233.5 1987.5 265 1956l-61.5 17.8-9.3-14.5-30.8-5-7.2 33 77.3.2z"></path>
</g>
<g data-bb8="gravel">
<path fill="#BB9C83" d="M257 2001.4l41-41-41-17.2-90.6 14-10 44 100.5.2z"></path>
<path fill="#7E5F46" d="M257 2001.4l41-41-80 23c-.2 0-12.3-19-12.3-19l-40-6.3-9.5 43.2 100.7.2z"></path>
</g>
<g data-bb8="gravel">
<path fill="#BB9C83" d="M183.6 1942.3l-27.3 49.6 25.5 16H285l-15.3-38-45 4.3"></path>
<path fill="#7E5F46" d="M185 1960.7l-28.7 31.2 25.5 16H285l-25.3-28-31 4-24-5"></path>
</g>
<g data-bb8="gravel">
<path fill="#BB9C83" d="M183.6 1942.3l-27.3 49.6 25.5 16H285l-15.3-38-45 4.3"></path>
<path fill="#7E5F46" d="M185 1960.7l-28.7 31.2 25.5 16H285l-25.3-28-31 4-24-5"></path>
</g>
<g data-bb8="gravel">
<path fill="#BB9C83" d="M157 1965l-1-14.8 26.2-8.2 14.5 9 7 15.6-28 4.4"></path>
<path fill="#7E5F46" d="M157 1965l-1-14.8 19.6-3 4.3 7 13 1.7 10.8 10.6-28.2 4.4"></path>
</g>
<g data-bb8="gravel">
<path fill="#BB9C83" d="M187.5 1987.5 156 1956l31.4-13 69.7 10.8 7.7 33.6h-77.2z"></path>
<path fill="#7E5F46" d="M187.5 1987.5 156 1956l31.5-2.2 49 7.5 23.3 26-72.3.2z"></path>
</g>
<g data-bb8="gravel">
<path fill="#BB9C83" d="M213 1969.8l1-18-31.7-9.8-17.4 11-8.8 18.7 34 5.2"></path>
<path fill="#7E5F46" d="M213 1969.8l1-18-23.7-3.7-5.2 8.6-15.8 2.2-13 13 34 5"></path>
</g>
<g data-bb8="gravel">
<path fill="#BB9C83" d="M156.3 1997.6l24.2-39 44.6 4.8 38-.7 33-20.3 36.4 26.4v34.5"></path>
<path fill="#7E5F46" d="M156.3 1997.6l24.2-39 44.6 14.8h77l30.4 30"></path>
</g>
<g data-bb8="gravel">
<path fill="#BB9C83" d="M156.2 1975.2l14.5-23.2 26.7 2.8 22.8-.5 19.7-12 21.8 15.7v20.6"></path>
<path fill="#7E5F46" d="M156.2 1975.2l14.5-23.2 26.7 8.8 11.6 8.4 52.8 9.4"></path>
</g>
<g data-bb8="gravel">
<path fill="#BB9C83" d="M157.4 1976.2l-1.3-22 39-12.2 21.5 13.5 10.6 23-41.8 6.4"></path>
<path fill="#7E5F46" d="M157.4 1976.2l-1.3-22 29.2-4.7 6.4 10.4 19.5 2.7 16 15.8-41.8 6.4"></path>
</g>
<g data-bb8="gravel">
<path fill="#BB9C83" d="M187.5 1987.5 156 1956l31.4-13 69.7 10.8 7.7 33.6h-77.2z"></path>
<path fill="#7E5F46" d="M187.5 1987.5 156 1956l31.5-2.2 49 7.5 23.3 26-72.3.2z"></path>
</g>
<g data-bb8="gravel">
<path fill="#BB9C83" d="M213 1969.8l1-18-31.7-9.8-17.4 11-8.8 18.7 34 5.2"></path>
<path fill="#7E5F46" d="M213 1969.8l1-18-23.7-3.7-5.2 8.6-15.8 2.2-13 13 34 5"></path>
</g>
</g>
</g>
<g id="A-bb8-X" data-bb8="bb8" transform="translate(532 992)">
<g data-bb8="bodyShadow">
<ellipse id="shadow-ground" cx="1030.5" cy="1338" fill="#000000" opacity=".2" rx="408.5" ry="96"></ellipse>
<ellipse id="shadow-ground-small-copy" cx="994" cy="1338" fill="#000000" opacity=".074" rx="268.5" ry="63.176"></ellipse>
<ellipse id="shadow-ground-small" cx="970.5" cy="1349" fill="#000000" opacity=".124" rx="157.5" ry="37"></ellipse>
</g>
<g id="A-unit-Y" data-bb8="unit">
<g id="body" transform="translate(543 543)">
<mask id="mask-7" fill="white">
<use xlink:href="#path-6"></use>
</mask>
<use id="Mask" fill="#D8D8D8" opacity=".01" xlink:href="#path-6"></use>
<g id="Rectangle" fill="#EEEEEE" stroke="#979797" stroke-width="2" mask="url(#mask-7)">
<use mask="url(#mask-9)" xlink:href="#path-8"></use>
</g>
<g mask="url(#mask-7)">
<g id="A-body-surface-R" data-bb8="bodySurface" transform="translate(-527.778 -659.71)">
<circle id="force-ring" cx="979.778" cy="961.71" r="961.145" stroke="#9E0707"></circle>
<g id="body-details" stroke="#563402">
<path id="body-details1" stroke-width="3" d="M757.37 950.773l53.952 114.127 249.967 102.512 126.652-161.283-103.638-178.39-211.363-38.997z" opacity=".189"></path>
<path id="body-details2" stroke-width="3" d="M469.37 860.382l-294.048 373.864 499.377 67.14 58.713-143.27 37.357-27.652-95.918-196.152-94.11-1.142z" opacity=".189"></path>
<path id="body-details3" stroke-width="3" d="M1266.78 646.348l-137.593-455.31-341.43 370.556 83.685 130.273 1.223 46.46 215.695 33.938 54.914-76.435z" opacity=".189"></path>
<path id="body-details4" stroke-width="3" d="M1452.486 1045.965l209.892 406.83-595.744 19.422 45.677-139.923-10.79-104.814 134.603-191.923 92.29 18.45z" opacity=".189"></path>
<g id="seal-groups1" stroke-width="1.5" opacity=".217">
<g id="body-seal-detail" transform="rotate(11 -4727.855 5323.673)">
<circle id="seal-ring7" cx="21" cy="21" r="21"></circle>
<circle id="seal-ring8" cx="21" cy="21" r="10.5"></circle>
</g>
<g id="body-seal-detail-copy" transform="rotate(11 -4117.965 5031.262)">
<circle id="seal-ring7" cx="21" cy="21" r="21"></circle>
<circle id="seal-ring8" cx="21" cy="21" r="10.5"></circle>
</g>
<g id="body-seal-detail-copy-2" transform="rotate(11 -4223.62 5801.974)">
<circle id="seal-ring7" cx="21" cy="21" r="21"></circle>
<circle id="seal-ring8" cx="21" cy="21" r="10.5"></circle>
</g>
</g>
<g id="seal-groups2" stroke-width="1.5" opacity=".217">
<g id="body-seal-detail" transform="rotate(-169 554.975 234.24)">
<circle id="seal-ring7" cx="21" cy="21" r="21"></circle>
<circle id="seal-ring8" cx="21" cy="21" r="10.5"></circle>
</g>
<g id="body-seal-detail-copy" transform="rotate(-169 583.13 292.966)">
<circle id="seal-ring7" cx="21" cy="21" r="21"></circle>
<circle id="seal-ring8" cx="21" cy="21" r="10.5"></circle>
</g>
<g id="body-seal-detail-copy-2" transform="rotate(-169 508.92 282.793)">
<circle id="seal-ring7" cx="21" cy="21" r="21"></circle>
<circle id="seal-ring8" cx="21" cy="21" r="10.5"></circle>
</g>
</g>
<g id="seal-groups3" stroke-width="1.5" opacity=".217">
<g id="body-seal-detail" transform="rotate(61 -663.273 996.113)">
<circle id="seal-ring7" cx="21" cy="21" r="21"></circle>
<circle id="seal-ring8" cx="21" cy="21" r="10.5"></circle>
</g>
<g id="body-seal-detail-copy" transform="rotate(61 -535.552 994.74)">
<circle id="seal-ring7" cx="21" cy="21" r="21"></circle>
<circle id="seal-ring8" cx="21" cy="21" r="10.5"></circle>
</g>
<g id="body-seal-detail-copy-2" transform="rotate(61 -615.145 1118.217)">
<circle id="seal-ring7" cx="21" cy="21" r="21"></circle>
<circle id="seal-ring8" cx="21" cy="21" r="10.5"></circle>
</g>
</g>
<g id="seal-groups4" stroke-width="1.5" opacity=".217">
<g id="body-seal-detail" transform="rotate(67 -301.26 1515.642)">
<circle id="seal-ring7" cx="21" cy="21" r="21"></circle>
<circle id="seal-ring8" cx="21" cy="21" r="10.5"></circle>
</g>
<g id="body-seal-detail-copy" transform="rotate(67 -183.91 1520.53)">
<circle id="seal-ring7" cx="21" cy="21" r="21"></circle>
<circle id="seal-ring8" cx="21" cy="21" r="10.5"></circle>
</g>
<g id="body-seal-detail-copy-2" transform="rotate(67 -262.942 1630.086)">
<circle id="seal-ring7" cx="21" cy="21" r="21"></circle>
<circle id="seal-ring8" cx="21" cy="21" r="10.5"></circle>
</g>
</g>
</g>
<g id="hatches">
<g id="hatch1">
<g id="hatch-details" transform="translate(722 1130)">
<path id="Path-4" stroke="#000000" stroke-width="4" d="M228.624 374.177l9.58 40.013" opacity=".3"></path>
<path id="Path-4-Copy" stroke="#000000" stroke-width="4" d="M238.624 371.177l9.58 40.013" opacity=".3"></path>
<path id="Path-4-Copy-2" stroke="#000000" stroke-width="7" d="M248.624 368.177l9.58 40.013" opacity=".3"></path>
<path id="Path-3" stroke="#000000" stroke-opacity=".5" d="M347.118 242.727l-14.31-2.964-4.28 8.848 10.57 6.8-4.83 9.836-9.714-3.692-5.722 9.204 9.574 7.94"></path>
<circle id="Oval-3" cx="181.5" cy="182.5" r="91.5" stroke="#563402" opacity=".194"></circle>
<circle id="Oval-3-Copy" cx="182" cy="174" r="58" stroke="#563402" opacity=".194"></circle>
<path id="Combined-Shape" fill="#9FA9AF" stroke="#000000" stroke-opacity=".5" d="M44.908 220.67c-1.12-3.667-2.09-7.396-2.908-11.184L.874 217.872c1.987 9.44 4.712 18.608 8.112 27.442.92 2.39 6.43-2.34 7.447 0 1.017 2.34 10.69 20.287 14.664 26.922 1.144 1.91-6.242 4.664-5.03 6.527 24.876 38.26 63.857 66.502 109.573 77.358l8.067-41.373c-2.83-.714-5.628-1.515-8.387-2.4-1.496-.48 5.37-28.37 9.002-45.635 10.755 4.508 22.564 6.998 34.956 6.998v-39.48c0-2.367 7-4.733 7-7.1v-41.513c0-1.648-7-3.296-7-4.943V92.71c-49.982 0-90.5 40.518-90.5 90.5 0 8.076 1.058 15.906 3.043 23.357-12.28 3.32-46.26 16.242-46.912 14.102z"></path>
<path id="Combined-Shape" fill="#9FA9AF" stroke="#000000" stroke-opacity=".5" d="M351.67 228.052c-15.87 58.262-60.19 104.794-117.115 123.745l-14.522-39.385c44.156-14.086 78.72-49.656 91.4-94.422l40.238 10.062z"></path>
<path id="Combined-Shape" fill="#9FA9AF" stroke="#000000" stroke-opacity=".5" d="M176.982 0h.518c53.55 0 101.655 23.32 134.71 60.36L281.567 87.74c-25.263-28.383-61.992-46.334-102.92-46.585L176.983 0z"></path>
</g>
<g id="hatch-seals">
<g id="seal1" transform="translate(863 1422)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring1" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring2" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
<g id="seal2" transform="matrix(1 0 0 -1 863 1192)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring3" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring4" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
<g id="seal3" transform="rotate(-90 1178.5 164.5)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring5" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring6" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
<g id="seal4" transform="matrix(0 -1 -1 0 784 1343)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring7" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring8" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
</g>
<path id="hatch-outer-ring" fill="#D38328" stroke="#000000" stroke-opacity=".5" d="M899 1560c-138.07 0-250-111.93-250-250s111.93-250 250-250 250 111.93 250 250-111.93 250-250 250zm.383-58.233c106.25 0 192.384-86.133 192.384-192.384 0-106.25-86.133-192.383-192.384-192.383C793.133 1117 707 1203.133 707 1309.383c0 106.25 86.133 192.384 192.383 192.384z"></path>
</g>
<g id="hatch2">
<g id="hatch-details" transform="matrix(-1 0 0 1 846 550)">
<path id="Path-4" stroke="#000000" stroke-width="4" d="M228.624 374.177l9.58 40.013" opacity=".3"></path>
<path id="Path-4-Copy" stroke="#000000" stroke-width="4" d="M238.624 371.177l9.58 40.013" opacity=".3"></path>
<path id="Path-4-Copy-2" stroke="#000000" stroke-width="7" d="M248.624 368.177l9.58 40.013" opacity=".3"></path>
<path id="Path-3" stroke="#000000" stroke-opacity=".5" d="M347.118 242.727l-14.31-2.964-4.28 8.848 10.57 6.8-4.83 9.836-9.714-3.692-5.722 9.204 9.574 7.94"></path>
<circle id="Oval-3" cx="181.5" cy="182.5" r="91.5" stroke="#563402" opacity=".194"></circle>
<circle id="Oval-3-Copy" cx="182" cy="174" r="58" stroke="#563402" opacity=".194"></circle>
<path id="Combined-Shape" fill="#9FA9AF" stroke="#000000" stroke-opacity=".5" d="M44.908 220.67c-1.12-3.667-2.09-7.396-2.908-11.184L.874 217.872c1.987 9.44 4.712 18.608 8.112 27.442.92 2.39 6.43-2.34 7.447 0 1.017 2.34 10.69 20.287 14.664 26.922 1.144 1.91-6.242 4.664-5.03 6.527 24.876 38.26 63.857 66.502 109.573 77.358l8.067-41.373c-2.83-.714-5.628-1.515-8.387-2.4-1.496-.48 5.37-28.37 9.002-45.635 10.755 4.508 22.564 6.998 34.956 6.998v-39.48c0-2.367 7-4.733 7-7.1v-41.513c0-1.648-7-3.296-7-4.943V92.71c-49.982 0-90.5 40.518-90.5 90.5 0 8.076 1.058 15.906 3.043 23.357-12.28 3.32-46.26 16.242-46.912 14.102z"></path>
<path id="Combined-Shape" fill="#9FA9AF" stroke="#000000" stroke-opacity=".5" d="M351.67 228.052c-15.87 58.262-60.19 104.794-117.115 123.745l-14.522-39.385c44.156-14.086 78.72-49.656 91.4-94.422l40.238 10.062z"></path>
<path id="Combined-Shape" fill="#9FA9AF" stroke="#000000" stroke-opacity=".5" d="M176.982 0h.518c53.55 0 101.655 23.32 134.71 60.36L281.567 87.74c-25.263-28.383-61.992-46.334-102.92-46.585L176.983 0z"></path>
</g>
<g id="hatch-seals">
<g id="seal1" transform="matrix(-1 0 0 1 705 842)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring1" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring2" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
<g id="seal2" transform="rotate(180 352.5 306)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring3" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring4" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
<g id="seal3" transform="matrix(0 -1 -1 0 554 763)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring5" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring6" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
<g id="seal4" transform="rotate(-90 773.5 -10.5)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring7" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring8" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
</g>
<path id="hatch-outer-ring" fill="#D38328" stroke="#000000" stroke-opacity=".5" d="M669 980c138.07 0 250-111.93 250-250S807.07 480 669 480 419 591.93 419 730s111.93 250 250 250zm-.383-58.233c-106.25 0-192.384-86.133-192.384-192.384 0-106.25 86.133-192.383 192.384-192.383C774.867 537 861 623.133 861 729.383c0 106.25-86.133 192.384-192.383 192.384z"></path>
</g>
<g id="hatch3">
<g id="hatch-details" transform="rotate(180 748.5 503.5)">
<path id="Path-4" stroke="#000000" stroke-width="4" d="M228.624 374.177l9.58 40.013" opacity=".3"></path>
<path id="Path-4-Copy" stroke="#000000" stroke-width="4" d="M238.624 371.177l9.58 40.013" opacity=".3"></path>
<path id="Path-4-Copy-2" stroke="#000000" stroke-width="7" d="M248.624 368.177l9.58 40.013" opacity=".3"></path>
<path id="Path-3" stroke="#000000" stroke-opacity=".5" d="M347.118 242.727l-14.31-2.964-4.28 8.848 10.57 6.8-4.83 9.836-9.714-3.692-5.722 9.204 9.574 7.94"></path>
<circle id="Oval-3" cx="181.5" cy="182.5" r="91.5" stroke="#563402" opacity=".194"></circle>
<circle id="Oval-3-Copy" cx="182" cy="174" r="58" stroke="#563402" opacity=".194"></circle>
<path id="Combined-Shape" fill="#9FA9AF" stroke="#000000" stroke-opacity=".5" d="M44.908 220.67c-1.12-3.667-2.09-7.396-2.908-11.184L.874 217.872c1.987 9.44 4.712 18.608 8.112 27.442.92 2.39 6.43-2.34 7.447 0 1.017 2.34 10.69 20.287 14.664 26.922 1.144 1.91-6.242 4.664-5.03 6.527 24.876 38.26 63.857 66.502 109.573 77.358l8.067-41.373c-2.83-.714-5.628-1.515-8.387-2.4-1.496-.48 5.37-28.37 9.002-45.635 10.755 4.508 22.564 6.998 34.956 6.998v-39.48c0-2.367 7-4.733 7-7.1v-41.513c0-1.648-7-3.296-7-4.943V92.71c-49.982 0-90.5 40.518-90.5 90.5 0 8.076 1.058 15.906 3.043 23.357-12.28 3.32-46.26 16.242-46.912 14.102z"></path>
<path id="Combined-Shape" fill="#9FA9AF" stroke="#000000" stroke-opacity=".5" d="M351.67 228.052c-15.87 58.262-60.19 104.794-117.115 123.745l-14.522-39.385c44.156-14.086 78.72-49.656 91.4-94.422l40.238 10.062z"></path>
<path id="Combined-Shape" fill="#9FA9AF" stroke="#000000" stroke-opacity=".5" d="M176.982 0h.518c53.55 0 101.655 23.32 134.71 60.36L281.567 87.74c-25.263-28.383-61.992-46.334-102.92-46.585L176.983 0z"></path>
</g>
<g id="hatch-seals">
<g id="seal1" transform="rotate(180 678 357.5)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring1" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring2" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
<g id="seal2" transform="matrix(-1 0 0 1 1356 945)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring3" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring4" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
<g id="seal3" transform="rotate(90 205.5 999.5)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring5" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring6" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
<g id="seal4" transform="matrix(0 1 1 0 1435 794)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring7" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring8" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
</g>
<path id="hatch-outer-ring" fill="#D38328" stroke="#000000" stroke-opacity=".5" d="M1320 577c138.07 0 250 111.93 250 250s-111.93 250-250 250-250-111.93-250-250 111.93-250 250-250zm-.383 58.233c-106.25 0-192.384 86.133-192.384 192.384 0 106.25 86.133 192.383 192.384 192.383 106.25 0 192.383-86.133 192.383-192.383 0-106.25-86.133-192.384-192.383-192.384z"></path>
</g>
<g id="hatch4">
<g id="hatch-details" transform="rotate(180 629 221)">
<path id="Path-4" stroke="#000000" stroke-width="4" d="M228.624 374.177l9.58 40.013" opacity=".3"></path>
<path id="Path-4-Copy" stroke="#000000" stroke-width="4" d="M238.624 371.177l9.58 40.013" opacity=".3"></path>
<path id="Path-4-Copy-2" stroke="#000000" stroke-width="7" d="M248.624 368.177l9.58 40.013" opacity=".3"></path>
<path id="Path-3" stroke="#000000" stroke-opacity=".5" d="M347.118 242.727l-14.31-2.964-4.28 8.848 10.57 6.8-4.83 9.836-9.714-3.692-5.722 9.204 9.574 7.94"></path>
<circle id="Oval-3" cx="181.5" cy="182.5" r="91.5" stroke="#563402" opacity=".194"></circle>
<circle id="Oval-3-Copy" cx="182" cy="174" r="58" stroke="#563402" opacity=".194"></circle>
<path id="Combined-Shape" fill="#9FA9AF" stroke="#000000" stroke-opacity=".5" d="M44.908 220.67c-1.12-3.667-2.09-7.396-2.908-11.184L.874 217.872c1.987 9.44 4.712 18.608 8.112 27.442.92 2.39 6.43-2.34 7.447 0 1.017 2.34 10.69 20.287 14.664 26.922 1.144 1.91-6.242 4.664-5.03 6.527 24.876 38.26 63.857 66.502 109.573 77.358l8.067-41.373c-2.83-.714-5.628-1.515-8.387-2.4-1.496-.48 5.37-28.37 9.002-45.635 10.755 4.508 22.564 6.998 34.956 6.998v-39.48c0-2.367 7-4.733 7-7.1v-41.513c0-1.648-7-3.296-7-4.943V92.71c-49.982 0-90.5 40.518-90.5 90.5 0 8.076 1.058 15.906 3.043 23.357-12.28 3.32-46.26 16.242-46.912 14.102z"></path>
<path id="Combined-Shape" fill="#9FA9AF" stroke="#000000" stroke-opacity=".5" d="M351.67 228.052c-15.87 58.262-60.19 104.794-117.115 123.745l-14.522-39.385c44.156-14.086 78.72-49.656 91.4-94.422l40.238 10.062z"></path>
<path id="Combined-Shape" fill="#9FA9AF" stroke="#000000" stroke-opacity=".5" d="M176.982 0h.518c53.55 0 101.655 23.32 134.71 60.36L281.567 87.74c-25.263-28.383-61.992-46.334-102.92-46.585L176.983 0z"></path>
</g>
<g id="hatch-seals">
<g id="seal1" transform="rotate(180 558.5 75)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring1" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring2" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
<g id="seal2" transform="matrix(-1 0 0 1 1117 380)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring3" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring4" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
<g id="seal3" transform="rotate(90 368.5 597.5)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring5" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring6" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
<g id="seal4" transform="matrix(0 1 1 0 1196 229)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring7" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring8" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
</g>
<path id="hatch-outer-ring" fill="#D38328" stroke="#000000" stroke-opacity=".5" d="M1081 12c138.07 0 250 111.93 250 250s-111.93 250-250 250-250-111.93-250-250S942.93 12 1081 12zm-.383 58.233c-106.25 0-192.384 86.133-192.384 192.384 0 106.25 86.133 192.383 192.384 192.383C1186.867 455 1273 368.867 1273 262.617c0-106.25-86.133-192.384-192.383-192.384z"></path>
</g>
<g id="hatch5">
<g id="hatch-details" transform="rotate(180 854 816)">
<path id="Path-4" stroke="#000000" stroke-width="4" d="M228.624 374.177l9.58 40.013" opacity=".3"></path>
<path id="Path-4-Copy" stroke="#000000" stroke-width="4" d="M238.624 371.177l9.58 40.013" opacity=".3"></path>
<path id="Path-4-Copy-2" stroke="#000000" stroke-width="7" d="M248.624 368.177l9.58 40.013" opacity=".3"></path>
<path id="Path-3" stroke="#000000" stroke-opacity=".5" d="M347.118 242.727l-14.31-2.964-4.28 8.848 10.57 6.8-4.83 9.836-9.714-3.692-5.722 9.204 9.574 7.94"></path>
<circle id="Oval-3" cx="181.5" cy="182.5" r="91.5" stroke="#563402" opacity=".194"></circle>
<circle id="Oval-3-Copy" cx="182" cy="174" r="58" stroke="#563402" opacity=".194"></circle>
<path id="Combined-Shape" fill="#9FA9AF" stroke="#000000" stroke-opacity=".5" d="M44.908 220.67c-1.12-3.667-2.09-7.396-2.908-11.184L.874 217.872c1.987 9.44 4.712 18.608 8.112 27.442.92 2.39 6.43-2.34 7.447 0 1.017 2.34 10.69 20.287 14.664 26.922 1.144 1.91-6.242 4.664-5.03 6.527 24.876 38.26 63.857 66.502 109.573 77.358l8.067-41.373c-2.83-.714-5.628-1.515-8.387-2.4-1.496-.48 5.37-28.37 9.002-45.635 10.755 4.508 22.564 6.998 34.956 6.998v-39.48c0-2.367 7-4.733 7-7.1v-41.513c0-1.648-7-3.296-7-4.943V92.71c-49.982 0-90.5 40.518-90.5 90.5 0 8.076 1.058 15.906 3.043 23.357-12.28 3.32-46.26 16.242-46.912 14.102z"></path>
<path id="Combined-Shape" fill="#9FA9AF" stroke="#000000" stroke-opacity=".5" d="M351.67 228.052c-15.87 58.262-60.19 104.794-117.115 123.745l-14.522-39.385c44.156-14.086 78.72-49.656 91.4-94.422l40.238 10.062z"></path>
<path id="Combined-Shape" fill="#9FA9AF" stroke="#000000" stroke-opacity=".5" d="M176.982 0h.518c53.55 0 101.655 23.32 134.71 60.36L281.567 87.74c-25.263-28.383-61.992-46.334-102.92-46.585L176.983 0z"></path>
</g>
<g id="hatch-seals">
<g id="seal1" transform="rotate(180 783.5 670)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring1" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring2" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
<g id="seal2" transform="matrix(-1 0 0 1 1567 1570)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring3" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring4" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
<g id="seal3" transform="rotate(90 -1.5 1417.5)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring5" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring6" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
<g id="seal4" transform="matrix(0 1 1 0 1646 1419)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring7" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring8" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
</g>
<path id="hatch-outer-ring" fill="#D38328" stroke="#000000" stroke-opacity=".5" d="M1531 1202c138.07 0 250 111.93 250 250s-111.93 250-250 250-250-111.93-250-250 111.93-250 250-250zm-.383 58.233c-106.25 0-192.384 86.133-192.384 192.384 0 106.25 86.133 192.383 192.384 192.383 106.25 0 192.383-86.133 192.383-192.383 0-106.25-86.133-192.384-192.383-192.384z"></path>
</g>
<g id="hatch6">
<g id="hatch-details" transform="rotate(180 213.5 711)">
<path id="Path-4" stroke="#000000" stroke-width="4" d="M228.624 374.177l9.58 40.013" opacity=".3"></path>
<path id="Path-4-Copy" stroke="#000000" stroke-width="4" d="M238.624 371.177l9.58 40.013" opacity=".3"></path>
<path id="Path-4-Copy-2" stroke="#000000" stroke-width="7" d="M248.624 368.177l9.58 40.013" opacity=".3"></path>
<path id="Path-3" stroke="#000000" stroke-opacity=".5" d="M347.118 242.727l-14.31-2.964-4.28 8.848 10.57 6.8-4.83 9.836-9.714-3.692-5.722 9.204 9.574 7.94"></path>
<circle id="Oval-3" cx="181.5" cy="182.5" r="91.5" stroke="#563402" opacity=".194"></circle>
<circle id="Oval-3-Copy" cx="182" cy="174" r="58" stroke="#563402" opacity=".194"></circle>
<path id="Combined-Shape" fill="#9FA9AF" stroke="#000000" stroke-opacity=".5" d="M44.908 220.67c-1.12-3.667-2.09-7.396-2.908-11.184L.874 217.872c1.987 9.44 4.712 18.608 8.112 27.442.92 2.39 6.43-2.34 7.447 0 1.017 2.34 10.69 20.287 14.664 26.922 1.144 1.91-6.242 4.664-5.03 6.527 24.876 38.26 63.857 66.502 109.573 77.358l8.067-41.373c-2.83-.714-5.628-1.515-8.387-2.4-1.496-.48 5.37-28.37 9.002-45.635 10.755 4.508 22.564 6.998 34.956 6.998v-39.48c0-2.367 7-4.733 7-7.1v-41.513c0-1.648-7-3.296-7-4.943V92.71c-49.982 0-90.5 40.518-90.5 90.5 0 8.076 1.058 15.906 3.043 23.357-12.28 3.32-46.26 16.242-46.912 14.102z"></path>
<path id="Combined-Shape" fill="#9FA9AF" stroke="#000000" stroke-opacity=".5" d="M351.67 228.052c-15.87 58.262-60.19 104.794-117.115 123.745l-14.522-39.385c44.156-14.086 78.72-49.656 91.4-94.422l40.238 10.062z"></path>
<path id="Combined-Shape" fill="#9FA9AF" stroke="#000000" stroke-opacity=".5" d="M176.982 0h.518c53.55 0 101.655 23.32 134.71 60.36L281.567 87.74c-25.263-28.383-61.992-46.334-102.92-46.585L176.983 0z"></path>
</g>
<g id="hatch-seals">
<g id="seal1" transform="rotate(180 143 565)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring1" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring2" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
<g id="seal2" transform="matrix(-1 0 0 1 286 1360)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring3" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring4" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
<g id="seal3" transform="rotate(90 -537 672)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring5" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring6" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
<g id="seal4" transform="matrix(0 1 1 0 365 1209)">
<path id="Triangle" fill="#D38328" stroke="#000000" stroke-opacity=".505" d="M36 0c12.846 0 23.785 10.102 23.785 10.102L72 89.392H0l12.306-79.29S23.154 0 36 0z"></path>
<circle id="seal-ring7" cx="36.5" cy="29.5" r="13.5" stroke="#B26712" stroke-width="3"></circle>
<circle id="seal-ring8" cx="36" cy="30" r="7" stroke="#000000" opacity=".331"></circle>
</g>
</g>
<path id="hatch-outer-ring" fill="#D38328" stroke="#000000" stroke-opacity=".5" d="M250 992c138.07 0 250 111.93 250 250s-111.93 250-250 250S0 1380.07 0 1242s111.93-250 250-250zm-.383 58.233c-106.25 0-192.384 86.133-192.384 192.384 0 106.25 86.133 192.383 192.384 192.383C355.867 1435 442 1348.867 442 1242.617c0-106.25-86.133-192.384-192.383-192.384z"></path>
</g>
</g>
</g>
</g>
<g id="shading" data-bb8="hoverTarget" mask="url(#mask-7)">
<g>
<path id="body-inner-shadow" fill="#A96B29" d="M412 824c227.54 0 412-184.46 412-412 0 0-60.768 181.768-369.107 218.852C146.555 667.936 13.386 516.567 13.386 516.567 59.666 693.47 220.59 824 412 824z" opacity=".1"></path>
<path id="body-inner-shadow-copy" fill="#945E25" d="M412 824c120.745 0 229.358-51.942 304.715-134.7 0 0-120.904 56.673-244.506 81.066-123.603 24.393-306.35-27.943-306.35-27.943C234.534 793.665 319.724 824 412 824z" opacity=".275"></path>
<path id="body-highlight-1" fill="#FFFFFF" d="M85.81 6.772C-12.305 39.65-83 132.32-83 241.5-83 378.19 27.81 489 164.5 489S412 378.19 412 241.5c0-30.633-5.565-59.966-15.74-87.043C216.487 149.372 75.254 98.222 75.254 35.872c0-10.04 3.662-19.787 10.556-29.1z" opacity=".178"></path>
<path id="body-highlight-2" fill="#FFFFFF" d="M538.37 148.597C531.023 167.824 527 188.692 527 210.5c0 95.82 77.68 173.5 173.5 173.5S874 306.32 874 210.5c0-70.03-41.49-130.37-101.233-157.78-18.73 44.872-111.18 81.692-234.398 95.877z" opacity=".178"></path>
<path id="Rectangle" fill="url(#linearGradient-10)" d="M20.222 0H925.71v905.487H20.22z" opacity=".399" transform="translate(-83 -40)"></path>
</g>
</g>
</g>
<g id="A-head-R" data-bb8="rotatingHead">
<g id="head-shadow" transform="translate(542.253 542.872)">
<mask id="mask-12" fill="white">
<use xlink:href="#path-11"></use>
</mask>
<use id="head-shadow-mask" fill="#D8D8D8" fill-opacity="0" xlink:href="#path-11"></use>
<g fill="#000000" mask="url(#mask-12)">
<g transform="translate(46 -144)">
<ellipse id="A-big-head-shadow-X" data-bb8="headShadowBig" cx="380.5" cy="180" opacity=".108" rx="350.5" ry="119"></ellipse>
<ellipse id="A-little-head-shadow-X" data-bb8="headShadowSmall" cx="350.505" cy="119.476" opacity=".426" rx="350.5" ry="119"></ellipse>
</g>
</g>
</g>
<circle id="force-ring" cx="955" cy="955" r="955" stroke="#EB0000" opacity=".01"></circle>
<g id="A-head-Y" data-bb8="bouncingHead">
<path id="head-base" fill="#EEEEEE" d="M946 613.683c244.5 0 241.808-41.645 241.808-41.645s13.634-2.917 14.683-7.156c4.91-19.82 7.51-40.528 7.51-61.835C1210 359.427 1091.803 243 946 243S682 359.427 682 503.047c0 21.157 2.565 41.724 7.405 61.415 1.764 7.177 19.336.646 21.69 7.576 2.355 6.93-9.596 41.645 234.905 41.645z" opacity=".01"></path>
<g id="antennas">
<g id="A-antenna-short-X" data-bb8="antennaShort">
<path id="antennas2" fill="#9B9B9B" d="M996 125h7v317h-7z"></path>
<path id="antennas2-copy" fill="#6E6E6E" d="M996 125h7v60h-7z"></path>
<path id="antennas2-copy-2" fill="#6E6E6E" d="M996 198h7v-3h-7z"></path>
<path id="antennas2-copy-3" fill="#6E6E6E" d="M996 204h7v-3h-7z"></path>
<path id="antennas2-copy-4" fill="#6E6E6E" d="M996 210h7v-3h-7z"></path>
</g>
<g id="A-antenna-long-X" data-bb8="antennaLong">
<path id="antennas1" fill="#808080" d="M975 75h7v317h-7z"></path>
<path id="antennas1-copy" fill="#484848" d="M974 80h9v101h-9z"></path>
<path id="antennas1-copy-2" fill="#737171" d="M974 75h9v101h-9z"></path>
</g>
</g>
<g id="head-surface" transform="translate(682 243)">
<mask id="mask-14" fill="white">
<use xlink:href="#path-13"></use>
</mask>
<use id="head-texture-mask" fill="#FFFFFF" xlink:href="#path-13"></use>
<g id="A-head-surface-X" mask="url(#mask-14)">
<g data-bb8="headSurface">
<g id="big-band" transform="translate(-245 237)">
<use id="Rectangle-2-Copy-2" fill="#D38328" stroke="#000000" stroke-opacity=".255" stroke-width="2" mask="url(#mask-16)" xlink:href="#path-15"></use>
<use id="Rectangle-4" fill="#3291B1" stroke="#000000" stroke-opacity=".204" stroke-width="2" mask="url(#mask-18)" xlink:href="#path-17"></use>
<use id="Rectangle-4-Copy" fill="#3291B1" stroke="#000000" stroke-opacity=".204" stroke-width="2" mask="url(#mask-20)" xlink:href="#path-19"></use>
<use id="Rectangle-4" data-bb8="upperLight" fill="#70DDFF" stroke="#000000" stroke-opacity=".204" stroke-width="2" mask="url(#mask-18)" xlink:href="#path-17"></use>
<use id="Rectangle-4-Copy" data-bb8="lowerLight" fill="#70DDFF" stroke="#000000" stroke-opacity=".204" stroke-width="2" mask="url(#mask-20)" xlink:href="#path-19"></use>
<path id="Rectangle-3" fill="#FFFFFF" d="M366 0h26v83h-26z"></path>
<path id="Rectangle-3-Copy-6" fill="#FFFFFF" d="M229 0h43v83h-43z"></path>
<path id="Rectangle-3-Copy" fill="#FFFFFF" d="M412 0h300v83H412z"></path>
<path id="Rectangle-3-Copy-2" fill="#FFFFFF" d="M758 0h-16v83h16z"></path>
<path id="Rectangle-3-Copy-3" fill="#FFFFFF" d="M788 0h-16v83h16z"></path>
<path id="Rectangle-3-Copy-4" fill="#FFFFFF" d="M818 0h-16v83h16z"></path>
<path id="Rectangle-3-Copy-5" fill="#FFFFFF" d="M914 0h-52v83h52z"></path>
</g>
<g id="head-band" stroke="#000000" stroke-opacity=".255" stroke-width="2" transform="translate(-206 21)">
<use id="Rectangle-2" fill="#7F8D93" mask="url(#mask-22)" xlink:href="#path-21"></use>
<use id="Rectangle-2-Copy" fill="#D38328" mask="url(#mask-24)" xlink:href="#path-23"></use>
</g>
<path id="bottom-line" stroke="#BDBDBD" stroke-width="5" d="M877.5 319.5h-915" stroke-linecap="square"></path>
<path id="upper-line" stroke="#979797" stroke-width="5" d="M444.5 301.5h-247" stroke-linecap="square"></path>
<path id="smile" fill="#979797" d="M425 292h22v11h-22z"></path>
<path id="head-bottom" fill="url(#linearGradient-25)" d="M26 306h1216v103H26z" transform="translate(-274 21)"></path>
<g id="mouth" transform="translate(248 251)">
<circle id="Oval-5-Copy" cx="11" cy="18" r="11" fill="#878787"></circle>
<path id="Combined-Shape" stroke="#8F8F8F" stroke-width="3" d="M18 36C8.06 36 0 27.94 0 18S8.06 0 18 0s18 8.06 18 18-8.06 18-18 18z"></path>
</g>
<g id="head-details" transform="translate(-274 69)">
<ellipse id="eye-mask" cx="544.72" cy="78.573" fill="#EEEEEE" stroke="#000000" stroke-opacity=".046" stroke-width="1.76" rx="78.213" ry="78.213"></ellipse>
<use id="head-texture-1" stroke="#563402" stroke-width="4" mask="url(#mask-27)" opacity=".168" xlink:href="#path-26"></use>
<use id="head-texture-1-copy" stroke="#563402" stroke-width="4" mask="url(#mask-29)" opacity=".168" transform="matrix(-1 0 0 1 344.954 0)" xlink:href="#path-28"></use>
<path id="head-texture-2" stroke="#563402" stroke-width="2" d="M258.868 38.692H433.67v12.582h10.483V38.1h26.162s-9.745 11.356-9.745 37.608h-45.304V63.28H404.84v11.77h-61.904V61.68h-35.92V72.4h-48.82l.672-33.708z" opacity=".168"></path>
<path id="head-texture-2-copy" stroke="#563402" stroke-width="2" d="M239.644 38.692H64.842v12.582H54.36V38.1H28.196s9.745 11.356 9.745 37.608h45.304V63.28h10.426v11.77h61.904V61.68h35.92V72.4h48.82l-.672-33.708z" opacity=".168"></path>
<path id="head-texture-3" stroke="#563402" stroke-width="2" d="M834.644 38.692H659.842v12.582H649.36V38.1h-26.163s9.745 11.356 9.745 37.608h45.304V63.28h10.426v11.77h61.904V61.68h35.92V72.4h48.82l-.672-33.708z" opacity=".168"></path>
<path id="head-texture-3-copy" stroke="#563402" stroke-width="2" d="M883.868 38.692h174.802v12.582h10.483V38.1h26.162s-9.745 11.356-9.745 37.608h-45.304V63.28h-10.426v11.77h-61.904V61.68h-35.92V72.4h-48.82l.672-33.708z" opacity=".168"></path>
<use id="head-texture-4" stroke="#563402" stroke-width="4" mask="url(#mask-31)" opacity=".168" xlink:href="#path-30"></use>
<use id="head-texture-4-copy" stroke="#563402" stroke-width="4" mask="url(#mask-33)" opacity=".168" transform="matrix(-1 0 0 1 1913 0)" xlink:href="#path-32"></use>
</g>
<g id="eye-details" transform="translate(210 87)">
<ellipse id="eye-shadow" cx="60.72" cy="74.573" fill="#2F2F2F" opacity=".162" rx="60" ry="60"></ellipse>
<ellipse id="big-eye-attachment" cx="60.72" cy="60.573" fill="#2F2F2F" rx="60" ry="60"></ellipse>
<ellipse id="eye-ring" cx="198.4" cy="129.853" stroke="#2F2F2F" stroke-width="8.8" rx="42.18" ry="40.628"></ellipse>
<ellipse id="little-eye-shadow" cx="198.4" cy="139.853" fill="#2E2E2E" opacity=".147" rx="28.16" ry="28.209"></ellipse>
<ellipse id="little-eye-attachment" cx="198.4" cy="129.853" fill="#2E2E2E" rx="28.16" ry="28.209"></ellipse>
</g>
</g>
</g>
<path id="head-inner-shadow" fill="#000000" d="M264 370.683c244.5 0 241.808-41.645 241.808-41.645s13.634-2.917 14.683-7.156c4.91-19.82 7.51-40.528 7.51-61.835 0-27.7-4.397-54.39-12.542-79.43 0 0-154.306 36.086-271.986 36.086-111.143 0-224.65-53.27-224.65-53.27C6.678 193.3 0 225.905 0 260.046c0 21.157 2.565 41.724 7.405 61.415 1.764 7.177 19.336.646 21.69 7.576 2.355 6.93-9.596 41.645 234.905 41.645z" opacity=".05" mask="url(#mask-14)"></path>
<path id="highlight" fill="#FFFFFF" d="M229.805-46.964 582-92v419H403.965s19.035-115.037 0-189.275-174.16-184.69-174.16-184.69z" opacity=".229" mask="url(#mask-14)"></path>
<mask id="mask-36" fill="white">
<use xlink:href="#path-35"></use>
</mask>
<use id="head-texture-mask-copy" fill="url(#linearGradient-34)" opacity=".251" xlink:href="#path-35"></use>
<g id="eyes">
<g>
<g id="A-little-eye-content-X" data-bb8="littleEye" transform="translate(383 191)">
<ellipse id="small-eye-components-1" cx="25.4" cy="25.853" fill="#484848" rx="25.38" ry="25.424"></ellipse>
<ellipse id="small-eye-components-2" cx="25.4" cy="25.853" fill="#333333" rx="22.49" ry="22.529"></ellipse>
<ellipse id="small-eye-components-3" cx="27.4" cy="24.853" fill="#232323" rx="20.545" ry="20.58"></ellipse>
<circle id="small-eye-highlight-1" cx="19.5" cy="15.5" r="2.5" fill="#FFFFFF" opacity=".684"></circle>
<circle id="small-eye-highlight-2" cx="29.5" cy="12.5" r="2.5" fill="#FFFFFF" opacity=".684"></circle>
<circle id="small-eye-highlight-3" cx="40.5" cy="20.5" r="3.5" fill="#FFFFFF" opacity=".684"></circle>
</g>
<g id="A-big-eye-content-X" data-bb8="bigEye" transform="translate(216 88)">
<ellipse id="big-eye-base" cx="54.36" cy="54.36" fill="#1C1C1C" rx="54.36" ry="54.36"></ellipse>
<g id="red-eye">
<mask id="mask-38" fill="white">
<use xlink:href="#path-37"></use>
</mask>
<use id="Mask" fill="#1C1C1C" xlink:href="#path-37"></use>
<g mask="url(#mask-38)">
<g data-bb8="pupilGroup" transform="translate(26 26)">
<ellipse id="A-red-eye-1-XY" data-bb8="pupil1" cx="28.147" cy="28.147" fill="#411414" rx="28.147" ry="28.147"></ellipse>
<ellipse id="A-red-eye-2-XY" data-bb8="pupil2" cx="28.517" cy="28.517" fill="#FF0006" opacity=".319" rx="16.517" ry="16.517"></ellipse>
<ellipse id="A-red-eye-3-XY" data-bb8="pupil3" cx="27.938" cy="27.938" fill="#FF0006" opacity=".319" rx="8.938" ry="8.938"></ellipse>
<ellipse id="A-red-eye-4-XY" data-bb8="pupil4" cx="28.697" cy="28.697" fill="#EEEEEE" opacity=".78" rx="2.697" ry="2.697"></ellipse>
</g>
<g id="big-eye-statics" data-bb8="eyeHighlight" transform="translate(15 3)">
<path id="eye-highlight" fill="#F2F2F2" d="M27.786 23.09c13.335-3.575 25.22-6.924 24.08-11.183-1.142-4.26-14.877-7.815-28.212-4.242-13.335 3.573-21.22 12.922-20.08 17.18 1.142 4.26 10.877 1.817 24.212-1.756z" opacity=".26"></path>
<circle id="flair-1" cx="64.5" cy="29.5" r="5.5" fill="#FFFFFF" opacity=".582"></circle>
<circle id="flair-2" cx="65" cy="30" r="12" fill="#FFFFFF" opacity=".133"></circle>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</section>
Raw
script.babel
/*
Read the description <3
*/
function random(min, max) {
if (max === null) {
max = min;min = 0;
}
return Math.random() * (max - min) + min;
}
function chanceRoll(chance) {
if (chance === null) {
chance = 50;
}
return chance > 0 && Math.random() * 100 <= chance;
}
var o = {
// Timeline related
isIntro: true,
isRollingLeft: false,
currentTl: [],
currentGravelTl: [],
gravelProgress: [],
prevGravelProgress: [],
// SlowMotion
slowMoFactor: 1,
slowMoFactorBody: 1,
// Head light status on/off
lightsOnOff: [0, 0],
// Wiggle head
wiggleFrame: 0,
allTheTime: 0,
nowAndThen: 0,
ranDur: 0,
ranPos: 0,
moveAmount: 0,
// Null object to parallax head components
headNull: { value: 0 },
init: function init() {
this.cacheDOM();
this.setStart();
this.startTicker();
this.animate();
},
cacheDOM: function cacheDOM() {
this.svg = document.querySelector("[data-bb8=svg]");
this.gravelGroup = this.svg.querySelector("[data-bb8=gravelGroup]");
this.gravel = this.svg.querySelectorAll("[data-bb8=gravel]");
this.largeMask = this.svg.querySelector("[data-bb8=largeMask]");
this.animElems = ["bb8", "unit", "bodyShadow", "bodySurface", "rotatingHead", "headShadowBig", "headShadowSmall", "bouncingHead", "antennaLong", "antennaShort", "headSurface", "upperLight", "lowerLight", "littleEye", "bigEye", "eyeHighlight", "pupilGroup", "pupil1", "pupil2", "pupil3", "pupil4"];
this.bb8 = {};
for (var i = 0; i < this.animElems.length; i++) {
this.bb8[this.animElems[i]] = this.svg.querySelector("[data-bb8=" + this.animElems[i] + "]");
}
},
bindEvents: function bindEvents() {
//this.bb8.bb8.addEventListener("mouseup", this.animate.bind(this));
this.bb8.bb8.addEventListener("mouseover", function () {
o.slowMotion(1);
});
this.bb8.bb8.addEventListener("mouseout", function () {
o.slowMotion(0);
});
},
setStart: function setStart() {
TweenMax.set(this.svg, { autoAlpha: 1 });
TweenMax.set(this.largeMask, { scale: 0, transformOrigin: "center" });
TweenMax.set(this.bb8.bb8, { y: 3500, x: 2900, scale: 2.5, transformOrigin: "center bottom" });
TweenMax.set(this.bb8.rotatingHead, { rotation: 20, transformOrigin: "center" });
o.spreadGravel();
},
startTicker: function startTicker() {
TweenMax.ticker.addEventListener("tick", o.wiggleHead);
TweenMax.ticker.addEventListener("tick", o.blinkLights);
TweenMax.ticker.addEventListener("tick", o.connectHeadToNull);
},
spreadGravel: function spreadGravel() {
TweenMax.set(o.gravelGroup, { x: -50 });
for (var i = 0; i < o.gravel.length; i++) {
TweenMax.set(o.gravel[i], { x: 0, y: random(100, 800) });
}
o.getGravelAnims("right");
},
getRollAnims: function getRollAnims(direction) {
var tls = o.getGravelAnims(direction);
var spinDir;
if (direction === "left") {
spinDir = "-=360";
} else {
spinDir = "+=360";
}
var tl = new TimelineMax({});
// Roll animation
tl.to(this.bb8.bodySurface, 0.5, { rotation: spinDir, transformOrigin: "center", ease: Linear.easeNone, repeat: 1000 }, 0).to(this.bb8.bb8, 2, { x: 500, ease: Back.easeOut }, 0).to(this.bb8.bb8, 1, { y: 500, scale: 1.05, transformOrigin: "center bottom", ease: Power1.easeInOut }, 0).to(this.bb8.bodySurface, 1, { y: -400, ease: Power1.easeInOut }, 0).to(this.bb8.bodySurface, 2, { x: -600, ease: Power1.easeInOut }, 0).to(this.bb8.unit, 0.05, { y: 0, ease: Power1.easeInOut }, 0).to(this.bb8.bouncingHead, 0.05, { y: 0, ease: Power1.easeInOut }, 0).to(this.bb8.bodyShadow, 0.05, { scale: 1, transformOrigin: "center", ease: Power1.easeInOut }, 0).to(this.bb8.bb8, 5, { x: "-=300", ease: Power1.easeInOut, repeat: 500, yoyo: true }, 2).to(this.bb8.bb8, 0.5, { y: "-=100", scale: 1, transformOrigin: "center bottom", ease: Power1.easeInOut, repeat: 1000, yoyo: true }, 1).to(this.bb8.bodySurface, 0.5, { y: "-=250", ease: Power1.easeInOut, repeat: 1000, yoyo: true }, 1).to(this.bb8.bodySurface, 5, { x: "+=200", ease: Power1.easeInOut, repeat: 500, yoyo: true }, 2).to(this.bb8.unit, 0.05, { y: "-=20", ease: Power1.easeInOut, repeat: 20000, yoyo: true }, 0.05).to(this.bb8.bodyShadow, 0.05, { scale: 1.03, transformOrigin: "center", ease: Power1.easeInOut, repeat: 20000, yoyo: true }, 0.05).to(this.bb8.bouncingHead, 0.05, { y: "-=30", ease: Power1.easeInOut, repeat: 20000, yoyo: true }, 0.08).to(this.bb8.rotatingHead, 10, { bezier: [{ rotation: -20 }, { rotation: 10 }, { rotation: 0 }], ease: Linear.easeNone, repeat: 100 }, 0);
tls[tls.length] = tl;
return tls;
},
getIntroAnim: function getIntroAnim() {
var tl = new TimelineMax();
tl.to(this.largeMask, 1.5, { scale: 0.95, ease: Back.easeInOut.config(1) }).add("bb8-in").to(this.bb8.bb8, 4.5, { x: 2000, y: 4300, scale: 3, ease: Elastic.easeOut.config(10) }, "bb8-in").to(this.bb8.bodySurface, 4.5, { rotation: -30, transformOrigin: "center", ease: Elastic.easeOut.config(10) }, "bb8-in").to(this.bb8.rotatingHead, 0.1, { rotation: -20, transformOrigin: "center" }, "bb8-in =+0.3").to(this.bb8.rotatingHead, 0.1, { rotation: 20, transformOrigin: "center" }, "bb8-in =+1").to(this.bb8.rotatingHead, 3, { rotation: -15, transformOrigin: "center", ease: Elastic.easeOut.config(0.5) }, "bb8-in =+1.5").to(this.bb8.bouncingHead, 0.2, { y: "-=10", ease: Power3.easeInOut, repeat: 2, yoyo: true, repeatDelay: 0.4 }, "bb8-in =+1").to(this.bb8.bouncingHead, 0.35, { y: "+=15", ease: Power1.easeInOut, repeat: 2, yoyo: true, repeatDelay: 0.2 }, "bb8-in =+2.4").to(this.bb8.bouncingHead, 0.275, { y: "-=5", repeat: 1, yoyo: true, repeatDelay: 0.1, ease: Power4.easeInOut }, "bb8-in =+3.85").add("bb8-distress").staggerTo([this.bb8.pupil1, this.bb8.pupil2, this.bb8.pupil3, this.bb8.pupil4], 0.2, { scale: 1.5, transformOrigin: "center", repeat: 3, yoyo: true }, 0.1, "bb8-in =+2.5").add("bb8-out").to(this.bb8.bb8, 1, { x: 4500, ease: Back.easeIn.config(2) }, "bb8-out").to(this.bb8.bodySurface, 1, { rotation: 30, ease: Back.easeIn.config(2) }, "bb8-out").to(this.bb8.rotatingHead, 1.2, { rotation: -30, transformOrigin: "center", ease: Back.easeInOut.config(2) }, "bb8-out").set(this.bb8.bb8, { y: 600, scale: 1, transformOrigin: "center bottom" }).set(this.bb8.rotatingHead, { rotation: 0, transformOrigin: "center" }).add(o.animate);
return tl;
},
getGravelAnims: function getGravelAnims(direction) {
// Make an array for timelines
var tls = [];
// Iterate thru gravel array, create unique timelines for each and add them to timelines array
for (var i = 0; i < o.gravel.length; i++) {
// Values for all timelines all times
var speed = 0.5;
var fromX = direction === "left" ? 0 : 2935;
var toX = direction === "left" ? 2935 : 0;
// Generate seamless progress values
if (o.prevGravelProgress.length != o.gravel.length) {
// If prev array not full of values, then give each gravel a randomize progress value
o.gravelProgress[i] = random(0, 1);
// ...and push it into the prev array
o.prevGravelProgress[i] = o.gravelProgress[i];
} else {
// If prev array is full of values, then inverse each value
o.gravelProgress[i] = 1 - o.prevGravelProgress[i];
}
// Create an individual timeline
var tl = new TimelineMax({ repeat: 2000 });
// Define the tween and set the playhead at correct progress
tl.fromTo(o.gravel[i], speed, { x: fromX }, { x: toX, ease: Linear.easeNone }).progress(o.gravelProgress[i]).paused(true);
// Add the timeline to the array
tls[i] = tl;
}
// Spit out the array
return tls;
},
animate: function animate() {
if (this.isIntro) {
o.playIntro();
} else {
o.stopPlayNext();
}
},
playIntro: function playIntro() {
o.isIntro = false;
o.currentTl[0] = o.getIntroAnim();
o.currentTl[0].play();
},
stopPlayNext: function stopPlayNext() {
var direction;
if (o.isRollingLeft) {
o.isRollingLeft = false;
direction = "right";
} else {
o.isRollingLeft = true;
direction = "left";
}
TweenMax.to(o.currentTl, 0.5 / o.slowMoFactor, { timeScale: 0, onComplete: o.roll, onCompleteParams: [direction] });
},
roll: function roll(direction) {
if (o.currentTl.length === 1) {
// Make art interactive first time roll is called
o.bindEvents();
} else {
// Record progress of gravel timelines, except first time roll is called
o.recordProgress();
}
// Record the progress value where each gravel stopped
var tls = o.getRollAnims(direction);
for (var i = 0; i < o.currentTl.length; i++) {
o.currentTl[i].kill();
}
for (var j = 0; j < tls.length; j++) {
o.currentTl[j] = tls[j];
o.currentTl[j].play().timeScale(0);
TweenMax.to(o.currentTl[j], 1 / o.slowMoFactor, { timeScale: o.slowMoFactorBody });
}
},
recordProgress: function recordProgress() {
for (var i = 0; i < o.gravel.length; i++) {
o.prevGravelProgress[i] = o.currentTl[i].progress();
}
},
slowMotion: function slowMotion(val) {
if (val === 1) {
o.slowMoFactor = 0.1;
o.slowMoFactorBody = 0.05;
} else {
o.wiggleFrame = 0;
o.allTheTime = 0;
o.slowMoFactor = 1;
o.slowMoFactorBody = 1;
}
for (var i = 0; i < o.currentTl.length; i++) {
TweenMax.to(o.currentTl[i], 0.1, { timeScale: o.slowMoFactorBody });
}
},
connectHeadToNull: function connectHeadToNull() {
if (!val) {
var val, headSurfacePos, bigEyePos, littleEyePos, antennaShortPos, antennaLongPos, pupilGroupPos, eyeHighlightPos;
var headSurfaceCenter = -50;
var bigEyeCenter = 217 + headSurfaceCenter;
var littleEyeCenter = 385 + headSurfaceCenter;
var antennaShortCenter = -50;
var antennaLongCenter = -50;
var pupilGroupCenter = 20;
var eyeHighlightCenter = 10;
}
// Update value
val = o.headNull.value;
// null value (+/-1) * range/2
headSurfacePos = val * 150;
bigEyePos = val * 150;
pupilGroupPos = val * 20;
eyeHighlightPos = val * 10;
littleEyePos = val * 150;
antennaShortPos = -val * 120;
antennaLongPos = -val * 70;
TweenMax.set(o.bb8.headSurface, { x: headSurfaceCenter + headSurfacePos });
TweenMax.set(o.bb8.bigEye, { x: bigEyeCenter + bigEyePos });
TweenMax.set(o.bb8.pupilGroup, { x: pupilGroupCenter + pupilGroupPos });
TweenMax.set(o.bb8.eyeHighlight, { x: eyeHighlightCenter + eyeHighlightPos });
TweenMax.set(o.bb8.littleEye, { x: littleEyeCenter + littleEyePos });
TweenMax.set(o.bb8.antennaShort, { x: antennaShortCenter + antennaShortPos });
TweenMax.set(o.bb8.antennaLong, { x: antennaLongCenter + antennaLongPos });
},
wiggleHead: function wiggleHead() {
if (o.wiggleFrame === o.allTheTime) {
o.allTheTime = Math.floor(random(15, 30) / o.slowMoFactor); // How often does it wiggle
o.ranDur = o.allTheTime / 60; // How fast does it wiggle
o.ranPos = random(0.05, 0.3); // How much does it wiggle
o.nowAndThen = chanceRoll(50); // How often does the head move
o.moveAmount = random(-1, 1); // Takes random place on its range
// Wiggle or move the head
if (o.nowAndThen) {
TweenMax.to(o.headNull, o.ranDur, { value: o.moveAmount, ease: Power3.easeInOut });
} else {
TweenMax.to(o.headNull, o.ranDur / 2, { value: "+=" + o.ranPos, ease: Power2.easeInOut, repeat: 1, yoyo: true });
}
o.wiggleFrame = 0; // Reset wiggleFrame count
}
o.wiggleFrame++;
},
blinkLights: function blinkLights() {
// One in 10 there is a change
if (chanceRoll(10 * o.slowMoFactor)) {
for (var i = 0; i < 2; i++) {
if (chanceRoll(50)) {
o.lightsOnOff[i] = 1;
} else {
o.lightsOnOff[i] = 0;
}
}
}
TweenMax.set(o.bb8.upperLight, { autoAlpha: o.lightsOnOff[0] });
TweenMax.set(o.bb8.lowerLight, { autoAlpha: o.lightsOnOff[1] });
}
};
o.init();
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://codepen.io/nerdmanship/pen/YNEggb"></script>
Raw
style.scss
#header {
height: 90vh; }
.artwork {
position: relative;
max-height: 90%;
margin: 20px 0;
opacity: 0;
left: 50%;
transform: translateX(-50%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment