Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<svg class="orion" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 5646.15 7862.26">
  <g transform="translate(3019.78 4163.38)">
    <g class="orion__body">
      <rect class="orion--light" width="570.62" height="2198.29" x="-187.09" y="502.8" ry="4.08"/>
      <path class="orion--medium" d="M277.2-922.2c-148.3-.03-393.06.48-826.21 2.12V29.1c0 251.74 132.76 493.17 369.07 671.18 87.68 66.05 186.96 121.36 294.23 164.8v1483.7h1856.86V-45.62h-.14c-4.73-244.64-136.92-421.67-368.93-596.44-236.31-178.01-556.82-278.01-891.01-278.01-219.32 0-150.78-2.05-433.88-2.12z"/>
      <path class="orion__collar" d="M-535.78-258.57c219.83 78.46 431.05 59.3 707.6-17.97 200.29-56.36 384.63-150.32 527.6-268.95 142.97-118.62 221-199.84 254.12-337.15" fill="none" stroke-width="132.29" stroke-linecap="round" stroke-linejoin="round"/>
      <path class="orion--stroke" d="M594 2439.17V848.9s280.64-196.44 350.8-781.1" fill="none" stroke-width="79.38" stroke-linecap="round"/>
      <path class="orion__tail orion--dark" d="M2039.24 2322.46c-47.77 153.04-257.92 194.44-403.25 262.13-250.99 116.89-536.86 140.76-794.65 241.75-206.38 80.84-293.32 179.62-598.36 290.05-308.25 111.59-524.08 118.82-637.08 116.75-496.82-9.07-452.88 106.84-669.24 49.98-175-45.99-275.76-199.77-451.52-301.33-316.86-192-868.27-196.8-859.77-534.07 8.65-342.94 557.85-515.06 900.5-498.28 316.03 15.47 250.82 503.42 781.7 538.52 379.06 25.06 456.8 4.7 772.75-271.09 297.5-259.69 933.94 223.7 1304.13 86.2 174.07-64.67 350.3-337.2 537.43-266.67 96.44 36.36 148.06 187.68 117.36 286.06z"/>
    </g>
    <g class="orion__head">
      <path class="orion--medium" d="M942.67-4152.82C593.64-4281.95-55.9-3184.03-55.9-3184.03l259.88 873 744.22-217.3s402.95-1473.35-5.54-1624.49z" />
      <path d="M794.75-4146.57c52.94-19.15 102.92-22.9 147.92-6.25a184.52 184.52 0 0134.97 17.35c211.68 369.1-104.47 1525.11-104.47 1525.11l-697.64 203.7-231.42-777.37s492.87-833.1 850.64-962.54z" class="orion--medium"/>
      <path class="orion--stroke" d="M111.74-3238.47s385.24-651.17 664.87-752.33c41.38-14.97 80.45-17.9 115.62-4.89 9.69 3.59 18.79 8.13 27.34 13.56" fill="none" stroke="#000" stroke-width="52.92" stroke-linecap="round" stroke-linejoin="round"/>
      <path class="orion--light" d="M-2586.3-3516.3c285.06-239.24 1266.7 575.46 1266.7 575.46l49.6 909.5-773.9 46.3s-876.04-1251.28-542.4-1531.27z" />
      <path d="M-2444.93-3560.29c-56.3-.18-104.63 13.14-141.37 43.98a184.52 184.52 0 00-27.09 28.12c-74.86 418.87 612.48 1400.63 612.48 1400.63l725.48-43.4-44.18-809.88s-744.86-618.2-1125.32-619.45z" class="orion--medium"/>
      <path class="orion--stroke" d="M-1495.79-2935.58s-582.2-483.2-879.56-484.17c-44-.14-81.78 10.27-110.5 34.37a144.23 144.23 0 00-21.17 21.98" fill="none" stroke="#000" stroke-width="52.92" stroke-linecap="round" stroke-linejoin="round"/>
      <ellipse class="orion--light" transform="rotate(-9.18)" ry="1389.06" rx="1686.72" cy="-1858.64" cx="-188.94" />
      <path d="M-369.28-3202.1a2036.69 2036.69 0 00-335.23 26.1c-558.35 90.58-1072.48 379.87-1318.59 813.2-96.44 205.78-123 421.06-88.72 631.7 63.61 382.61 364.17 749.51 747.25 967C-981.49-546.64-497.67-466.63-19.53-541.7a2256.42 2256.42 0 00354.57-87.01c294.18-151.23 532.25-369.88 683.31-627.56 151.07-257.68 208.14-542.5 163.81-817.47-51.11-316.4-233.51-601.6-516.27-807.25-282.76-205.65-648.48-319.1-1035.17-321.13z" class="orion--medium"/>
      <circle class="orion__eye orion__eye--left" r="158.75" cy="-1819.67" cx="-1574.27"/>
      <circle class="orion__eye orion__eye--right" cx="449.79" cy="-2295.92" r="158.75"/>
      <ellipse class="orion__muzzle" transform="rotate(-10.81)" ry="476.25" rx="701.15" cy="-1352.56" cx="-132.23" />
      <ellipse class="orion__nose" transform="rotate(-7.32)" ry="126.28" rx="164.72" cy="-1516.22" cx="-257.84" />
      <path class="stroke" d="M-486.98-1095.73s20.34-114.21 101.7-123.6c81.35-9.39 240.93 42.24 280.05-3.13" fill="none" stroke="#000" stroke-width="53.1" stroke-linecap="round"/>
      <path class="orion--stroke" d="M1098.02-1978.42s787.14-291.04 1088.1-264.58" fill="none" stroke="#000" stroke-width="79.38" stroke-linecap="round"/>
      <path class="orion--stroke" d="M1107.94-1707.22s668.08-175.29 1071.57-85.99" fill="none" stroke="#000" stroke-width="79.38" stroke-linecap="round"/>
      <path class="orion--stroke" d="M1051.72-1452.56s608.54-92.6 1038.49 86" fill="none" stroke="#000" stroke-width="79.38" stroke-linecap="round"/>
      <path class="orion--stroke" d="M-1961.74-1216.17s-796.49-33.8-1017.94 170.4" fill="none" stroke="#000" stroke-width="79.38" stroke-linecap="round"/>
      <path class="orion--stroke" d="M-1835.45-1010.38s-740.36 12.98-980.52 324.75" fill="none" stroke="#000" stroke-width="79.38" stroke-linecap="round"/>
      <path class="orion--stroke" d="M-1643.68-809.26S-2374.7-646.6-2577.44-362.9" fill="none" stroke="#000" stroke-width="79.38" stroke-linecap="round"/>
    </g>

  </g>
  <g class="orion__belt" transform="translate(3019.78 4163.38)">
    <g transform="matrix(1.62153 0 0 1.62153 250.25 -279.96)">
      <circle r="35.81" cy="59.13" cx="-127.76" fill="none" class="belt--stroke" stroke-width="13.23" stroke-linecap="round" stroke-linejoin="round"/>
      <circle r="161.77" cy="262.98" cx="-127.76" class="space belt--stroke" stroke-width="7.94" stroke-linecap="square" stroke-linejoin="round"/>
      <circle r="20.41" cy="447.81" cx="-127.76" class="belt--fill"/>
      <rect ry="8.32" y="422.11" x="-160.64" height="16.63" width="65.77" class="belt--fill"/>
      <circle cx="-27.21" cy="309.1" r="30.24" class="space-blob" paint-order="markers stroke fill"/>
      <path d="M-287.4 238.04a161.77 161.77 0 00-2.13 24.94 161.77 161.77 0 002.04 24.95H31.88a161.77 161.77 0 002.14-24.95 161.77 161.77 0 00-2.05-24.94z" class="belt--fill"/>
      <rect ry="8.06" y="99.7" x="-145.14" height="337.15" width="34.77" class="belt--fill"/>
      <circle r="27.97" cy="216.87" cx="-206" class="space-blob" paint-order="markers stroke fill"/>
      <path d="M-285.61 238.04a267.76 161.77 0 00-3.54 24.94 267.76 161.77 0 003.38 24.95H-144v-49.9z" class="belt--fill-light"/>
      <path d="M-250.06 196.37a139.27 139.27 0 013.76-6.48" class="belt--fill-light" class="belt--stroke-light" stroke-width="15.88" stroke-linecap="round" stroke-linejoin="round"/>
      <path class="shimmer-stroke" d="M-233.4 172.23a139.27 139.27 0 0169.5-43.75" fill="none" stroke-width="15.88" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M-127.76 427.4a20.41 20.41 0 00-20.4 20.41 20.41 20.41 0 0020.4 20.41 20.41 20.41 0 004.77-.58 20.41 20.41 0 01-15.65-19.83A20.41 20.41 0 01-123 428a20.41 20.41 0 00-4.77-.59z" class="belt--fill-light"/>
      <rect width="41.71" height="16.63" x="-160.64" y="422.11" ry="8.32" class="belt--fill-light"/>
      <path d="M-124.05 424.71a161.77 161.77 0 01-143.37-80.1 161.77 161.77 0 01.56-164.22 161.77 161.77 0 01143.92-79.11" fill="none" class="belt--stroke-light" stroke-width="7.94" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M-8.52 262.98a119.24 162.33 0 01-98.66 159.9" fill="none" class="belt--stroke" stroke-width="7.94" stroke-linecap="square" stroke-linejoin="round"/>
      <circle r="31.37" cy="351.43" cx="-206.37" class="space-blob" paint-order="markers stroke fill"/>
      <path d="M-123.16 425.2a119.24 162.33 0 01-87.28-45.26A119.24 162.33 0 01-247 262.93" fill="none" class="belt--stroke-light" stroke-width="7.94" stroke-linecap="square" stroke-linejoin="round"/>
      <circle r="14.36" cy="379.78" cx="-71.44" class="space-blob" paint-order="markers stroke fill"/>
      <path d="M-61.74 257.3a66.06 163.2 0 01-50.17 164.11" fill="none" class="belt--stroke" stroke-width="7.94" stroke-linecap="square" stroke-linejoin="round"/>
      <path d="M-123.3 425.8a66.06 163.2 0 01-49.39-43.2 66.06 163.2 0 01-21.12-118.48" fill="none" class="belt--stroke-light" stroke-width="7.94" stroke-linecap="square" stroke-linejoin="round"/>
      <rect width="65.77" height="16.63" x="-160.64" y="88.02" ry="8.32" class="belt--fill"/>
      <rect width="26.76" height="347.36" x="-145.14" y="89.49" ry="8.31" class="belt--fill-light"/>
      <rect ry="8.32" y="88.02" x="-160.64" height="16.63" width="41.96" class="belt--fill-light"/>
      <circle cx="-75.97" cy="167.73" r="21.92" class="space-blob" paint-order="markers stroke fill"/>
      <path d="M-126.49 94.92a35.81 35.81 0 01-31.84-17.14 35.81 35.81 0 01-.67-36.16 35.81 35.81 0 0131.2-18.3" fill="none" class="belt--stroke-light" stroke-width="13.23" stroke-linecap="round" stroke-linejoin="round"/>
      <circle r="14.36" cy="211.58" cx="-13.23" class="space-blob" paint-order="markers stroke fill"/>
      <circle cx="-66.98" cy="221.29" r="7.26" class="space-blob" paint-order="markers stroke fill"/>
      <circle r="7.26" cy="181.51" cx="-29.67" class="space-blob" paint-order="markers stroke fill"/>
      <circle cx="-95.97" cy="200.78" r="7.26" class="space-blob" paint-order="markers stroke fill"/>
    </g>
    <rect width="44.65" height="88.47" x="62.44" y="-272.72" ry="21.44" transform="rotate(-11.57)" class="belt--fill"/>
  </g>
  <g transform="translate(3019.78 4163.187)">
    <path class="star" d="M138.613 46.453l-.702-.308-.65.405.074-.763-.585-.494.748-.165.29-.71.387.662.764.056-.509.572z" fill="#fc0"/>
    <circle class="blob" r="1.002" cy="45.484" cx="137.844" fill="green"/>
    <path class="star" d="M138.613 46.453l-.702-.308-.65.405.074-.763-.585-.494.748-.165.29-.71.387.662.764.056-.509.572z" fill="#fc0"/>
    <circle class="blob" r="1.002" cy="45.484" cx="137.844" fill="green"/>
    <path class="star" d="M138.613 46.453l-.702-.308-.65.405.074-.763-.585-.494.748-.165.29-.71.387.662.764.056-.509.572z" fill="#fc0"/>
    <circle class="blob" r="1.002" cy="45.484" cx="137.844" fill="green"/>
    <path class="star" d="M138.613 46.453l-.702-.308-.65.405.074-.763-.585-.494.748-.165.29-.71.387.662.764.056-.509.572z" fill="#fc0"/>
    <circle class="blob" r="1.002" cy="45.484" cx="137.844" fill="green"/>
    <path class="star" d="M138.613 46.453l-.702-.308-.65.405.074-.763-.585-.494.748-.165.29-.71.387.662.764.056-.509.572z" fill="#fc0"/>
    <circle class="blob" r="1.002" cy="45.484" cx="137.844" fill="green"/>
    <g transform="matrix(.18223 0 0 .18223 125.384 39.55)">
      <ellipse class="tank__socket" cx="121.975" cy="-51.885" rx="1.069" ry=".869" transform="rotate(32.471)" />
      <g class="turtle__flipper turtle__flipper--back">
        <path d="M171.583 33.389c-.209-1.08-.082-2.312.463-3.267.093-.163.256-.31.438-.35 4.49-1.015 8.953 2.146 13.446 3.145 6.771 1.505 12.624 4.546 20.363 4.291 3.45-.113 12.275 1.308 11.7 3.924-.627 2.847-9.95 4.816-14.535 5.37-12.488 1.508-17.831-1.61-28.204-8.733-1.232-.846-4.532-2.68-3.671-4.38z" />
        <path d="M173.965 29.582a5.24 5.24 0 00-.044 2.178c-.86 1.7 2.439 3.534 3.671 4.38 10.373 7.123 15.717 10.242 28.204 8.734 3.153-.381 8.544-1.431 11.81-2.975.195-.248.328-.503.386-.767.575-2.616-8.25-4.038-11.7-3.924-7.738.255-13.59-2.785-20.362-4.29-4-.89-7.974-3.49-11.965-3.336z" />
      </g>
      <g class="turtle__flipper turtle__flipper--back">
        <path d="M156.867 30.138l5.476-.034c.201 0 .417-.139.54-.014 0 0 3.836 9.792 12.94 13.213 4.434 1.666 11.04 3.72 10.106 7.23-.858 3.226-7.711 3.208-11.89 3.142-3.743-.06-7.444-1.44-10.496-3.147-3.77-2.11-7.048-4.997-8.932-8.366-2.74-4.899 2.055-12.023 2.256-12.024z" />
        <path d="M162.897 30.124l-2.326.014c-.2.001-4.995 7.125-2.255 12.024 1.883 3.368 5.161 6.256 8.931 8.366 2.99 1.673 6.6 3.027 10.264 3.138 3.738-.116 7.772-.708 8.418-3.133.934-3.51-5.672-5.564-10.106-7.23-9.017-3.388-12.853-12.994-12.926-13.18z" />
      </g>
      <rect class="tank__shine" width="44.696" height="10.772" x="145.615" y="8.793" ry="5.386" />
      <g class="turtle__head">
        <path d="M121.346 23.406c-5.815-.307-10.316 3.253-10.905 9.045-.568 5.589 2.693 8.438 12.859 7.279 4.241-.484 5.285-2.343 10.57-.18 1.118.53 5.579 2.886 10.386 1.948 3.337-.652 3.216-6.135 3.216-6.135.394-1.082-8.358-1.273-9.5-1.424-3.027-.407-3.308-2.229-4.13-3.693-2.138-3.81-6.808-6.54-12.496-6.84z" />
        <path d="M121.463 23.414c-5.09.316-8.897 3.744-9.435 9.037-.465 4.578 1.642 7.316 8.005 7.52 1-.028 2.085-.106 3.267-.241 3.08-.351 4.476-1.427 7.033-1.161 1.312-.142 2.812.035 5.124.982.87.411 3.76 1.927 7.264 2.14a11.77 11.77 0 001.535-.193c3.337-.652 3.216-6.135 3.216-6.135.394-1.083-8.358-1.272-9.5-1.424-3.027-.406-3.308-2.229-4.13-3.693-2.123-3.783-6.744-6.5-12.38-6.832z" />
        <circle class="turtle__eye" cx="120.496" cy="29.56" r="2.224"/>
        <circle class="turtle__mouth" r=".244" cy="38.516" cx="116.007"/>
        <path class="turtle__mouth" d="M125.106 32.944c-.354-.021-.466 1.49-.97 2.763-.594 1.5-3.956 3.281-5.758 4.263.345.012.704.015 1.074.012 1.781-.781 4.122-2.14 5.016-3.863.507-.977.977-3.154.638-3.175z"/>
      </g>
      <path class="turtle__under-shell" d="M170.376 21.17c-16.601.017-31.276 2.033-33.844 16.508 9.265 3.782 21.073 6.36 33.288 6.364 12.228-.01 24.043-2.6 33.303-6.395-2.584-14.468-16.152-16.469-32.747-16.478z" />
      <g class="turtle__flipper turtle__flipper--front">
        <path d="M143.05 26.463l5.476-.043c.2-.001.416-.176.54-.017 0 0 3.835 12.419 12.94 16.758 4.434 2.113 11.04 4.719 10.105 9.17-.858 4.092-7.71 4.069-11.89 3.985-3.742-.075-7.443-1.825-10.495-3.991-3.77-2.676-7.048-6.338-8.932-10.611-2.74-6.214 2.055-15.25 2.256-15.251z" />
        <path d="M149.08 26.445l-2.326.018c-.201.001-4.995 9.037-2.256 15.25 1.884 4.273 5.162 7.936 8.932 10.612 2.989 2.121 6.6 3.84 10.263 3.98 3.739-.147 7.773-.897 8.418-3.973.934-4.452-5.671-7.058-10.105-9.17-9.017-4.298-12.853-16.482-12.927-16.717z" />
      </g>
      <path class="turtle__shell-light" d="M169.82 15.24c-16.601.016-30.72 9.14-33.288 21.512 9.265 3.233 21.073 3.314 33.288 3.317 12.228-.009 24.043-.1 33.303-3.343-2.584-12.366-16.708-21.478-33.303-21.486z" />
      <g class="turtle__tail turtle__flipper">
        <path d="M212.281 27.664c-.914 1.398-2.332 2.63-4.037 3.506-3.747 1.919-8.109 1.762-10.404-.374.023 1.952-1.465 3.056-.142 4.056 2.829 2.129 9.68 1.32 12.538-2.48 1.075-1.431 1.79-3.078 2.045-4.708z" />
        <path d="M211.872 29.29c-.905 1.163-2.159 2.183-3.628 2.939-3.747 1.918-8.109 1.761-10.404-.375.012 1.026-.39 1.817-.586 2.482.084.177.222.348.443.516 2.83 2.129 9.68 1.32 12.54-2.48a11.145 11.145 0 001.635-3.081z" />
      </g>
      <g class="turtle__flipper turtle__flipper--front">
        <path d="M171.319 30.64c.04-1.099.442-2.27 1.19-3.078.126-.137.318-.243.505-.242 4.603.025 8.236 4.113 12.388 6.101 6.257 2.996 11.272 7.28 18.868 8.779 3.386.668 11.662 4.046 10.51 6.465-1.252 2.631-10.778 2.445-15.37 1.948-12.506-1.35-17.008-5.595-25.504-14.876-1.01-1.103-3.809-3.635-2.587-5.096z" />
        <path d="M174.499 27.47a5.24 5.24 0 00-.534 2.112c-1.222 1.462 1.578 3.993 2.587 5.096 8.496 9.281 12.997 13.526 25.503 14.877 3.157.341 8.646.536 12.176-.23.247-.198.434-.417.55-.66 1.151-2.419-7.125-5.797-10.511-6.466-7.596-1.499-12.611-5.782-18.868-8.778-3.695-1.769-6.98-5.2-10.903-5.95z" />
      </g>
      <path class="turtle__shell" d="M169.82 15.24a44.803 44.803 0 00-4.07.194c-13.686 2.047-24.652 10.722-27.034 22.008 8.901 2.553 19.828 2.624 31.104 2.627 12.228-.01 24.043-.1 33.303-3.343-2.584-12.366-16.708-21.478-33.303-21.486z" />
      <path class="tank__body" d="M152.06 9.852a5.375 5.375 0 00-5.386 5.386c0 1.22.407 2.34 1.086 3.241a5.364 5.364 0 003.242 1.087h33.923a5.375 5.375 0 005.386-5.387c0-1.22-.407-2.34-1.086-3.241a5.363 5.363 0 00-3.242-1.086z" />
      <path class="tank__end" d="M150.482 8.818a5.373 5.373 0 00-4.867 5.361 5.373 5.373 0 004.867 5.361 5.373 5.373 0 004.866-5.36 5.373 5.373 0 00-4.866-5.362z" />
      <circle class="tank__socket" cx="150.482" cy="14.179" r="1.471" />
      <path class="tank__cable" d="M130.638 21.503s-4.348-8.672 2.693-9.214c6.142-.472.73 5.334 8.505 5.198 5.386-.095 5.338-7.276 8.457-3.402" fill="none" stroke-width="1.323" stroke-linecap="round"/>
      <g>
        <ellipse class="tank__socket" cx="130.744" cy="21.751" rx="1.217" ry="1.075" />
        <circle class="helmet__glass" r="15.781" cy="31.235" cx="121.094" opacity=".36" />
        <path class="shimmer-stroke" d="M107.958 27.34a13.702 13.702 0 0110.434-9.537" opacity=".36" fill="none" stroke-width="1.109" stroke-linecap="round" stroke-linejoin="round"/>
        <path class="shimmer-stroke" d="M107.688 34.064a13.702 13.702 0 01-.226-4.208" opacity=".36" fill="none" stroke-width="1.109" stroke-linecap="round" stroke-linejoin="round"/>
      </g>
      <path class="turtle__shell turtle__shell-lip" d="M138.716 37.442c9.265 3.782 18.89 3.12 31.104 3.124 12.228-.01 24.043-.117 33.303-3.912" stroke-width="2.499" stroke-linecap="round" stroke-linejoin="round"/>
      <path class="turtle__shell-groove" d="M180.36 21.144a13.607 13.607 0 01-18.673.196" fill="none" stroke-width="1.323" stroke-linecap="round" stroke-linejoin="round"/>
      <path class="turtle__shell-groove" d="M160.923 24.952l-5.244 5.244" stroke-width="1.323" stroke-linecap="round"/>
      <path class="turtle__shell-groove" d="M180.55 24.952l5.244 5.244" stroke-width="1.323" stroke-linecap="round"/>
      <g fill="none" stroke-width="3.579">
        <path class="helmet__collar" d="M138.406 28.696a17.498 17.498 0 01-3.332 13.062" stroke-linecap="square" stroke-linejoin="round" stroke-width="3.9684309900000003"/>
      </g>
    </g>
    <g class="bear" transform="translate(157.775 36.725) scale(.00615)">
      <path d="M242.822 893.869c0 61.251-36.059 106.284-94.208 106.284-54.326 0-91.436-45.033-91.436-106.284 0-61.252 37.668-85.951 90.973-85.951 53.306 0 94.67 24.699 94.67 85.95z" fill="#803300"/>
      <path d="M211.925 958.105c0 19.907-28.6 38.819-63.311 38.819s-60.54-18.912-60.54-38.82c0-19.907 26.29-33.273 61.002-33.273 34.71 0 62.85 13.366 62.85 33.274z" fill="#e9c6af"/>
      <path d="M181.194 931.763c0 7.657-19.04 24.493-30.27 24.493s-32.118-16.836-32.118-24.493 20.24-12.477 31.47-12.477 30.918 4.82 30.918 12.477z"/>
      <ellipse ry="23.111" rx="23.762" cy="827.682" cx="68.304" fill="#803300"/>
      <path d="M84.784 826.317a16.549 16.095 0 00-16.48-14.731 16.549 16.095 0 00-16.548 16.095 16.549 16.095 0 0016.548 16.096 16.549 16.095 0 001.132-.039c.815-1.337 1.582-2.727 2.471-3.983a65.703 65.703 0 015.055-6.283 65.597 65.597 0 015.713-5.548c.668-.576 1.417-1.058 2.109-1.607z" fill="#e9c6af"/>
      <ellipse transform="scale(-1 1)" cx="-231.243" cy="827.682" rx="23.762" ry="23.111" fill="#803300"/>
      <path d="M214.764 826.317a16.549 16.095 0 0116.48-14.731 16.549 16.095 0 0116.548 16.095 16.549 16.095 0 01-16.549 16.096 16.549 16.095 0 01-1.131-.039c-.816-1.337-1.582-2.727-2.472-3.983a65.703 65.703 0 00-5.055-6.283 65.597 65.597 0 00-5.712-5.548c-.67-.576-1.418-1.058-2.11-1.607z" fill="#e9c6af"/>
      <path d="M147.731 815.358c-13.396 0-26.022 1.079-37.671 3.334v11.353c11.649-2.255 24.275-3.334 37.671-3.334 15.104 0 29.459 1.373 42.667 4.256v-11.355c-13.208-2.883-27.564-4.254-42.667-4.254z" fill="red"/>
      <path d="M165.195 816.013a15.875 7.813 0 014.43 5.412 15.875 7.813 0 01-5.414 5.863c9.116.653 17.878 1.866 26.186 3.68v-11.356c-8.007-1.748-16.44-2.931-25.202-3.6z" fill="#e50000"/>
      <path d="M148.06 789.038c-43.49 0-75.872 19.481-83.284 63.857 12.322-10.516 27.906-18.695 45.285-22.652 0 0-2.446-12.499 10.25-16.029 14.513-4.035 18.403-3.943 27.749-4 10.2-.061 15.075-.07 30.338 4 14.187 3.784 12 17.113 12 17.113 17.218 4.421 31.846 10.722 44.264 21.568-7.277-46.03-42.375-63.857-86.602-63.857z" fill="#1a1a1a"/>
      <circle r="11.185" cy="894.081" cx="97.242" fill="#faa" fill-opacity=".577"/>
      <circle r="11.185" cx="201.851" cy="894.081" fill="#faa" fill-opacity=".577"/>
      <path d="M96.601 864.041a21.271 21.271 0 01-6.78 15.572 21.271 21.271 0 01-16.02 5.644" fill="none" stroke="#e9afaf" stroke-width="2.983" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M203.53 864.041a21.271 21.271 0 006.78 15.572 21.271 21.271 0 0016.02 5.644" fill="none" stroke="#e9afaf" stroke-width="2.983" stroke-linecap="round" stroke-linejoin="round"/>
      <g>
        <path d="M77.29 854.608c-6.508-.07-13.363.182-22.8 2.131l-14.318 2.769 2.308 15.038c2.094.293 4.984 1.016 6.352 2.848 3.528 4.722 1.202 9.286 2.003 17.625 2.67 27.781 11.92 33.596 26.247 35.267 7.502.875 22.816 2.282 33.28-1.433 9.456-3.357 18.223-9.868 24.158-17.96 6.274-8.553 6.948-18.235 10.843-25.726 2.76-5.308 7.7-4.176 9.258 0 2.951 7.91 4.379 17.173 10.653 25.726 5.935 8.092 14.702 14.603 24.159 17.96 10.463 3.715 25.777 2.308 33.279 1.433 14.326-1.671 23.578-7.486 26.249-35.267.801-8.339-1.525-12.903 2.003-17.625 1.414-1.893 4.463-2.611 6.567-2.885l2.297-14.962-14.522-2.808c-15.1-3.12-23.591-1.89-34.623-1.957-4.093-.025-8.777.115-13.136.573-8.125.855-16.176 2.382-24.174 4.05-7.988 1.665-14.94 6.1-23.098 5.942-7.869-.153-15.615-4.977-23.313-6.616-8.132-1.732-14.824-3.106-24.713-3.376-4.794-.13-9.043-.598-13.136-.573-4.137.026-7.918-.132-11.823-.174z"/>
        <path d="M85.28 860.471c-10.088.168-24.807.706-28.48 12.251-3.277 15.249-3.122 32.76 5.735 45.627 7.396 10.745 23.365 8.637 35.258 8.22 18.899-.663 35.138-15.383 40.158-33.389 1.93-7.753 4.168-13.928.696-19.382-5.946-9.34-20.099-11.778-30.58-12.967a443.553 443.553 0 00-22.787-.36z" fill="#333"/>
        <path d="M56.04 864.299a4.079 1.692 0 01-4.058 1.692 4.079 1.692 0 01-4.1-1.675 4.079 1.692 0 014.017-1.71 4.079 1.692 0 014.14 1.658" fill="#b3b3b3"/>
        <path d="M214.515 860.471c10.088.168 24.807.706 28.481 12.251 3.276 15.249 3.12 32.76-5.736 45.627-7.396 10.745-23.365 8.637-35.257 8.22-18.9-.663-35.139-15.383-40.16-33.389-1.928-7.753-4.167-13.928-.695-19.382 5.946-9.34 20.1-11.778 30.58-12.967a443.553 443.553 0 0122.787-.36z" fill="#333"/>
        <path d="M243.755 864.299a4.079 1.692 0 004.058 1.692 4.079 1.692 0 004.1-1.675 4.079 1.692 0 00-4.017-1.71 4.079 1.692 0 00-4.14 1.658" fill="#b3b3b3"/>
        <path d="M100.812 860.598l-19.186 66.305c5.85.159 11.675-.045 16.894-.378l18.586-64.222c-5.549-1.363-11.032-1.57-16.294-1.705z" fill="#fff"/>
        <path d="M89.154 860.456c-1.292.002-2.586 0-3.875.014-1.081.018-2.235.05-3.403.09l-17.662 59.853c1.729 1.827 3.77 3.172 6.025 4.148z" fill="#fff"/>
      </g>
    </g>
    <path class="star" d="M138.613 46.453l-.702-.308-.65.405.074-.763-.585-.494.748-.165.29-.71.387.662.764.056-.509.572z" fill="#fc0"/>
    <circle class="blob" r="1.002" cy="45.484" cx="137.844" fill="green"/>
    <path class="star" d="M138.613 46.453l-.702-.308-.65.405.074-.763-.585-.494.748-.165.29-.71.387.662.764.056-.509.572z" fill="#fc0"/>
    <circle class="blob" r="1.002" cy="45.484" cx="137.844" fill="green"/>
    <path class="star" d="M138.613 46.453l-.702-.308-.65.405.074-.763-.585-.494.748-.165.29-.71.387.662.764.056-.509.572z" fill="#fc0"/>
    <circle class="blob" r="1.002" cy="45.484" cx="137.844" fill="green"/>
    <path class="star" d="M138.613 46.453l-.702-.308-.65.405.074-.763-.585-.494.748-.165.29-.71.387.662.764.056-.509.572z" fill="#fc0"/>
    <circle class="blob" r="1.002" cy="45.484" cx="137.844" fill="green"/>
    <path class="star" d="M138.613 46.453l-.702-.308-.65.405.074-.763-.585-.494.748-.165.29-.71.387.662.764.056-.509.572z" fill="#fc0"/>
    <circle class="blob" r="1.002" cy="45.484" cx="137.844" fill="green"/>
  </g>
</svg><input id="volume" type="checkbox"/>
<label for="volume" title="Toggle sound">
<svg viewBox="0 0 24 24">
<path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z"></path>
</svg>
<svg viewBox="0 0 24 24">
<path d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z"></path>
</svg>
</label>
<h1>Tap</h1>
              
            
!

CSS

              
                *
  box-sizing border-box

:root
  --aspect-ratio calc(5246.15/7462.26)
  --height 60
  --width calc(var(--height) * var(--aspect-ratio))
  --stroke hsl(0, 0%, 10%)
  --orion-light hsl(25, 90%, 70%)
  --orion hsl(30, 75%, 50%)
  --orion-dark hsl(28, 67%, 49%)
  --orion-stroke hsl(40, 80%, 20%)
  --collar hsl(0, 60%, 50%)
  --nose hsl(10, 80%, 80%)
  --white hsl(0, 0%, 99%)
  --space-blob hsl(90, 80%, 30%)
  --space-backdrop hsl(200, 50%, 10%)
  --belt hsl(45, 80%, 50%)
  --belt-light hsl(45, 90%, 80%)
  --shimmer hsla(0, 0%, 100%, 0.95)
  --turtle hsl(90, 60%, 45%)
  --turtle-light hsl(90, 60%, 65%)
  --turtle-dark hsl(90, 60%, 25%)
  --turtle-darker hsl(90, 60%, 20%)
  --turtle-darkest hsl(90, 60%, 15%)
  --socket hsl(210, 80%, 80%)
  --turtle-shell hsl(28, 68%, 21%)
  --turtle-shell-light hsl(28, 70%, 80%)
  --turtle-shell-groove hsl(28, 66%, 10%)
  --turtle-shell-lip hsl(45, 80%, 50%)
  --turtle-under-shell hsl(45, 80%, 30%)
  --tank-shine hsl(0, 0%, 80%)
  --tank-body hsl(0, 0%, 40%)
  --tank-end hsl(0, 0%, 60%)
  --tank-cable hsl(30, 90%, 70%)
  --helmet-collar hsl(0, 0%, 40%)
  --helmet-glass hsl(180, 80%, 80%)

body
  min-height 100vh
  display flex
  align-items center
  justify-content center
  overflow hidden
  background hsl(180, 80%, 98%)

.space
  fill var(--space-backdrop)

.space-blob
  fill var(--space-blob)

.shimmer-stroke
  stroke var(--shimmer)

.helmet
  &__glass
    fill var(--helmet-glass)
  &__collar
    stroke var(--helmet-collar)

.tank
  &__shine
    fill var(--tank-shine)
  &__body
    fill var(--tank-body)
  &__end
    fill var(--tank-end)
  &__socket
    fill var(--socket)
  &__cable
    stroke var(--tank-cable)

.blob
  fill 'hsl(%s, 80%, %s)' % (var(--hue) calc(var(--lightness, 50) * 1%))
.star
  fill 'hsl(45, 80%, %s)' % calc(var(--lightness, 50) * 1%)

.belt
  &--fill
    fill var(--belt)
  &--stroke
    stroke var(--belt)
  &--fill-light
    fill var(--belt-light)
  &--stroke-light
    stroke var(--belt-light)

.stroke
  stroke var(--stroke)

.orion
  height calc(var(--height) * 1vmin)
  width calc(var(--width) * 1vmin)
  opacity 0
  overflow visible !important

  &__eye
    fill var(--stroke)

  &__nose
    fill var(--nose)

  &__muzzle
    fill var(--white)

  &__collar
    stroke var(--collar)

  &--light
    fill var(--orion-light)

  &--medium
    fill var(--orion)

  &--dark
    fill var(--orion-dark)

  &--stroke
    stroke var(--orion-stroke)

.turtle

  &__eye
    fill var(--stroke)

  &__mouth
    fill var(--turtle-darkest)

  &__shell
    fill var(--turtle-shell)

  &__shell-light
    fill var(--turtle-shell-light)

  &__under-shell
    fill var(--turtle-under-shell)

  &__shell-lip
    stroke var(--turtle-shell-lip)

  &__shell-groove
    stroke var(--turtle-shell-groove)

  &__flipper
  &__head
    path:nth-of-type(1)
      fill var(--turtle-light)
    path:nth-of-type(2)
      fill var(--turtle-dark)

    &--back
      path:nth-of-type(1)
        fill var(--turtle-darker)
      path:nth-of-type(2)
        fill var(--turtle-darkest)


label
  height 44px
  width 44px
  position fixed
  bottom 1rem
  right 1rem
  cursor pointer

  & > svg
    position absolute
    height 100%
    width 100%
    top 0
    left 0

  path
    fill hsl(180, 40%, 80%)

  svg:nth-of-type(1)
    display none

[type='checkbox']
  opacity 0
  height 0
  width 0
  position fixed
  left 100%

:checked ~ label
  svg:nth-of-type(1)
    display block
  svg:nth-of-type(2)
    display none

h1
  font-family sans-serif
  font-size 4rem
  position fixed
  bottom 1rem
  left 1rem
  margin 0
  color hsl(180, 40%, 80%)
  z-index -1

              
            
!

JS

              
                const {
  gsap: {
    set,
    timeline,
    to,
    utils: { random },
  },
} = window

let ZOOM
let zoomed = false

const AUDIO = {
  AMBIENCE: new Audio('https://assets.codepen.io/605876/street-ambience.mp3'),
  MEW: new Audio('https://assets.codepen.io/605876/kitty-mew.mp3'),
  MEWTWO: new Audio('https://assets.codepen.io/605876/kitty-mew-2.mp3'),
  PURRING: new Audio('https://assets.codepen.io/605876/kitty-purring.mp3'),
  ROCK: new Audio(
    'https://assets.codepen.io/605876/Monplaisir-Aimer_cest_ce_quil_y_a_de_plus_beau.mp3'
  ),
}

AUDIO.ROCK.loop = AUDIO.AMBIENCE.loop = AUDIO.PURRING.loop = true
AUDIO.ROCK.volume = 0
AUDIO.ROCK.muted = AUDIO.AMBIENCE.muted = AUDIO.MEW.muted = AUDIO.MEWTWO.muted = AUDIO.PURRING.muted = true

const toggleAudio = () => {
  if (AUDIO.ROCK.currentTime === 0 || AUDIO.AMBIENCE.currentTime === 0) {
    AUDIO.ROCK.play()
    AUDIO.AMBIENCE.play()
    AUDIO.PURRING.play()
  }
  AUDIO.ROCK.muted = AUDIO.AMBIENCE.muted = AUDIO.MEW.muted = AUDIO.MEWTWO.muted = AUDIO.PURRING.muted = !AUDIO
    .PURRING.muted
}

document.querySelector('#volume').addEventListener('input', toggleAudio)

const MEW = () => {
  setTimeout(() => {
    AUDIO[Math.random() > 0.5 ? 'MEW' : 'MEWTWO'].play()
    MEW()
  }, random(1000, 20000))
}
MEW()

const ORION = document.querySelector('.orion')
const TURTLE = document.querySelector('.turtle')
const OBJECTS = [
  ...document.querySelectorAll('.star'),
  ...document.querySelectorAll('.blob'),
]
set(['.star', '.blob'], {
  rotate: () => random(0, 360),
  x: -10,
  scale: () => random(0.2, 1.2),
  opacity: 0,
  yPercent: () => random(-450, 450),
  '--hue': () => random(0, 359),
  '--lightness': () => random(30, 80),
})
set('.bear', { transformOrigin: '50% 50%', opacity: 0.75, rotate: -15 })
set(TURTLE, {
  transformOrigin: '50% 50%',
  xPercent: -50,
  yPercent: -50,
})
set('.orion__head', { transformOrigin: '55% 80%' })
set('.orion__tail', { transformOrigin: '95% 50%' })
set('.orion__eye', { transformOrigin: '50% 50%', rotate: -10 })
set('.turtle__tail', { transformOrigin: '0% 50%' })
set('.turtle__eye', { transformOrigin: '50% 50%', scale: 0.8 })
set('.turtle__head', { transformOrigin: '80% 80%', rotate: 5 })
set('.logo', { opacity: 0.75 })
const SPACE_BLOBS = document.querySelectorAll('.space-blob')
set(SPACE_BLOBS[6], {
  yPercent: -25,
  scale: 1.5,
  xPercent: -25,
  transformOrigin: '50% 50%',
})

const getZoom = () =>
  timeline({
    onComplete: () => (zoomed = !zoomed),
    onReverseComplete: () => (zoomed = !zoomed),
    paused: true,
  })
    .set(ORION, {
      attr: {
        viewBox: '-200 -200 5646.15 7862.26',
      },
    })
    .to(
      ORION,
      {
        ease: 'power3.out',
        attr: {
          viewBox: '3160.446 4205.751 28.335 6.775',
        },
        duration: 2,
      },
      0
    )
    .to(
      AUDIO.ROCK,
      {
        ease: 'power3.out',
        duration: 1,
        volume: 1,
      },
      '>-1'
    )
    .to(
      [AUDIO.AMBIENCE, AUDIO.MEW, AUDIO.MEWTWO, AUDIO.PURRING],
      {
        duration: 1,
        ease: 'power3.out',
        volume: 0,
      },
      '<'
    )

const RESET = () => {
  if (ZOOM && ZOOM.progress() !== 0) {
    ZOOM.pause()
    ZOOM.time(0)
  }
  set(ORION, { attr: { viewBox: '-200 -200 5646.15 7862.26' } })
  ORION.removeAttribute('style')
  set(ORION, { opacity: 1 })
  zoomed = false
}
RESET()

// General mood timelines
const TILT = () => {
  to('.orion__head', {
    rotate: 'random(-15, 15)',
    duration: random(0.5, 2),
    delay: random(0, 2),
    onComplete: () => TILT(),
  })
}
TILT()

const WAG = () => {
  to('.orion__tail', {
    delay: random(0.5, 4),
    duration: random(0.25, 2),
    rotate: random(5, 15),
    repeat: 1,
    yoyo: true,
    onComplete: () => WAG(),
  })
}
WAG()

const BLINK = () => {
  const delay = random(2, 6)
  timeline().to(['.orion__eye', '.turtle__eye'], {
    delay,
    onComplete: () => BLINK(),
    scaleY: 0.1,
    repeat: 1,
    yoyo: true,
    duration: 0.05,
  })
}
BLINK()

OBJECTS.forEach(OBJ => {
  const duration = random(1, 4)
  timeline({ repeat: -1 })
    .to(OBJ, {
      duration: duration,
      ease: 'none',
      x: 80,
      delay: () => random(0, 10),
    })
    .to(
      OBJ,
      {
        opacity: 1,
        repeat: 1,
        repeatDelay: duration - 1,
        yoyo: true,
        duration: 0.5,
      },
      '<'
    )
    .progress(Math.random())
})
to('.turtle__tail', {
  rotate: 10,
  duration: 0.05,
  repeat: -1,
  yoyo: true,
})
to('.turtle__flipper', {
  rotate: index => (index % 2 ? -2 : 2),
  repeat: -1,
  duration: 0.05,
  yoyo: true,
})
to('.turtle__head', {
  repeat: -1,
  duration: 1.5,
  ease: 'sine.inOut',
  yoyo: true,
  rotate: -5,
})

const handleZoom = () => {
  if (ZOOM && ZOOM.progress() !== 1 && ZOOM.progress() !== 0) return
  if (zoomed && ZOOM) ZOOM.reverse()
  else {
    ZOOM = getZoom()
    ZOOM.play()
  }
}
ORION.addEventListener('click', handleZoom)
TURTLE.addEventListener('click', handleZoom)

// On Resize, reset to non-zoomed for ease.
window.addEventListener('resize', RESET)

              
            
!
999px

Console