Skip to content

Instantly share code, notes, and snippets.

@lostintangent

lostintangent/beach-crusin.markdown

Created February 12, 2020 00:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lostintangent/86f1ce0351f7ac05207031551203c22f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lostintangent/86f1ce0351f7ac05207031551203c22f to your computer and use it in GitHub Desktop.
Download ZIP
Beach Crusin'
Raw
beach-crusin.markdown
Raw
index.html
<svg width="1500" height="1000" viewBox="0 0 1500 1000" class="beach-roadtrip">
<mask id="mask">
<rect x="0" y="0" width="1500" height="1000" fill="white" />
</mask>
<g mask="url(#mask)">
<path fill="#9ddbeb" d="M0 0h1500.9v643.4H0z" id="sky_1_"/>
<g id="sun-group">
<circle id="sun-band-1" cx="183.9" cy="170.8" r="109.2" opacity=".3" fill="#f4d851"/>
<circle id="sun-band-2" cx="183.9" cy="170.8" r="83.8" opacity=".2" fill="#f4d851"/>
<circle id="sun" cx="183.9" cy="170.8" r="59" fill="#fbe689"/>
</g>
<g id="islands-1">
<path class="st4" d="M890.4 589c30-5.8 60.2-13.2 91-11.4 23 1.3 45 7.2 67.8 9 31.9 2.8 64-2.3 96-1.6 26.4.6 52.7 5.2 76.9 13.4 26.2 8.9 51.6 22.3 80.2 22 19.8-.3 39-7.2 58.6-5.4 8.8.8 17 3.3 25.3 5.9l73.7 22.5h-702S755.6 615 890.5 589z" id="path_2_"/>
<path class="st4" d="M18.2 643.4c-1 0-1.4-1.4-.4-1.8 27.5-13 59.8-26 87.8-35.3 8.4-2.8 17-5.5 25.6-5.2 10.8.4 21.1 5.3 31.6 8.5 15.8 4.8 32.1 5.7 48.3 6.3 32.3 1 64.7.9 97-.4 57.8-2.3 115.5-8 173.1-15.4 14.8-2 29.7-4 44.5-3.5 34.9 1.2 68.3 16.1 102.1 27.8 15.5 5.3 43.2 13 50.8 17.3.9.5.5 1.7-.5 1.7H18.2z"/>
<path class="st5" d="M17.8 641.5c-1 .5-.7 2 .4 2h660c1 0 1.3-1.3.4-1.8L675 640H21.2l-3.4 1.5zM758 643.4h701.9l-11.3-3.4H758.9c-1 2.2-1 3.4-1 3.4z"/>
</g>
<g id="islands-2">
<path class="st4" d="M2390.4 589c30-5.8 60.2-13.2 91-11.4 23 1.3 45 7.2 67.8 9 31.9 2.8 64-2.3 96-1.6 26.4.6 52.7 5.2 76.9 13.4 26.2 8.9 51.6 22.3 80.2 22 19.8-.3 39-7.2 58.6-5.4 8.8.8 17 3.3 25.3 5.9l73.7 22.5h-702s-2.4-28.5 132.5-54.4z" id="path_1_"/>
<path class="st4" d="M1518.2 643.4c-1 0-1.4-1.4-.4-1.8 27.5-13 59.8-26 87.8-35.3 8.4-2.8 17-5.5 25.6-5.2 10.8.4 21.1 5.3 31.6 8.5 15.8 4.8 32.1 5.7 48.3 6.3 32.3 1 64.7.9 97-.4 57.8-2.3 115.5-8 173.1-15.4 14.8-2 29.7-4 44.5-3.5 34.9 1.2 68.3 16.1 102.1 27.8 15.5 5.3 43.2 13 50.8 17.3.9.5.5 1.7-.5 1.7h-659.9z"/>
<path class="st5" d="M1517.8 641.5c-1 .5-.7 2 .4 2h660c1 0 1.3-1.3.4-1.8l-3.7-1.7h-653.7l-3.4 1.5zM2258 643.4h702l-11.4-3.4H2259c-1.1 2.2-1 3.4-1 3.4z"/>
</g>
<path id="clouds-1" class="st6" d="M1996.8 504.5a19 19 0 0 0 2.9-14.2 18 18 0 0 0-15-13.2c-7-1-13.1.9-18.2 5.8 4.9-6.4 5-16 .4-22.7-4.6-6.6-13.7-9-21.5-6.5a16 16 0 0 0-2.6-14.5c-3.2-4-8.3-5.2-13.4-4.8a86.6 86.6 0 0 0 17.7-20.9c4.3-8 5.8-18.1 1.7-26.3-4-8.2-15.9-11.5-24-7.2a9 9 0 0 0-2-10.9c-3-2.6-7.3-4.3-10.4-1.9a43.4 43.4 0 0 0-1.4-36.9 34 34 0 0 0-31.4-17.7 26.7 26.7 0 0 0-24.7 23.5 5.3 5.3 0 0 0-6-2c-2.1.7-3.9 1.2-3.7 3.4a18.3 18.3 0 0 0-18-10c-7.3.5-14 5-18.2 11-4.2 6-5 14-5.5 21.3a7.6 7.6 0 0 0-8.6.9c-2.3 2-3.3 4-2 6.8-2.2-2.5-6-3.5-9.2-2.3s-2.9 2.8-2.8 6.1a46 46 0 0 0-31.8 20.5 46 46 0 0 0-5.9 37.5c-1.8-.7-4 .2-5 1.8-.9 1.7.3 5.3 1.8 6.6-3-2.2-7.3-2.1-10.2.1-2.8 2.2-5.2 7.5-4 10.9-1.4-4.8-8-5.6-12.4-3.2 2-2.7 1.9-6.7-.2-9.2-2-2.6-6-5.1-9-3.8A51.6 51.6 0 0 0 1689 388a51.8 51.8 0 0 0-45.3-13c-5 1.1-10 3-13.8 6.3-3.9 3.3-8.8 7.7-8.6 12.8a11 11 0 0 0-11.4 1.8c-3 2.7-2.6 8-1.5 11.8-3-3.2-9.5-.2-10.2 4.3-1.4-6.2-7.2-11.1-13.6-11.3-6.3-.3-13.8 4-15.6 10.1 1.3-2.9.4-6.5-2-8.6-2.5-2-6.7-2.4-9.3-.6 1.5-3 .3-7.2-2.7-9-3-1.7-7.5-1.8-9.5 1-1.8-22.3-21.7-41.1-44-44a63.6 63.6 0 0 0-58.3 26.8 82.4 82.4 0 0 0-14.5 61.6 9.3 9.3 0 0 0-5.3-6.3c-3.2-1.3-6.6-2.7-9-.4-3.8-6.4-12.5-9-19.6-6.7-7 2.4-12.3 9-14.1 16.1a37.2 37.2 0 0 0 2.5 22.5c-3.7-3.5-10.8-4.2-14-.4a25 25 0 0 0-29.7-2.6 24.5 24.5 0 0 0-10.7 17c-3.6-.1-7.5 1.6-9 4.6a9.3 9.3 0 0 0-6-11.5c-4.3-1.3-9.8.4-11.6 4.3 2.5-7 4.4-14.4 4.3-21.9a32.7 32.7 0 0 0-7.9-21.6c-5.2-5.8-13.6-9-21.2-7s-13.6 8.9-12.5 16.6c-4-4.3-11-5.5-16.3-2.8-5.3 2.7-8.4 9-7.3 14.9a6.5 6.5 0 0 0-6.2-3c-2.3.4-3.5 2.4-4.3 4.7-.2-4.6-.8-9.3-3.3-13.1-2.5-3.9-7-6.7-11.6-5.8-4.5.8-8.3 5.3-6.2 9.4a28.3 28.3 0 0 0-27.2-3.7 28 28 0 0 0-16.9 21.5 14 14 0 0 0-7.3-11.7c-4.3-2.3-9.9-3.1-14-.6.7-2.7-.3-5.8-2.3-7.7-2-1.9-5.2-2.6-7.9-1.7 1.3-5-.4-11.1-4.6-14 2-4.2 1.5-9.5-1.3-13-2.8-3.7-8-7-12.5-6 .6-7.6-3.8-15.3-10.7-18.6a20.5 20.5 0 0 0-21.8 3.5c-2.9-13-17-21.5-30.4-20.6a47.8 47.8 0 0 0-33.4 19.8c-8 10.3-12.2 23.3-6.9 35.2-5.6-2-12.6 2.9-12.5 9-3-1.4-7.3 3.2-6.1 6.2-8.7-4.4-20-3-27.4 3.4a25.2 25.2 0 0 0-6.9 26.5c-3.6-4-9.6-5.8-14.8-4.1a15.3 15.3 0 0 0-10 12.2 9.2 9.2 0 0 0-9.4-1.3c-3 1.3-5.5 5.6-5.7 8.9-4.3-17.9-26.2-26-44.2-21.8a35.5 35.5 0 0 0-31.6 1.8c2.4-8.4-1.1-18-8.2-23-7.2-4.9-16.8-2.5-23.8 2.6-9.1-8.6-19-16.6-30.5-21.5a49.2 49.2 0 0 0-36.6-2 51.3 51.3 0 0 0-25.9 25.2c-5.6 11-9 24.7-11.8 36.6-3.8-6-14-6.1-20-2.2a56.2 56.2 0 0 0-28.7-19.5c-7.1-2-15-2.6-22 0-6.9 2.8-12.5 7.8-12.8 15.3-5-11.3-10.1-22.8-18-32.3-7.9-9.5-19-17-31.4-17.8a27.5 27.5 0 0 0-27.3 20.2 22.5 22.5 0 0 0-25-8.8c0 1.2-2 1.8-2 3a43.7 43.7 0 0 0-50.5-13.7c-17.3 7.3-26.9 28.3-23.9 46.9-8-7.8-21.6-9-30.9-2.7a29.3 29.3 0 0 0-10.9 14.2 13.7 13.7 0 0 0-3.8-.8c2-5.4 3-11.2 2.6-16.9-.3-4.7-1.6-9.7-5-13-3.6-3.2-9-3.6-12.2-.2 2.4-11.9-4.9-25-16.2-29.3-11.4-4.3-25.2 2.1-31.4 12.6 2.2-5.7 3.8-12 2.1-17.8-1.6-5.8-7.6-10.7-13.5-9.3-1.8-3.4-3.7-7-7.1-8.6-3.4-1.6-9.4-.4-9.6 3.3-.1-3.8-3-7.4-6.8-8.3-3.7-1-6.8 1.6-8.8 4.9-2.4-7.3-6-14.5-11.5-19.9a26.8 26.8 0 0 0-20.8-8.1c-7.7.8-15 6.4-16.5 14a7.3 7.3 0 0 0-7.3.2c-2.1 1.4-1.6 3.7-1.5 6.2a36.8 36.8 0 0 0-33.7 12.3 36.9 36.9 0 0 0-6.2 35.4c-4.2-3-9.9-3.8-14.7-2a15.9 15.9 0 0 0-9.6 11.3c-.7-3-3.9-5.2-7-5-3 .3-4.8 1.1-5 4.2a49.2 49.2 0 0 0-55.4-18.8 48.5 48.5 0 0 0-31 49.1A32.6 32.6 0 0 0 29 494.5c-2.5 4-4 9-1.7 13a14 14 0 0 0-14.7 0c-.9.5-1.6 1.5-2.4 2-.8.3-2.2.2-3.2.5-1.3.3-2.5.9-3.6 1.6a7.9 7.9 0 0 0-3 3c-.7 1.3-.7 2.9.1 4 1 1.4 2.6 1.9 4.1 2.2 6 1.4 12 2.2 18.1 2.8l3.6.7a165.3 165.3 0 0 0 13 1 64.2 64.2 0 0 0 14.5-1.5c.5 0 1.6-.6 2-.4 31.9 8.8 65.2 8.1 97-.9a38 38 0 0 0 33.8.2c25.9 6.3 53.1 5.6 78.7-1.7a20.8 20.8 0 0 0 18.3-.5c18.3 6.5 38.3 6.5 57.2 2a37.2 37.2 0 0 0 33.2-.5 95.3 95.3 0 0 0 23.2 3.7 70.3 70.3 0 0 0 59-4.6 255.4 255.4 0 0 0 151.5 5.8 194.7 194.7 0 0 0 135.8-5c11 12 32.4 12.4 44.8 2a58 58 0 0 0 51.6-1.8c12.8 2.2 23.9 3 36.9 1.5 10.1-1.1 11.6-6.6 28.5-9 10 .2 20-.2 29.8-1.1h6.1c3.9 3 10.5 2.2 14.5-.6 1.9-1.3 3.4-3.1 5.5-3.9 3.6-1.3 7.5 1 11 2.6 9 3.8 20 2 27.2-4.3 15.3 13.5 39.6 17.4 56.8 6.4 3 3.2 11 2.3 15.2 1.5 4.3-.9 8.4-2.6 12.7-2.9 5-.2 9.7 1.6 14.5 2.6 4.8 1 10.3 1 14-2.3a57.7 57.7 0 0 0 52-.3c8.2 3.5 17.8 3 25.8-.9 4.3 4.5 12.1 5.5 17 1.6 3.6 2.8 9.1 2.8 12.6-.1a77.7 77.7 0 0 0 69.6-1.3 54.4 54.4 0 0 0 45.7 3.7c1.7-.7 3.5-1.7 5.1-2.9 2.2 3.7 6.4 5.9 10.6 6.5 4.8.8 9.7-.2 14.5-1.2 7.7-1.6 14.7-4.8 22.4-6.4 8.6 8.2 24.3 9.5 32 .5 1 5 7 7 12 6.8 5-.3 10.3-1.7 15 0 3.1 1.3 5.5 3.7 8.4 5.4 5 2.9 12.6 3.4 17.7.6 22 7.5 46.8 6.4 67.7-3.7 20 8.6 42.2 12 63.8 9.6 8.6-.9 18.5-3.8 21.7-11.8 4.4 5.5 16 4 19.8-1.8a262 262 0 0 0 78.9 12c12.9 0 28.1-2 36-12.1a22.3 22.3 0 0 0 32.9 1.2c3.4 2.7 9.8 1.1 11.6-2.9a28 28 0 0 0 20 13.5 25 25 0 0 0 21.9-6.3 22 22 0 0 0 16.4 8.6 22 22 0 0 0 17.1-7.2c4.4 4.7 14 3.2 16.1-3 16.4 13.4 42 10.3 58-3.6l.2 2.6c4.4 2.5 10-.5 10.8-5.4 8.3 6 20.5 5.8 28.5-.4 2-1.6 3.8-3.6 3.9-6.1 0-1.3-.6-2.5-1.6-3.3z"/>
<path id="clouds-2" class="st6" d="M3996.8 504.5a19 19 0 0 0 2.8-14.2 18 18 0 0 0-14.9-13.2c-7-1-13.1.9-18.2 5.8 4.9-6.4 5-16 .4-22.7-4.6-6.6-13.8-9-21.5-6.5a16 16 0 0 0-2.6-14.5c-3.2-4-8.3-5.2-13.4-4.8 6.6-6.3 13.3-12.8 17.7-20.9s5.8-18.1 1.7-26.3-16-11.5-24-7.2a9 9 0 0 0-2-10.9c-3-2.6-7.3-4.3-10.5-1.9a43.4 43.4 0 0 0-1.3-36.9 34 34 0 0 0-31.5-17.7A26.7 26.7 0 0 0 3855 336a5.3 5.3 0 0 0-6-2c-2.1.7-4 1.2-3.8 3.4a18.3 18.3 0 0 0-18-10c-7.2.5-13.9 5-18 11-4.3 6-5 14-5.6 21.3a7.6 7.6 0 0 0-8.6.9c-2.4 2-3.3 4-2.1 6.8-2.2-2.5-6-3.5-9.1-2.3s-2.9 2.8-2.8 6.1a46 46 0 0 0-31.8 20.5 46 46 0 0 0-6 37.5c-1.7-.7-4 .2-4.9 1.8-1 1.7.3 5.3 1.8 6.6-3-2.2-7.3-2.1-10.2.1-2.9 2.2-5.2 7.5-4 10.9-1.4-4.8-8-5.6-12.4-3.2 2-2.7 1.9-6.7-.2-9.2-2-2.6-6-5.1-9-3.8A51.6 51.6 0 0 0 3689 388a51.8 51.8 0 0 0-45.4-13c-5 1.1-9.9 3-13.8 6.3-3.8 3.3-8.8 7.7-8.5 12.8a11 11 0 0 0-11.5 1.8c-3 2.7-2.5 8-1.4 11.8-3.1-3.2-9.5-.2-10.2 4.3-1.4-6.2-7.3-11.1-13.6-11.3-6.3-.3-13.8 4-15.6 10.1 1.2-2.9.4-6.5-2-8.6-2.5-2-6.7-2.4-9.3-.6 1.5-3 .2-7.2-2.7-9-3-1.7-7.6-1.8-9.5 1-1.8-22.3-21.8-41.1-44-44a63.6 63.6 0 0 0-58.3 26.8 82.4 82.4 0 0 0-14.5 61.6 9.3 9.3 0 0 0-5.3-6.3c-3.2-1.3-6.6-2.7-9.1-.4-3.7-6.4-12.5-9-19.5-6.7-7 2.4-12.3 9-14.1 16.1s-.4 15.6 2.4 22.5c-3.6-3.5-10.7-4.2-14-.4a25 25 0 0 0-29.7-2.6 24.5 24.5 0 0 0-10.7 17c-3.6-.1-7.5 1.6-9 4.6a9.3 9.3 0 0 0-5.9-11.5c-4.3-1.3-9.9.4-11.6 4.3 2.5-7 4.3-14.4 4.2-21.9a32.7 32.7 0 0 0-7.8-21.6c-5.3-5.8-13.7-9-21.2-7-7.6 2-13.6 8.9-12.5 16.6-4-4.3-11-5.5-16.3-2.8-5.3 2.7-8.4 9-7.3 14.9a6.5 6.5 0 0 0-6.2-3c-2.3.4-3.6 2.4-4.3 4.7-.2-4.6-.9-9.3-3.3-13.1-2.5-3.9-7-6.7-11.6-5.8-4.5.8-8.3 5.3-6.2 9.4a28.3 28.3 0 0 0-27.3-3.7 28 28 0 0 0-16.8 21.5 14 14 0 0 0-7.3-11.7c-4.3-2.3-10-3.1-14-.6.6-2.7-.3-5.8-2.3-7.7-2-1.9-5.2-2.6-7.9-1.7 1.3-5-.5-11.1-4.6-14 2-4.2 1.5-9.5-1.3-13-2.8-3.7-8-7-12.6-6 .7-7.6-3.8-15.3-10.6-18.6a20.5 20.5 0 0 0-21.8 3.5c-2.9-13-17.1-21.5-30.4-20.6a47.8 47.8 0 0 0-33.4 19.8c-8 10.3-12.2 23.3-6.9 35.2-5.6-2-12.6 2.9-12.5 9-3-1.4-7.3 3.2-6.1 6.2-8.8-4.4-20-3-27.5 3.4a25.2 25.2 0 0 0-6.8 26.5c-3.6-4-9.6-5.8-14.8-4.1a15.2 15.2 0 0 0-10 12.2 9.2 9.2 0 0 0-9.4-1.3c-3 1.3-5.5 5.6-5.7 8.9-4.3-17.9-26.2-26-44.3-21.8a35.5 35.5 0 0 0-31.5 1.8c2.3-8.4-1.1-18-8.2-23-7.2-4.9-16.8-2.5-23.8 2.6-9.1-8.6-19-16.6-30.5-21.5a49.2 49.2 0 0 0-36.6-2 51.3 51.3 0 0 0-25.9 25.2c-5.6 11-9 24.7-11.8 36.6-3.8-6-14-6.1-20-2.2a56.2 56.2 0 0 0-28.7-19.5c-7.2-2-15-2.6-22 0-7 2.8-12.5 7.8-12.8 15.3-5-11.3-10.1-22.8-18-32.3-8-9.5-19-17-31.4-17.8a27.5 27.5 0 0 0-27.3 20.2 22.5 22.5 0 0 0-25-8.8c0 1.2-2 1.8-2 3a43.7 43.7 0 0 0-50.5-13.7c-17.4 7.3-26.9 28.3-23.9 46.9-8-7.8-21.7-9-31-2.7a29.3 29.3 0 0 0-10.8 14.2 13.7 13.7 0 0 0-3.8-.8c2-5.4 3-11.2 2.6-16.9-.3-4.7-1.6-9.7-5-13-3.6-3.2-9-3.6-12.2-.2 2.4-11.9-4.9-25-16.2-29.3-11.4-4.3-25.2 2.1-31.4 12.6 2.2-5.7 3.8-12 2.1-17.8-1.6-5.8-7.6-10.7-13.5-9.3-1.8-3.4-3.7-7-7.1-8.6-3.4-1.6-9.4-.4-9.6 3.3-.1-3.8-3-7.4-6.8-8.3-3.8-1-6.9 1.6-8.8 4.9-2.4-7.3-6-14.5-11.5-19.9a26.8 26.8 0 0 0-20.9-8.1c-7.6.8-15 6.4-16.4 14a7.3 7.3 0 0 0-7.3.2c-2.1 1.4-1.6 3.7-1.5 6.2-12.3-2.1-25.6 2.7-33.7 12.3s-10.4 23.6-6.2 35.4c-4.2-3-9.9-3.8-14.7-2a15.9 15.9 0 0 0-9.6 11.3c-.8-3-3.9-5.2-7-5-3 .3-4.8 1.1-5 4.2-11.6-17.5-35.6-25.7-55.4-18.8s-32.9 28.2-31 49.1a32.5 32.5 0 0 0-44.7 10.4c-2.5 4-4 9-1.7 13a14 14 0 0 0-14.7 0c-.9.5-1.6 1.5-2.4 2-.8.3-2.3.2-3.2.5-1.3.3-2.5.9-3.6 1.6a7.9 7.9 0 0 0-3 3c-.7 1.3-.7 2.9.1 4 .9 1.4 2.6 1.9 4.1 2.2 6 1.4 12 2.2 18.1 2.8l3.6.7a165.3 165.3 0 0 0 13 1 64.2 64.2 0 0 0 14.5-1.5c.5 0 1.6-.6 2-.4 31.8 8.8 65.2 8.1 97-.9a38 38 0 0 0 33.8.2c25.9 6.3 53 5.6 78.7-1.7a20.8 20.8 0 0 0 18.3-.5c18.3 6.5 38.3 6.5 57.2 2a37.2 37.2 0 0 0 33.1-.5 95.3 95.3 0 0 0 23.3 3.7 70.3 70.3 0 0 0 59-4.6 255.4 255.4 0 0 0 151.5 5.8 194.7 194.7 0 0 0 135.8-5c11 12 32.4 12.4 44.8 2a58 58 0 0 0 51.6-1.8c12.8 2.2 23.9 3 36.9 1.5 10-1.1 11.6-6.6 28.5-9 10 .2 19.9-.2 29.8-1.1h6.1c3.9 3 10.5 2.2 14.5-.6 1.8-1.3 3.3-3.1 5.5-3.9 3.6-1.3 7.5 1 11 2.6 9 3.8 20 2 27.2-4.3 15.3 13.5 39.6 17.4 56.8 6.4 3 3.2 10.9 2.3 15.2 1.5 4.3-.9 8.4-2.6 12.7-2.9 5-.2 9.7 1.6 14.5 2.6 4.8 1 10.3 1 14-2.3a57.7 57.7 0 0 0 52-.3c8.1 3.5 17.7 3 25.8-.9 4.2 4.5 12.1 5.5 17 1.6 3.6 2.8 9.1 2.8 12.6-.1a77.7 77.7 0 0 0 69.6-1.3 54.4 54.4 0 0 0 45.6 3.7c1.8-.7 3.6-1.7 5.2-2.9 2.2 3.7 6.4 5.9 10.6 6.5 4.8.8 9.7-.2 14.5-1.2 7.7-1.6 14.7-4.8 22.4-6.4 8.6 8.2 24.3 9.5 32 .5 1 5 7 7 12 6.8 5-.3 10.3-1.7 15 0 3.1 1.3 5.5 3.7 8.4 5.4 5 2.9 12.6 3.4 17.7.6 22 7.5 46.8 6.4 67.7-3.7 20 8.6 42.2 12 63.7 9.6 8.7-.9 18.6-3.8 21.8-11.8 4.4 5.5 16 4 19.8-1.8a262 262 0 0 0 78.9 12c12.9 0 28.1-2 36-12.1a22.3 22.3 0 0 0 32.9 1.2c3.4 2.7 9.8 1.1 11.6-2.9a28 28 0 0 0 20 13.5 25 25 0 0 0 21.9-6.3 22 22 0 0 0 16.4 8.6 22 22 0 0 0 17-7.2c4.5 4.7 14.2 3.2 16.2-3 16.4 13.4 42 10.3 57.9-3.6l.3 2.6c4.4 2.5 10-.5 10.8-5.4 8.3 6 20.5 5.8 28.5-.4 2-1.6 3.8-3.6 3.9-6.1 0-1.3-.7-2.5-1.6-3.3z"/>
<path id="sky-trail" d="M761.4 357.6C510.3 325.4 251.1 294.2 0 326.4v35c251.4-18.6 505.6 10.7 756 37 246.7 26 499.7 68.9 745 40.6V417c-245.3 24.3-495.5-28-739.6-59.3z" opacity=".1" fill="#fff"/>
<g id="sand-group">
<path fill="#e6d3b0" d="M0 715h1500.9v285H0z"/>
<g class="st11">
<path class="st10" d="M0 715h1500.9v71.8H0z"/>
</g>
<g class="st11">
<path class="st10" d="M0 715h1500.9v52.3H0z"/>
</g>
</g>
<g id="wave-group">
<path class="st12" d="M0 726v20.3c250 0 250 56.3 500 56.3s250-56.3 500-56.3 250 36.6 500 36.6 250-36.6 500-36.6V715H0v11z"/>
<path class="st13" d="M0 746.3c250 0 250 56.3 500 56.3s250-56.3 500-56.3 250 36.6 500 36.6 250-36.6 500-36.6"/>
<g>
<path class="st12" d="M2000 726v20.3c250 0 250 56.3 500 56.3s250-56.3 500-56.3 250 36.6 500 36.6 250-36.6 500-36.6V715H2000v11z"/>
<path class="st13" d="M2000 746.3c250 0 250 56.3 500 56.3s250-56.3 500-56.3 250 36.6 500 36.6 250-36.6 500-36.6"/>
</g>
</g>
<g id="water-group">
<path id="water_1_" class="st12" d="M0 643.4h1501V724H0z"/>
<path class="st14" d="M0 643.4h1501v58.3H0z"/>
<path class="st14" d="M0 643.4h1501v45.3H0z"/>
<path class="st14" d="M0 643.4h1501v32.4H0z"/>
<path class="st14" d="M0 643.4h1501v21.1H0z"/>
</g>
<g id="rocks-1">
<path class="st15" d="M520.2 690.3a39.4 39.4 0 0 1 21.7-35.4 45.4 45.4 0 0 1 40.7 2.8 59.5 59.5 0 0 1 25.7 32.6"/>
<path class="st16" d="M584.6 680.1c-25.7 6.2-49.4 5.2-62.8-1.3a34.6 34.6 0 0 0-1.6 11.5h88a65 65 0 0 0-7.2-15c-5.2 1.8-10.7 3.5-16.4 4.8z"/>
<g>
<path class="st17" d="M588.4 690.3c-.4-9.4 5.8-19.6 14.3-23.5s19-2.9 27.1 1.8 14 12.8 17 21.7"/>
<path class="st16" d="M622.9 682.5a80.3 80.3 0 0 1-33.7 1c-.6 2.2-1 4.5-.8 6.8h58.4c-1.6-4.8-4-9.3-7.2-13.2-5 2.2-10.7 4-16.7 5.4z"/>
</g>
<path class="st18" d="M629.8 696a109.5 109.5 0 0 1-32.5-.5c-4 1.3-9 2.4-14.7 3.3a164.5 164.5 0 0 1-40.7.7c-12.9-1.5-22.2-5.5-21.7-9.2h126.6c-3 2.3-8.9 4.4-17 5.6z"/>
<g>
<path class="st15" d="M1062.4 689.5c-.5-13.2 8.2-27.6 20.2-33s26.6-4 38 2.6 19.8 18 24 30.4"/>
<path class="st16" d="M1122.4 680c-23.9 5.7-46 4.8-58.5-1.2-1 3.5-1.6 7.2-1.5 10.7h82.2c-1.7-5-4-9.7-6.9-14a150 150 0 0 1-15.3 4.5z"/>
<path class="st19" d="M953.8 689.5c0-16.4 21-46.4 43-56 22-9.8 42.8-9.9 63.7 1.9 21 11.7 43 31.9 50.8 54.1"/>
<path class="st16" d="M1048.7 677.7c-35.6 6-68.4 3.7-90.2-5-3 6.3-4.8 12-4.7 16.8h157.5c-3-8.8-8.4-17.4-15-25.1-14 5.7-30.2 10.4-47.6 13.3z"/>
<g>
<path class="st17" d="M908 689.5a24.4 24.4 0 0 1 13.4-22 28 28 0 0 1 25.2 1.8c7.6 4.4 13.1 12 16 20.2"/>
<path class="st16" d="M940.1 682.3a75 75 0 0 1-31.4.8c-.5 2.1-.8 4.3-.8 6.4h54.6a39.5 39.5 0 0 0-6.8-12.3 87 87 0 0 1-15.6 5z"/>
</g>
<path class="st18" d="M1120.6 697.8c-10 1.6-22.5 2.1-33.5 1.2a232.3 232.3 0 0 1-90.3 5.8c-17.5-2-34.3-7.7-40.5-12.1a55 55 0 0 1-9.7 2.3 97.1 97.1 0 0 1-25.2.5c-8-1-13.8-3.6-13.4-6H1144.6a54.2 54.2 0 0 1-24 8.3z"/>
</g>
</g>
<g id="rocks-2">
<path class="st15" d="M2020.2 690.3a39.4 39.4 0 0 1 21.7-35.4 45.4 45.4 0 0 1 40.7 2.8 59.5 59.5 0 0 1 25.7 32.6"/>
<path class="st16" d="M2084.6 680.1c-25.7 6.2-49.4 5.2-62.8-1.3a34.6 34.6 0 0 0-1.6 11.5h88a65 65 0 0 0-7.2-15c-5.2 1.8-10.7 3.5-16.4 4.8z"/>
<g>
<path class="st17" d="M2088.4 690.3a26.2 26.2 0 0 1 14.3-23.5c8.6-4 19-2.9 27.1 1.8 8.1 4.7 14 12.8 17 21.7"/>
<path class="st16" d="M2122.9 682.5a80.3 80.3 0 0 1-33.7 1c-.6 2.2-1 4.5-.8 6.8h58.4c-1.6-4.8-4-9.3-7.2-13.2-5 2.2-10.7 4-16.7 5.4z"/>
</g>
<path class="st18" d="M2129.8 696a109.5 109.5 0 0 1-32.5-.5c-4 1.3-9 2.4-14.7 3.3-12.2 1.8-27.8 2.2-40.7.7s-22.2-5.5-21.7-9.2h126.6c-3 2.3-8.9 4.4-17 5.6z"/>
<g>
<path class="st15" d="M2562.4 689.5c-.5-13.2 8.2-27.6 20.2-33s26.6-4 38 2.6a55.4 55.4 0 0 1 24 30.4"/>
<path class="st16" d="M2622.4 680c-23.9 5.7-46 4.8-58.5-1.2-1.1 3.5-1.6 7.2-1.5 10.7h82.2c-1.7-5-4-9.7-6.9-14a149 149 0 0 1-15.3 4.5z"/>
<path class="st19" d="M2453.8 689.5c0-16.4 21-46.4 43-56 22-9.8 42.8-9.9 63.7 1.9s43 31.9 50.8 54.1"/>
<path class="st16" d="M2548.7 677.7c-35.6 6-68.4 3.7-90.2-5-3 6.3-4.8 12-4.7 16.8h157.5c-3-8.8-8.4-17.4-15-25.1-14 5.7-30.2 10.4-47.6 13.3z"/>
<g>
<path class="st17" d="M2408 689.5a24.4 24.4 0 0 1 13.4-22 28 28 0 0 1 25.2 1.8c7.6 4.4 13.1 12 16 20.2"/>
<path class="st16" d="M2440.1 682.3a75 75 0 0 1-31.4.8c-.5 2.1-.8 4.3-.8 6.4h54.6a39.5 39.5 0 0 0-6.8-12.3 87 87 0 0 1-15.6 5z"/>
</g>
<path class="st18" d="M2620.6 697.8c-10 1.6-22.5 2.1-33.5 1.2a232.3 232.3 0 0 1-90.3 5.8c-17.5-2-34.3-7.7-40.5-12.1a55 55 0 0 1-9.7 2.3 97.1 97.1 0 0 1-25.2.5c-8-1-13.8-3.6-13.5-6h236.7a54.2 54.2 0 0 1-24 8.3z"/>
</g>
</g>
<g id="ball-group">
<ellipse cx="1542.7" cy="820.4" rx="30.2" ry="8.9" opacity=".2" fill="#070707"/>
<g id="ball">
<path class="st21" d="M1550 758l2-.3c2.3-.3 2.4-.3 3.6-.3a34.2 34.2 0 0 1 8.1.7c2.7.7 3 .7 4.7 1.4 2.7 1 3 1.2 5.1 2.4 2.6 1.5 3.2 1.9 5.5 3.8-5.6-4.8-14-5.8-23-2.4-1.6-1.3-4.3-1.8-7-1.2 0-2.6.4-4 1-4"/>
<path class="st22" d="M1527.7 773.1l1-1.4a33.2 33.2 0 0 1 6.4-6.8l3.4-2.4c2.2-1.3 2.2-1.3 3.4-1.8l3.3-1.4 3.4-1 1.4-.2c-.6 0-1 1.4-1 4a12 12 0 0 0-4 1.5 8.6 8.6 0 0 0-2.7 2.6c-3.1.2-10.4.7-14.6 7"/>
<path class="st21" d="M1534.2 817.8a37.4 37.4 0 0 1-5.1-5.5c-1.8-2.6-2.2-3.2-3.7-6.3-.6-1.3-1.3-3.1-1.7-4.5l-1-4.2c-.4-3.1-.5-4-.4-7.8.3-3.2.4-3.8 1.2-7 1-3 1.1-3.5 2.3-6l2-3.4c1.4-2 4.7-6.5 14.5-7-1.2 2-1.1 4 .5 5.4-11.4 10.2-17.6 25.7-14.1 37.5 1 3.7 3 6.6 5.5 8.8"/>
<path class="st22" d="M1563.6 825.4c-.7 0-1.7.3-2.4.4l-3.6.3c-2.5 0-2.6 0-4-.2-2.5-.2-2.6-.3-4.2-.6-2.6-.6-2.9-.7-4.6-1.3-2.7-1-3.1-1.3-5.2-2.4-2.5-1.6-3-1.9-5.4-3.8a18.2 18.2 0 0 1-5.5-8.8c-3.5-11.8 2.7-27.3 14.1-37.5 1.6 1.4 4.4 1.8 7.1 1.2 3.4 23.5 10.9 52 13.7 52.6"/>
<path class="st21" d="M1585.8 809.8l-1.3 2a33.2 33.2 0 0 1-6.5 6.7c-2 1.6-2.1 1.7-3.4 2.4l-3.3 1.9c-2.2 1-2.2 1-3.4 1.3l-3.3 1-1 .2c-3.6-1.9-11.1-34.2-13.7-52.6 1.3-.3 2.7-.8 3.9-1.6a8.4 8.4 0 0 0 2.7-2.6c14.1 4.7 27 16.2 30.4 28 1.6 5.3 1 9.8-1.1 13.3"/>
<path class="st22" d="M1579 765.7l3.5 3.5a37.3 37.3 0 0 1 7 12.8l1 4.1c.4 3.2.5 4 .4 7.9-.3 3.1-.4 3.8-1.2 7-1 3-1.1 3.4-2.3 6-.5.8-1 2-1.6 2.8 2.2-3.5 2.7-8 1.1-13.3-3.5-11.8-16.3-23.2-30.3-28 1.1-1.8 1-3.8-.6-5.2 9-3.4 17.4-2.4 23 2.4"/>
<path d="M1556.5 763c2.5 2.3 1.5 6-2.4 8.4s-9.2 2.6-11.8.3c-2.5-2.2-1.5-6 2.4-8.3s9.2-2.6 11.8-.4" fill="#c9c9c9"/>
<path class="st22" d="M1556 763.3c2.4 2 1.4 5.6-2.2 7.8-3.7 2.3-8.6 2.4-11 .4s-1.4-5.6 2.2-7.9c3.7-2.2 8.6-2.4 11-.3"/>
</g>
<path d="M1563.6 825.4l1-.3c1.1-.2 1.1-.2 3.3-1l3.4-1.3 3.3-1.8 3.4-2.4c1.3-1 1.4-1.1 3.3-3 1.4-1.4 1.5-1.6 3.2-3.9l1.3-1.9.4-.6-.4.6a73.5 73.5 0 0 0 2.6-5.2 39.9 39.9 0 0 1-65.5-19.3 37.7 37.7 0 0 0 .8 16.2c.4 1.4 1 3.2 1.6 4.6 1.5 3 2 3.6 3.8 6.3 1.9 2.3 2.6 3.1 4.2 4.6l.5.4.4.4a37.1 37.1 0 0 0 10.6 6.2l4.6 1.4 4.3.6h3.9l3.6-.2 2.4-.4" opacity=".2"/>
<g class="st25">
<path class="st26" d="M1587.2 790.5a34.8 34.8 0 0 0-18.6-25.6M1564 763.1c-1-.6-2-1-3-1"/>
</g>
</g>
<g id="bird">
<g id="back-wing">
<path class="st29" d="M1579.4 189c.2-.2 2-3.5 2.9-5.8a48.3 48.3 0 0 1 26.7-26.4c11.9-5.2 25-8 38-8.6-8-2.8-16-4.4-24.2-5.8a52.8 52.8 0 0 0-24.8 1.3 52.8 52.8 0 0 0-24 17.7c-5 6.3-9 13.2-12.8 20.2-1.1 2-2.8 7.1-2.7 7.4h21z"/>
<path class="st30" d="M1619 142l11.9 8c5.3-1 10.7-1.5 16-1.8a144.1 144.1 0 0 0-27.8-6.3z"/>
</g>
<g id="bird-body">
<path d="M1523.5 192.2l-7.4.3c-.7 0-1.3-.5-1.4-1.3-.1-.8.2-1.6.9-1.8l7-2.3c2-.6 4.3 0 4.6 1.8.3 1.7-1.6 3.2-3.8 3.3z" fill="#d3b846"/>
<path class="st29" d="M1636.5 190.6c.8 0 1.5.6 1.8 1.3.3.9.5 2-.4 3.1-1.5 2-6.8 2.7-8.2 3.8s-15.2-2-18.1-2.3c-2.3-.2-5.1 1.2-7.2 1.8-4.8 1.5-9.6 2.9-14.5 4a116 116 0 0 1-36.7 3.2c-3.3-.3-6.6-.8-9.7-2-3.6-1.4-6.6-3.8-9.8-6-3-1.8-7.3-2.8-9.5-5.5a6 6 0 0 1-1-1.6c-.4-1-.4-2.2-.1-3.2.3-1.2 1-1.8 1.7-2.6a21 21 0 0 1 4.5-4c1.6-1 3.5-1.5 5.4-1.7 16.1-1.3 30.8-1.9 46.8.5 17.8 2.8 37 9.8 55 11.2z"/>
<path d="M1569 199.4c-15.3 0-38.2-6.9-45.9-9.5 0 0-4.2.8-8.4 1.3.1.8.7 1.4 1.4 1.3l7.3-.3.9-.1c2.2 2.7 6.5 3.6 9.4 5.5 3.2 2 6.2 4.5 9.8 6a34 34 0 0 0 9.7 1.8 116 116 0 0 0 36.7-3c4.9-1.2 9.7-2.6 14.5-4 2.1-.7 4.9-2 7.2-1.9 2.9.3 16.6 3.3 18 2.2.6-.4 1.8-.7 3-1.1-2.2-1.8-5-2.7-7.8-3.4-18.3-4.2-37 5-55.9 5.2z" opacity=".3" fill="#020202"/>
<circle cx="1532.1" cy="184.1" r="2.1"/>
<circle class="st29" cx="1531.4" cy="183.5" r=".7"/>
</g>
<g id="front-wing">
<path class="st29" d="M1555.1 158c3.5-12.5 13.3-22.6 24.7-28.6s24.5-8.5 37.4-9.5c-7.3 4.4-14.6 8.8-21.2 14.2a57.9 57.9 0 0 0-16 19.6 84.4 84.4 0 0 0-5.6 35.3h-19.3l-.9-6.1c-.9-8.3-1.4-16.8 1-25z"/>
<path class="st30" d="M1605.2 127.4c3.9-2.6 8-5 12-7.5-9.4.7-18.8 2.2-27.7 5.3l15.7 2.2z"/>
</g>
</g>
<g id="surfboard-1">
<path class="st33" d="M1660.6 942.5c-38.1 6.2-91.1 31.3-126.3 47.6-4.4 2-2.6 8.8 2.3 8.2a858 858 0 0 0 223-59.8c3.7-1.6 4-6.7.1-8.1l-41-15.2a4.3 4.3 0 0 0-3.4.2l-53.5 26.7-1.2.4z"/>
<path class="st34" d="M1660.8 943.3c34.3-16.2 74.8-19.5 103.4-9.3"/>
<path d="M1762.5 380.6s-99.1 76.3-117.7 271.5c-9.2 97.8 7.4 226.1 18 289.6 30.8-13.7 66-17.3 98.8-9.4 23-64.6 57-174 65.4-262.9 18.5-195.3-64.5-288.8-64.5-288.8z" fill="#dee9e5"/>
<path d="M1804.3 458.6c-19-52.4-41.8-78-41.8-78s-87.5 67.3-113.4 237.3a467.8 467.8 0 0 1 155.2-159.3z" fill="none"/>
<path d="M1649 618c-1.6 11-3 22.3-4.2 34.1-2.8 30-3.2 62.8-2.1 95.7a464.4 464.4 0 0 1 186-168.1 436 436 0 0 0-24.4-121A468 468 0 0 0 1649 617.8z" fill="#74adb9"/>
<path d="M1642.7 747.9c1.3 37.9 4.5 76 8.4 110a461.8 461.8 0 0 1 169-138.6 565.2 565.2 0 0 0 8.5-139.6 464.2 464.2 0 0 0-186 168.1z" fill="#384a54"/>
<path d="M1702.4 930a457 457 0 0 1 78.5-55.4c14.7-46.8 30-102.5 39.3-155.3A461.7 461.7 0 0 0 1651 857.9c3.7 33 8 62.2 11.7 83.8 12.6-5.6 26-9.5 39.6-11.6z" fill="#cecd8d"/>
<path d="M1761.6 932.3c6-16.6 12.6-36.2 19.3-57.7a457.5 457.5 0 0 0-78.5 55.5c19.6-3.1 39.8-2.5 59.2 2.2z" fill="#a88d72"/>
<path d="M1762.5 380.6s-99.1 76.3-117.7 271.5c-9.2 97.8 7.4 226.1 18 289.6 4.4-2 9-3.7 13.7-5.3-3.6-21.5-7.8-50.4-11.5-83.6-11-99-9.2-163-5.8-199.3a528 528 0 0 1 25-120.4c10.1-29.4 22.8-56.7 37.8-81 14.9-24.1 29.2-40.6 38.5-50 20 30 66.3 117.5 52.2 266-6.2 65.6-27 142-43.2 194.6-7.9 25.6-15.6 48.3-22.2 67 4.8.6 9.6 1.5 14.3 2.6 23-64.6 57-174 65.4-263 18.5-195.2-64.5-288.7-64.5-288.7z" fill="#ebf2ef"/>
<g class="st25">
<path class="st42" d="M1764.2 438.4a4.4 4.4 0 0 1-3-2.7l-3.9-10.2a4.4 4.4 0 0 1 8.3-3.2l4 10.2a4.4 4.4 0 0 1-5.4 5.9zM1798.9 687.3c-2-.5-3.4-2.4-3.2-4.6a591.4 591.4 0 0 0-27.3-232.5 4.4 4.4 0 1 1 8.4-2.7 600.4 600.4 0 0 1 27.7 236 4.4 4.4 0 0 1-5.6 3.8z"/>
</g>
<path class="st43" d="M1703 930c.7-98.8 9.6-297.8 59.5-549.4 0 0-99.1 76.3-117.7 271.5-9.2 97.9 7.4 226.1 18 289.7 12.8-5.8 26.3-9.7 40.2-11.8z"/>
</g>
<g id="surfboard-2">
<path class="st33" d="M1654.3 942.6c-38.2 5-92 28.5-127.6 43.7-4.5 2-2.9 8.7 2 8.3a858 858 0 0 0 224.7-53c3.8-1.5 4.2-6.6.4-8.1l-40.5-16.4a4.3 4.3 0 0 0-3.5 0l-54.3 25.1-1.2.4z"/>
<path class="st34" d="M1657.4 939.9c34.8-11.7 70.9-16.2 108.3-1.7"/>
<path d="M1657.3 939.9c4.8-1.7 9.6-3.3 14.6-4.6 29.3-7.7 63.2-9.6 92 1.6l3.2 1c4.5-71 7.8-200.7-11-298.7-39.4-204.8-152-275.5-152-275.5s-78.4 107.5-39 312.2c17.2 89.6 61.5 197.1 92.2 264z" fill="#e5e0d1"/>
<path class="st21" d="M1560 645.7a640.8 640.8 0 0 0 10.5 55.7l76.7-113.2 113.2 76.7a621.4 621.4 0 0 0-10.8-55.7l-113-76.6-76.6 113z"/>
<path class="st21" d="M1657.9 643.7l-73.5 108.5c4.9 16 10.2 32 15.8 48l68.4-101 100.8 68.4c-.6-16.8-1.6-33.7-3-50.4l-108.5-73.5z"/>
<path class="st21" d="M1679.3 754.8l-62 91.3c6.2 15.5 12.3 30.4 18.3 44.5l54.3-80.3 80.3 54.4c.3-15.3.5-31.4.4-48l-91.3-61.9z"/>
<path class="st21" d="M1671.9 935.3a194 194 0 0 1 33.9-5.7l5.5-8.1 11.3 7.6c14.2.4 28.3 2.7 41.3 7.8l3.2 1c.5-8 1-16.6 1.4-26l-67.9-46-46 68 2.7 6c4.8-1.7 9.7-3.3 14.6-4.6z"/>
<path d="M1657.3 939.9c4.8-1.7 9.6-3.3 14.6-4.6h.2c-8-17.4-17.2-38-26.6-60.6-40.8-97.8-58.1-163.7-65.4-201.7-8.7-45-12.2-88.9-10.3-130.3 1.4-33 6.2-64.6 14.3-93.8 8-29.1 17.6-50.1 24.3-62.6 29.4 24.7 102.7 100 132.6 255.8 13.3 68.9 15 153 14 211.5-.4 30.5-1.6 57.8-3 79.5 4 1 8 2.3 12 3.8l3.1 1c4.5-71 7.8-200.7-11-298.7-39.4-204.8-152-275.5-152-275.5s-78.4 107.5-39 312.2c17.2 89.6 61.5 197.1 92.2 264z" fill="#f7f5ed"/>
<g class="st25">
<path class="st42" d="M1623 422.2c-1.4 0-2.8-.6-3.8-1.9l-7-9.2a4.7 4.7 0 0 1 7.5-5.7l7 9.2a4.7 4.7 0 0 1-3.7 7.6zM1732.7 665.9a4.7 4.7 0 0 1-4.6-3.8 628.5 628.5 0 0 0-97.2-229 4.7 4.7 0 0 1 7.7-5.4 638.1 638.1 0 0 1 98.7 232.5 4.7 4.7 0 0 1-4.6 5.7z"/>
</g>
<path class="st43" d="M1657.3 939.9a188.3 188.3 0 0 1 46.5-10.2c-29.2-104.8-76.6-304.9-99.7-566 0 0-78.4 107.5-39 312.2 17.2 89.6 61.5 197.1 92.2 264z"/>
</g>
<g id="fence-1">
<path class="st46" d="M1501 931.8c-86.7 0-150.3 33.8-226.5 42.3-240.7 26.7-487.8 4.3-730.3-18.6-67-6.3-138-8.8-210-10.5-113-2.7-207.3-13.2-334-13.2"/>
<path class="st47" d="M74.6 1000H40.1l-9-121.1 34.5-1.1zM160.1 1000h-34.5l7.6-132.5 34.5 1zM251.6 1000h-34.5l12.2-153.3 34.5 1.5zM354.4 1000H320l-5.8-131.7 34.5-.7zM448.9 1000h-34.5l-7.1-146 34.5-.9zM542.1 1000h-34.5l-6-142 34.5-.7zM918.2 1000h-34.5L876 874.7l34.5-1zM722 1000h-34.5l9.5-122.2 34.5 1.1zM816.9 1000h-34.5l7.3-101.5 34.5.9zM1005.4 1000h-34.6l5.6-106.6 34.5.7zM627.6 1000h-34.5l10.6-132.6 34.5 1.3zM1106.8 1000h-34.5l-9.7-110.8 34.5-1.1zM1195.9 1000h-34.5l-.3-121.7h34.5zM1286.9 1000h-34.5l5.3-108.6 34.5.6zM1386.5 1000H1352l-6.3-111 34.5-.8zM1474.6 1000h-34.5l5-122 34.6.6z"/>
</g>
<g id="fence-2">
<path class="st46" d="M3001.6 931.8c-86.6 0-150.2 33.8-226.5 42.3-240.6 26.7-487.7 4.3-730.3-18.6-67-6.3-138-8.8-209.9-10.5-113-2.7-207.3-13.2-334-13.2"/>
<path class="st47" d="M1575.3 1000h-34.5l-9-121.1 34.4-1.1zM1660.8 1000h-34.5l7.6-132.5 34.5 1zM1752.3 1000h-34.5l12.2-153.3 34.5 1.5zM1855 1000h-34.4l-5.8-131.7 34.5-.7zM1949.5 1000H1915l-7-146 34.4-.9zM2042.8 1000h-34.5l-6-142 34.5-.7zM2418.9 1000h-34.5l-7.8-125.3 34.5-1zM2222.7 1000h-34.5l9.4-122.2 34.5 1.1zM2317.5 1000H2283l7.4-101.5 34.5.9zM2506 1000h-34.5l5.6-106.6 34.5.7zM2128.3 1000h-34.5l10.6-132.6 34.5 1.3zM2607.4 1000H2573l-9.6-110.8 34.4-1.1zM2696.6 1000H2662l-.4-121.7h34.6zM2787.6 1000H2753l5.3-108.6 34.5.6zM2887.2 1000h-34.5l-6.3-111 34.5-.8zM2975.3 1000h-34.5l5-122 34.6.6z"/>
</g>
</g>
</svg>
Raw
script.js
// Animation created for Skillshare class on Animating SVG https://skl.sh/2SgBfAR
// Beach Ball
TweenMax.to("#ball-group", 30, {x:-1700, repeat:-1, ease: Power0.easeNone, repeatDelay:10})
TweenMax.to("#ball", 30, {rotation:"-4000deg", repeat:-1, transformOrigin: "center center", ease: Power0.easeNone, repeatDelay:10})
// Sun
TweenMax.to("#sun-band-1, #sun-band-2", 4, {scale:1.3, transformOrigin: "center center", repeat:-1, yoyo:true})
TweenMax.set("#sun-group", {x:1150})
// Fence
TweenMax.to("#fence-1, #fence-2", 4, {x:-1500, repeat:-1, ease: Power0.easeNone})
// Waves
TweenMax.to("#wave-group", 20, {x:-2000, repeat:-1, ease: Power0.easeNone})
TweenMax.to("#wave-group", 5, {scaleY:.5, repeat:-1, yoyo:true, ease: Power1.easeInOut, transformOrigin:"top center"})
// Rocks
TweenMax.to("#rocks-1, #rocks-2", 60, {x:-1500, repeat:-1, ease: Power0.easeNone})
// Clouds
TweenMax.to("#clouds-1, #clouds-2", 100, {x:-2000, repeat:-1, ease: Power0.easeNone})
// Islands
TweenMax.to("#islands-1, #islands-2", 200, {x:-1500, repeat:-1, ease:Power0.easeNone})
// Surfboards
TweenMax.to("#surfboard-1", 20, {x:-2000, ease:Power0.easeNone, repeat:-1, delay:20, repeatDelay:30})
TweenMax.to("#surfboard-2", 20, {x:-2000, ease:Power0.easeNone, repeat:-1, repeatDelay:30})
// Bird
TweenMax.to("#bird", 8, {x:-2000, repeat:-1, })
TweenMax.to("#bird", 3, {y:200, repeat:-1, yoyo:true, ease: Power1.easeInOut, repeatDelay:7})
TweenMax.to("#front-wing, #back-wing", 1, {scaleY: -1.1, repeat:-1, transformOrigin:"bottom center", yoyo:true})
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
Raw
style.css
.beach-roadtrip {
width: 98vw;
height: 100vh;
}
.st4 {
fill: #486b5c;
}
.st5 {
opacity: 0.55;
fill: #e6d3b0;
}
.st6 {
fill: #e9f4f2;
}
.st10 {
fill: #070707;
}
.st11 {
opacity: 0.05;
}
.st12,
.st13 {
fill: #58ac9d;
}
.st13 {
stroke: #b7eae0;
stroke-width: 11;
stroke-miterlimit: 10;
}
.st14 {
opacity: 0.14;
fill: #379;
}
.st15 {
fill: #4c3d38;
}
.st16 {
opacity: 0.2;
}
.st17,
.st18 {
fill: #63524e;
}
.st18 {
opacity: 0.1;
}
.st19 {
fill: #594842;
}
.st21 {
fill: #c1272d;
}
.st22 {
fill: #f9f9f9;
}
.st25 {
opacity: 0.89;
}
.st26,
.st28 {
fill: none;
stroke: #fff;
stroke-width: 7;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st28 {
stroke: #ededed;
stroke-width: 10;
}
.st29 {
fill: #fff;
}
.st30 {
fill: #595959;
}
.st33 {
opacity: 0.1;
}
.st34 {
opacity: 0.28;
fill: none;
stroke: #000;
stroke-width: 5;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st42 {
fill: #f7f3e8;
}
.st43 {
opacity: 0.09;
fill: #1e1e1e;
}
.st46 {
fill: none;
stroke: #2d2824;
stroke-width: 2;
stroke-miterlimit: 10;
}
.st47 {
fill: #785c47;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment