Skip to content

Instantly share code, notes, and snippets.

@diysoho
Created October 15, 2018 08:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save diysoho/31ec9c06d98a17e47fa817fe79538b5d to your computer and use it in GitHub Desktop.
Save diysoho/31ec9c06d98a17e47fa817fe79538b5d to your computer and use it in GitHub Desktop.
SVG Space Rocket!
<div class="container">
<svg class="rocket-svg" version="1.1" x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" >
<defs>
<clipPath id="clipPath">
<circle id="rocketMask" cx="300" cy="300" r="80" />
</clipPath>
<symbol id="rocket-symbol">
<path fill="#C63121" d="M361.2,305.8c-0.4,28.4-5.3,59.2-14.7,92.3c30,16.6,51.4,26,64.1,27.9C409.5,388,393,347.9,361.2,305.8"/>
<path fill="#C63121" d="M252.4,398.2c-9.4-33.2-14.2-64-14.7-92.3c-31.8,42-48.3,82.1-49.4,120.3C201,424.2,222.3,414.8,252.4,398.2
z"/>
<path fill="#45252E" d="M280.6,423.8h12h13.6h11.7h5.6l7.4-25.6h-31.5h-32.3l8,25.6H280.6z"/>
<path fill="#E7DECE" d="M252.4,398.2h14.7h32.3V196.3h-34.8c-18.6,31.4-27.6,67.9-27,109.5C238.1,334.2,243,365,252.4,398.2"/>
<path fill="#E7DECE" d="M291.1,237.2c-1.3,1.3-2.2,2.8-2.8,4.5l-2.9-1.6c0.7-1.8,1.7-3.4,3.2-4.9l2.6,1.9
C291.2,237.1,291.2,237.2,291.1,237.2"/>
<path fill="#E7DECE" d="M291.7,257.9c-1-0.6-2-1.4-2.9-2.3c-2.2-2.2-3.6-4.8-4.1-7.8l3.2-0.4c0.4,2.2,1.4,4.2,3.1,5.9
c0.8,0.8,1.8,1.5,2.8,2.1L291.7,257.9z"/>
<path fill="#FFF7F0" d="M334.2,196.3h-34.8v201.9h31.5h15.6c9.4-33.2,14.2-64,14.7-92.3C361.8,264.2,352.8,227.7,334.2,196.3z"/>
<path fill="#BC3122" d="M302.8,156.3c-1.1-0.4-2.2-0.6-3.2-0.6c-1,0-2,0.2-3,0.5c-1.6,0.5-3.3,1.4-5,2.7
c-9.6,7.4-18.5,19.9-26.8,37.4h34.8h34.8c-8.3-17.5-17.2-30-26.8-37.4C305.8,157.7,304.3,156.9,302.8,156.3"/>
<path fill="#BC3122" d="M299.6,115.1c0.4,0.1,0.8,0.1,1.2,0.1c0.6,0,1.2-0.1,1.8-0.2c1-0.3,1.9-0.8,2.7-1.7c1.2-1.2,1.9-2.7,1.9-4.5
c0-1.8-0.6-3.3-1.9-4.5c-0.8-0.8-1.7-1.3-2.8-1.6c-0.5-0.1-1.1-0.2-1.7-0.2c-0.1,0-0.1,0-0.2,0c-1.7,0.1-3.1,0.7-4.3,1.8
c-1.2,1.2-1.8,2.8-1.8,4.5c0,1.8,0.6,3.2,1.8,4.5C297.2,114.3,298.3,114.9,299.6,115.1z"/>
<path fill="#C29A38" d="M300.7,115.3c-0.4,0-0.8,0-1.2-0.1l-3.1,41.1c1-0.3,2-0.5,3-0.5c1.1,0,2.1,0.2,3.2,0.6l-0.3-41.3
C301.9,115.2,301.3,115.3,300.7,115.3z"/>
<g>
<path id="rocket_0_Layer0_1_1_STROKES_1_" fill="none" stroke="#B99849" stroke-linecap="round" stroke-linejoin="round" d="
M323.2,405.1l-4.1,11.6 M315.2,404l-2.8,13.5 M305.9,404.8v12.1 M275.1,403.7l4.1,14.3 M299.3,404.8v12.4 M292.4,403.7v13.8
M283.3,404l3,14.6"/>
</g>
<g>
<g id="rocket_0_Layer0_2_FILL_1_">
<path fill="#A5C6E7" d="M318.9,245.4c0-5.5-1.9-10.1-5.8-14s-8.5-5.8-14-5.8c-5.5,0-10.1,1.9-14,5.8s-5.8,8.5-5.8,14
c0,5.5,1.9,10.1,5.8,14s8.5,5.8,14,5.8c5.5,0,10.1-1.9,14-5.8S318.9,250.9,318.9,245.4z"/>
</g>
</g>
<path fill="none" stroke="#2C292F" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M318.9,245.4
c0,5.5-1.9,10.1-5.8,14s-8.5,5.8-14,5.8c-5.5,0-10.1-1.9-14-5.8s-5.8-8.5-5.8-14c0-5.5,1.9-10.1,5.8-14s8.5-5.8,14-5.8
c5.5,0,10.1,1.9,14,5.8S318.9,240,318.9,245.4z"/>
<g id="rocket_0_Layer0_3_FILL_1_">
<path fill="#FEFEFE" d="M288.8,255.6c0.9,0.9,1.9,1.7,2.9,2.3l2.2-2.5c-1-0.6-2-1.2-2.8-2.1c-1.7-1.7-2.8-3.7-3.1-5.9l-3.2,0.4
C285.2,250.8,286.6,253.4,288.8,255.6 M288.4,241.7c0.5-1.7,1.4-3.1,2.8-4.5c0,0,0.1-0.1,0.1-0.1l-2.6-1.9
c-1.5,1.5-2.5,3.1-3.2,4.9L288.4,241.7z"/>
</g>
</symbol>
<symbol id="rocket-symbol-big">
<path fill="#C63121" d="M370.9,306.7c-0.5,32.9-6.2,68.5-17,106.9c34.8,19.3,59.5,30.1,74.3,32.4
C426.8,401.8,407.7,355.3,370.9,306.7"/>
<path fill="#C63121" d="M244.8,413.6c-10.8-38.4-16.5-74.1-17-106.9c-36.8,48.7-55.9,95.1-57.3,139.3
C185.3,443.7,210.1,432.9,244.8,413.6z"/>
<path fill="#EDBD52" d="M291.4,443.2c-1.1,20.4,1.5,32.9,7.9,37.5c6.4-4.6,9-17.1,7.8-37.5H291.4z"/>
<path fill="#45252E" d="M277.5,443.2h13.9h15.7h13.6h6.5l8.6-29.6h-36.4h-37.5l9.2,29.6H277.5z"/>
<path fill="#D64231" d="M291.4,443.2h-13.9c-10.9,31.2-3.8,59.9,21.3,86.3c25.4-26.4,32.7-55.1,21.8-86.3h-13.6
c1.1,20.4-1.5,32.9-7.8,37.5C292.9,476.1,290.2,463.6,291.4,443.2z"/>
<path fill="#E7DECE" d="M244.8,413.6h17.1h37.5V179.9h-40.3c-21.6,36.3-32,78.6-31.3,126.8C228.3,339.6,234,375.2,244.8,413.6"/>
<path fill="#E7DECE" d="M289.7,227.2c-1.5,1.5-2.6,3.2-3.2,5.2l-3.4-1.8c0.8-2.1,2-4,3.7-5.7l3,2.2
C289.8,227.1,289.8,227.1,289.7,227.2"/>
<path fill="#E7DECE" d="M290.4,251.2c-1.2-0.7-2.3-1.6-3.4-2.7c-2.6-2.6-4.2-5.6-4.7-9l3.8-0.4c0.4,2.6,1.6,4.9,3.6,6.9
c1,1,2.1,1.8,3.2,2.4L290.4,251.2z"/>
<path fill="#FFF7F0" d="M339.6,179.9h-40.3v233.8h36.4h18.1c10.8-38.4,16.5-74.1,17-106.9C371.6,258.4,361.2,216.2,339.6,179.9z"/>
<path fill="#BC3122" d="M303.2,133.6c-1.3-0.5-2.5-0.7-3.8-0.7c-1.1,0-2.3,0.2-3.5,0.6c-1.9,0.6-3.8,1.6-5.8,3.1
c-11.1,8.6-21.5,23.1-31,43.3h40.3h40.3c-9.6-20.3-19.9-34.7-31-43.3C306.7,135.2,304.9,134.2,303.2,133.6"/>
<path fill="#BC3122" d="M299.5,85.8c0.4,0.1,0.9,0.1,1.3,0.1c0.7,0,1.4-0.1,2-0.3c1.1-0.3,2.2-1,3.1-1.9c1.4-1.4,2.2-3.1,2.2-5.2
c0-2-0.7-3.8-2.2-5.2c-0.9-0.9-2-1.5-3.2-1.8c-0.6-0.2-1.2-0.3-1.9-0.3c-0.1,0-0.2,0-0.3,0c-2,0.1-3.6,0.8-5,2.1
c-1.4,1.4-2.1,3.2-2.1,5.2c0,2,0.7,3.8,2.1,5.2C296.7,84.9,298,85.6,299.5,85.8z"/>
<path fill="#C29A38" d="M300.8,86c-0.5,0-0.9,0-1.3-0.1l-3.6,47.6c1.2-0.4,2.4-0.6,3.5-0.6c1.2,0,2.5,0.2,3.8,0.7l-0.3-47.8
C302.2,85.9,301.5,86,300.8,86z"/>
<g>
<path id="rocket_0_Layer0_1_1_STROKES_1_" fill="none" stroke="#B99849" stroke-linecap="round" stroke-linejoin="round" d="
M326.9,421.6l-4.8,13.4 M317.6,420.3l-3.2,15.6 M306.8,421.3v14 M271.1,420l4.8,16.6 M299.2,421.3v14.3 M291.2,420v15.9
M280.7,420.3l3.5,16.9"/>
</g>
<g>
<g id="rocket_0_Layer0_2_FILL_1_">
<path fill="#A5C6E7" d="M321.9,236.7c0-6.3-2.2-11.7-6.7-16.2c-4.5-4.5-9.9-6.7-16.2-6.7c-6.3,0-11.7,2.2-16.2,6.7
c-4.5,4.5-6.7,9.9-6.7,16.2s2.2,11.7,6.7,16.2c4.5,4.5,9.9,6.7,16.2,6.7c6.3,0,11.7-2.2,16.2-6.7
C319.7,248.5,321.9,243.1,321.9,236.7z"/>
</g>
</g>
<path fill="none" stroke="#2C292F" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M321.9,236.7
c0,6.3-2.2,11.7-6.7,16.2c-4.5,4.5-9.9,6.7-16.2,6.7c-6.3,0-11.7-2.2-16.2-6.7c-4.5-4.5-6.7-9.9-6.7-16.2s2.2-11.7,6.7-16.2
c4.5-4.5,9.9-6.7,16.2-6.7c6.3,0,11.7,2.2,16.2,6.7C319.7,225,321.9,230.4,321.9,236.7z"/>
<g id="rocket_0_Layer0_3_FILL_1_">
<path fill="#FEFEFE" d="M287.1,248.5c1.1,1.1,2.2,2,3.4,2.7l2.5-2.9c-1.2-0.6-2.3-1.4-3.2-2.4c-2-2-3.2-4.3-3.6-6.9l-3.8,0.4
C282.9,242.9,284.5,245.9,287.1,248.5 M286.6,232.4c0.6-1.9,1.7-3.6,3.2-5.2c0,0,0.1-0.1,0.1-0.1l-3-2.2c-1.7,1.7-2.9,3.6-3.7,5.7
L286.6,232.4z"/>
</g>
</symbol>
<symbol id="star">
<circle fill="#ededed" cx="1" cy="1" r="1"/>
</symbol>
<symbol id="astronautSymbol" x="0" y="0" viewBox="10 -210 800 800">
<g id="astro-line_1_">
<path fill="none" stroke="#EDEDED" stroke-width="3" stroke-miterlimit="10" d="M110,103c7,32,33,57,65,66c32,8,67-2,86-31
c7-12,14-22,22-32c11-12,25-18,40-21c23-4,45-1,65,11"/>
</g>
<g>
<g>
<g id="Layer0_0_FILL_2_">
<path fill="#CCCCCC" d="M55.7,149.3c0,0,0.1,0,0.1,0H56c0,0,0,0,0,0l0.2,0c0,0,0,0,0,0v-16.1H34.9c0.9,3.7,2.8,6.9,5.6,9.8
C44.8,147.2,49.8,149.3,55.7,149.3 M125.6,149.3c0,0,0.1,0,0.1,0c5.9,0,11-2.1,15.2-6.3c2.9-2.9,4.7-6.1,5.6-9.8h-21.4v16.1
l0.2,0c0,0,0,0,0,0h0h0H125.6 M62.5,53c-4.3,0.9-8.1,2.9-11.4,6.2c-4.5,4.5-6.7,9.9-6.7,16.2V89c3.3-2.1,7.1-3.2,11.3-3.2h0
c0.9,0,1.7,0,2.6,0.1c-1.5-3.9-2.3-8.2-2.3-12.7C56,65.6,58.2,58.9,62.5,53 M137,89V75.4c0-6.3-2.2-11.7-6.7-16.2
c-3-3-6.5-5.1-10.4-6l-0.2,0.8c3.9,5.6,5.8,12,5.8,19.2c0,4.2-0.7,8.1-2,11.8l0.1,0.8c0.7-0.1,1.4-0.1,2.2-0.1h0
C129.9,85.8,133.7,86.9,137,89z"/>
<path fill="#FFFFFF" d="M90.6,38.7c0,0-0.1,0-0.1,0c-9.5,0-17.6,3.4-24.3,10.1c-1.3,1.3-2.5,2.7-3.6,4.2
C58.2,58.9,56,65.6,56,73.3c0,4.6,0.8,8.8,2.3,12.7c0.2,0.6,0.5,1.2,0.8,1.8c1.7,3.6,4,6.9,7.1,9.9c3.3,3.3,6.8,5.7,10.7,7.4
c0.1,0,0.2,0.1,0.2,0.1c0.8,0.3,1.6,0.7,2.5,0.9c3.4,1.1,7.1,1.7,11,1.7c9.5,0,17.7-3.4,24.4-10.1c3.6-3.6,6.2-7.5,7.9-11.8
c0.1-0.3,0.2-0.6,0.3-0.9c1.3-3.6,1.9-7.6,1.9-11.7c0-7.2-1.9-13.5-5.7-19.1l-0.2-0.2c0,0,0-0.1-0.1-0.1l0,0l-0.1-0.1l-0.1-0.1
c0,0,0,0,0,0l-0.1-0.1c0-0.1-0.1-0.1-0.1-0.2c0,0,0-0.1-0.1-0.1c-1.1-1.5-2.3-2.9-3.7-4.3C108.3,42.1,100.1,38.7,90.6,38.7
M140.9,92.1c-1.2-1.2-2.5-2.3-3.9-3.1c-3.3-2.1-7.1-3.2-11.3-3.2h0c-0.7,0-1.5,0-2.2,0.1c-0.1,0-0.2,0-0.3,0c0,0-0.1,0-0.1,0
l-0.3-0.1c-1.7,4.3-4.3,8.3-7.9,11.8c-6.7,6.7-14.9,10.1-24.4,10.1c-3.9,0-7.6-0.6-11-1.7c-0.8-0.3-1.7-0.6-2.5-0.9
c-0.1,0-0.2-0.1-0.2-0.1c-3.9-1.7-7.5-4.2-10.7-7.4c-3-3-5.4-6.3-7.1-9.9c-0.3-0.6-0.5-1.2-0.8-1.8c-0.8-0.1-1.7-0.1-2.6-0.1h0
c-4.2,0-8,1.1-11.3,3.2c-1.4,0.9-2.7,1.9-3.9,3.1c-4.2,4.2-6.3,9.2-6.3,15.2v20.6c0,1.9,0.2,3.7,0.6,5.4h21.4v-22.6v22.6v16.1
v17.3c0.6,3.3,2.2,6.2,4.7,8.7c3.3,3.4,7.3,5,12,5c4.7,0,8.9-1.8,12.7-5.3c2.8-2.6,4.5-5.5,5-8.7v-15.9H78h12.7h13h-13v15.9
c0.5,3.2,2.2,6.1,5,8.7c3.8,3.5,8,5.3,12.7,5.3c4.7,0,8.7-1.7,12-5c2.5-2.5,4-5.4,4.7-8.7v-17.3v-16.1v-22.6v22.6h21.4
c0.4-1.7,0.6-3.5,0.6-5.4v-20.6C147.1,101.4,145.1,96.3,140.9,92.1 M90.7,139.7v-30.1V139.7z"/>
<path fill="#2D2D2D" d="M90.4,24.1c-1.1,0-2,0.4-2.7,1.1c-0.7,0.7-1.1,1.6-1.1,2.7c0,1.1,0.4,2,1.1,2.7c0.7,0.7,1.6,1.1,2.7,1.1
c1.1,0,2-0.4,2.7-1.1c0.7-0.7,1.1-1.6,1.1-2.7c0-1.1-0.4-2-1.1-2.7C92.4,24.4,91.5,24.1,90.4,24.1z"/>
</g>
</g>
<path fill="none" stroke="#2D2D2D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M146.5,133.2
c0.4-1.7,0.6-3.5,0.6-5.4v-20.6c0-5.9-2.1-11-6.3-15.2c-1.2-1.2-2.5-2.3-3.9-3.1c-3.3-2.1-7.1-3.2-11.3-3.2h0
c-0.7,0-1.5,0-2.2,0.1c-0.1,0-0.2,0-0.3,0c0,0-0.1,0-0.1,0 M122.9,85.9c-1.7,4.3-4.3,8.3-7.9,11.8c-6.7,6.7-14.9,10.1-24.4,10.1
c-3.9,0-7.6-0.6-11-1.7c-0.8-0.3-1.7-0.6-2.5-0.9c-0.1,0-0.2-0.1-0.2-0.1c-3.9-1.7-7.5-4.2-10.7-7.4c-3-3-5.4-6.3-7.1-9.9
c-0.3-0.6-0.5-1.2-0.8-1.8c-0.8-0.1-1.7-0.1-2.6-0.1h0c-4.2,0-8,1.1-11.3,3.2c-1.4,0.9-2.7,1.9-3.9,3.1c-4.2,4.2-6.3,9.2-6.3,15.2
v20.6c0,1.9,0.2,3.7,0.6,5.4h21.4v-22.6 M137,89V75.4c0-6.3-2.2-11.7-6.7-16.2c-3-3-6.5-5.1-10.4-6 M119.6,54
c3.9,5.6,5.8,12,5.8,19.2c0,4.2-0.7,8.1-2,11.8 M90.4,31.7c-1.1,0-2-0.4-2.7-1.1c-0.7-0.7-1.1-1.6-1.1-2.7c0-1.1,0.4-2,1.1-2.7
c0.7-0.7,1.6-1.1,2.7-1.1c1.1,0,2,0.4,2.7,1.1c0.7,0.7,1.1,1.6,1.1,2.7c0,1.1-0.4,2-1.1,2.7C92.4,31.3,91.5,31.7,90.4,31.7v7.1
c0,0,0.1,0,0.1,0c9.5,0,17.7,3.4,24.4,10.1c1.4,1.4,2.6,2.8,3.7,4.3c0,0,0,0.1,0.1,0.1c0,0.1,0.1,0.1,0.1,0.2l0.1,0.1c0,0,0,0,0,0
c0,0,0.1,0.1,0.1,0.1c0,0,0,0,0,0c0,0,0,0,0,0l0.1,0.1l0,0c0,0,0,0,0.1,0.1l0.2,0.2c3.8,5.6,5.7,12,5.7,19.1
c0,4.2-0.6,8.1-1.9,11.7c-0.1,0.3-0.2,0.6-0.3,0.9 M119.9,53.2L119.9,53.2C119.9,53.2,119.8,53.2,119.9,53.2
C119.8,53.2,119.8,53.2,119.9,53.2c-0.3-0.1-0.6-0.1-0.8-0.2c0,0-0.1,0-0.2,0c0,0,0,0.1,0.1,0.1c0,0,0,0.1,0,0.1
c0.1,0.1,0.2,0.3,0.3,0.4c0,0,0,0,0,0l0,0c0.1,0.1,0.2,0.3,0.3,0.4c0,0,0,0,0,0 M62.5,53c1.1-1.4,2.3-2.8,3.6-4.2
c6.7-6.7,14.8-10.1,24.3-10.1 M44.5,89V75.4c0-6.3,2.2-11.7,6.7-16.2c3.3-3.3,7.1-5.4,11.4-6.2C58.2,58.9,56,65.6,56,73.3
c0,4.6,0.8,8.8,2.3,12.7 M123.5,85.1C123.5,85.1,123.5,85.1,123.5,85.1L123.5,85.1c0,0,0,0.1,0,0.1c0,0,0,0,0,0.1l-0.2,0.5
c0,0.1-0.1,0.1-0.1,0.2 M125.4,149.3h0.2c0,0,0.1,0,0.1,0c5.9,0,11-2.1,15.2-6.3c2.9-2.9,4.7-6.1,5.6-9.8h-21.4v16.1l0.2,0
M125.4,149.3L125.4,149.3 M78,150.4h12.7h13 M90.7,166.4c0.5,3.2,2.2,6.1,5,8.7c3.8,3.5,8,5.3,12.7,5.3c4.7,0,8.7-1.7,12-5
c2.5-2.5,4-5.4,4.7-8.7v-17.3 M56.3,149.3v17.3c0.6,3.3,2.2,6.2,4.7,8.7c3.3,3.4,7.3,5,12,5c4.7,0,8.9-1.8,12.7-5.3
c2.8-2.6,4.5-5.5,5-8.7v-15.9 M56.3,149.3C56.3,149.3,56.3,149.3,56.3,149.3l-0.3,0c0,0,0,0,0,0h-0.2c0,0-0.1,0-0.1,0
c-5.9,0-11-2.1-15.2-6.3c-2.9-2.9-4.7-6.1-5.6-9.8 M56.3,133.2v16.1 M125.1,110.7v22.6 M90.7,139.7v-30.1"/>
</g>
<g id="Layer0_1_FILL_2_">
<path fill="#7592A0" d="M115.2,90.2c6.8-4.3,10.2-9.5,10.2-15.5c0-5.1-2.4-9.6-7.2-13.4H62.7c-4.8,3.8-7.3,8.3-7.3,13.4
c0,6.1,3.4,11.2,10.2,15.5c6.8,4.3,15.1,6.4,24.7,6.4S108.3,94.5,115.2,90.2z"/>
</g>
<path fill="none" stroke="#2D2D2D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M125.4,74.7
c0,6.1-3.4,11.2-10.2,15.5c-6.8,4.3-15.1,6.4-24.7,6.4s-17.9-2.1-24.7-6.4c-6.8-4.3-10.2-9.5-10.2-15.5c0-5.1,2.4-9.6,7.3-13.4
h55.5C123,65.1,125.4,69.6,125.4,74.7z"/>
<path id="Layer0_1_MEMBER_0_1_STROKES_2_" fill="none" stroke="#E6E6E6" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="
M114.2,69.2c2.4,3.5,2.4,7.8,0,12.7 M66.5,69.2c-2.4,3.5-2.4,7.8,0,12.7"/>
</symbol>
</defs>
<use id="rocketBg" opacity="0.3" xlink:href="#rocket-symbol" x="0" y="0"></use>
<g id="maskedGroup">
<rect clip-path="url(#clipPath)" fill="#111111" width="600" height="600" />
<g class="starGroup" clip-path="url(#clipPath)">
<use class="star" opacity="1" xlink:href="#star" x="0" y="0"/>
</g>
<g class="planet" clip-path="url(#clipPath)" >
<path fill="#FFC144" d="M557.9,99.6c-6.5,4-14.3,7.9-23,11.5c-9.2,3.8-19.4,7.2-30.1,10.1c-11.7,3.2-23.1,5.4-34,6.8
c-0.3,0-0.6,0.1-0.9,0.1c-13.2,1.6-24.8,1.6-33.6,0.1c-10.5-1.8-16.6-5.7-18.2-11.6c-2.1-7.9,4.7-16.9,19.6-26.1
c5-3.1,10.7-6.1,16.9-8.9c-0.8,2.8-1.4,5.8-1.7,8.8c-4.2,2-8,4.1-11.5,6.3c-8.4,5.2-17.8,13-16.4,18.1c1.1,4.2,12.2,9.1,37.9,6.9
c2.2-0.2,4.6-0.4,7-0.7c10.5-1.3,21.7-3.5,33-6.6c12.6-3.4,24.5-7.6,34.8-12.2c6-2.7,11.5-5.6,16.3-8.5c8.4-5.2,17.8-13,16.4-18.1
c-1.2-4.3-12.8-9.3-40.1-6.7c-1.8-2.4-3.7-4.6-5.9-6.6c0.1,0,0.1,0,0.2,0c13.6-1.7,25.6-1.7,34.6-0.2c10.5,1.8,16.6,5.7,18.2,11.6
C579.6,81.4,572.9,90.4,557.9,99.6z"/>
<path fill="#006060" d="M546.3,94.4c-2.5,1.3-5.2,2.6-8,3.9c-10.3,4.7-22.8,9.1-36.3,12.7c-11.8,3.2-23.6,5.6-34.1,6.8
c-2.2,0.3-4.7,0.5-7.4,0.7c-12,0.9-26.5,0.5-28.3-6.4c-1.3-4.9,4.3-10.8,16.6-17.4c1.2-0.7,2.5-1.3,3.8-2c0,1.2,0,2.4,0.1,3.6
c-0.8,0.4-1.6,0.8-2.4,1.2c-12.1,6.5-15.7,11.3-15.1,13.7c0.5,1.9,3.8,3.3,9,3.9c3.8,0.5,8.7,0.5,14.2,0.2c2.8-0.2,5.8-0.5,9-0.8
c10.3-1.3,21.9-3.6,33.6-6.7c14-3.8,26.9-8.4,37.3-13.3c2.2-1,4.3-2.1,6.3-3.1c12.1-6.5,15.7-11.3,15.1-13.7c-0.5-1.9-3.8-3.3-9-3.9
c-4.5-0.6-10.4-0.5-17.2,0c-0.5-1.1-1.1-2.1-1.8-3.1c12.4-1.2,29.1-1.3,31.1,6.1C564.3,81.9,558.7,87.7,546.3,94.4z"/>
<path fill="#FF6B5E" d="M504.8,121.2c10.7-2.9,20.9-6.3,30.1-10.1c-5.1,11.5-15.1,20.6-28.1,24.1c-13.3,3.6-26.8,0.5-37-7.2
c0.3,0,0.6-0.1,0.9-0.1C481.7,126.6,493.1,124.4,504.8,121.2z M468,117.8c-2.2,0.3-4.7,0.5-7.4,0.7c0.7,1,1.5,2,2.3,2.9
c2.2-0.2,4.6-0.4,7-0.7c10.5-1.3,21.7-3.5,33-6.6c12.6-3.4,24.5-7.6,34.8-12.2c0.2-1.2,0.4-2.4,0.5-3.7
c-10.3,4.7-22.8,9.1-36.3,12.7C490.2,114.2,478.4,116.6,468,117.8z M537.1,82.6c-0.8-3.1-2-6-3.4-8.7c-0.5-1.1-1.1-2.1-1.8-3.1
c-0.5-0.7-1-1.4-1.5-2.1c-1.8-2.4-3.7-4.6-5.9-6.6c-10.5-9.5-25.4-13.7-40-9.7c-14.9,4-25.8,15.4-29.9,29.2
c-0.8,2.8-1.4,5.8-1.7,8.8c-0.1,0.9-0.1,1.7-0.1,2.6c0,1.2,0,2.4,0.1,3.6c0.2,2.8,0.6,5.7,1.4,8.5c1,3.8,2.5,7.3,4.4,10.5
c2.8-0.2,5.8-0.5,9-0.8c10.3-1.3,21.9-3.6,33.6-6.7c14-3.8,26.9-8.4,37.3-13.3C538.6,90.7,538.2,86.6,537.1,82.6z"/>
</g>
<use clip-path="url(#clipPath)" id="astronaut" xlink:href="#astronautSymbol"></use>
<g id="motionLinesGroup" opacity="0.3" clip-path="url(#clipPath)" stroke-width="2">
<path class="motionLine1" fill="none" stroke="#ededed" stroke-miterlimit="10" d="M255.3,0c0,51.1-3,133.8-25.6,208.8
c-8.5,28-14.4,33.2-41.9,92.3c-45.9,98.5-68.8,147.8-81,207.4c-17.6,86.1-6.8,156.9,0,201.7c8.6,56.5,23.1,104,37.1,140.6"/>
<path class="motionLine0" fill="none" stroke="#ededed" stroke-miterlimit="10" d="M224,0c0,51.1-4.1,133.8-35.8,208.8
c-11.8,28-20,33.2-58.5,92.3c-64,98.5-96,147.8-113,207.4c-24.5,86.1-9.5,156.9,0,201.7c12,56.5,32.2,104,51.8,140.6"/>
<path class="motionLine2" fill="none" stroke="#ededed" stroke-miterlimit="10" d="M349.1,0c0,51.1,2.7,133.8,23.7,208.8
c7.8,28,13.3,33.2,38.7,92.3c42.4,98.5,63.5,147.8,74.8,207.4c16.2,86.1,6.3,156.9,0,201.7c-7.9,56.5-21.3,104-34.3,140.6"/>
<path class="motionLine3" fill="none" stroke="#ededed" stroke-miterlimit="10" d="M375.3,0c0,51.1,4.2,133.8,35.9,208.8
c11.9,28,20.1,33.2,58.7,92.3c64.2,98.5,96.4,147.8,113.4,207.4c24.6,86.1,9.5,156.9,0,201.7c-12,56.5-32.4,104-52,140.6"/>
<path class="motionLine5" fill="none" stroke="#ededed" stroke-miterlimit="10" d="M396.3,567.7c3.9,69.9-11.4,125.1-21,160
c-3.7,13.4-7.7,26.1-12,38.1"/>
<path class="motionLine4" fill="none" stroke="#ededed" stroke-miterlimit="10" d="M221.2,567.1c-5.3,69.8,8.9,125.3,17.8,160.3
c3.4,13.5,7.2,26.3,11.2,38.3"/>
</g>
<use clip-path="url(#clipPath)" id="mainRocket" xlink:href="#rocket-symbol-big" x="0" y="0"></use>
</g>
<circle fill="rgba(143,202,233,0.2)" stroke="#ededed" stroke-width="8" id="rocketHole" cx="300" cy="300" r="80" />
</svg>
</div>
var container = document.querySelector('.container');
var rocketSVG = document.querySelector('.rocket-svg');
var rocketHole = document.querySelector('#rocketHole');
var rocketMask = document.querySelector('#rocketMask');
var mainRocket = document.querySelector('#mainRocket');
var starGroup = document.querySelector('.starGroup');
var astronautGroup = document.querySelector('#astronaut');
var motionLineTimeline = new TimelineMax();
motionLineTimeline.timeScale(5);
var numMotionLines = 6;
var numStars = 200;
TweenMax.set(container, {
position: 'absolute',
top: '50%',
left: '50%',
xPercent: -50,
yPercent: -50
})
Draggable.create(rocketHole, {
onDrag: onThrowUpdate,
throwProps: true,
onThrowUpdate: onThrowUpdate,
throwResistance: 8000
})
//star size and colour
TweenMax.set('g circle', {
scale: 0.12,
fill: '#C3B0C5'
})
//make the dragger pulse
TweenMax.from([rocketMask, rocketHole], 0.61, {
attr: {
r: 90
},
repeat: -1,
yoyo: true,
ease: Power1.easeInOut
})
//rocket shake
TweenMax.from([mainRocket, astronaut], 0.01, {
y: 3,
repeat: -1,
yoyo: true,
ease: Power1.easeInOut
})
TweenMax.from(mainRocket, 0.07, {
x: 3,
repeat: -1,
yoyo: true,
ease: Power4.easeInOut
})
//clone stars
for (var i = 0; i < numStars; i++) {
var newStar = document.querySelector('.star').cloneNode(true);
starGroup.appendChild(newStar);
TweenMax.set(newStar, {
attr: {
x: Math.random() * 1000,
y: Math.random() * 600
}
})
}
//animate the motion lines
for (var i = 0; i < numMotionLines; i++) {
var line = document.querySelector(".motionLine" + i);
//console.log(line)
var tl = new TimelineMax({
repeat: -1,
repeatDelay: Math.random() * 2
});
tl.fromTo(line, 0.1, {
drawSVG: '0% 0%'
}, {
drawSVG: '0% 20%',
ease: Linear.easeNone
})
.to(line, (Math.random() * 2) + 2, {
drawSVG: '80% 100%',
ease: Linear.easeNone
})
.to(line, 0.2, {
drawSVG: '100% 100%',
ease: Linear.easeNone
})
motionLineTimeline.add(tl, i);
}
//move the mask with the drag
function onThrowUpdate() {
var posX = parseInt(rocketHole.getAttribute('cx')) + this.target._gsTransform.x;
var posY = parseInt(rocketHole.getAttribute('cy')) + this.target._gsTransform.y;
//console.log(posX);
TweenMax.set(rocketMask, {
attr: {
cx: posX,
cy: posY
}
})
}
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/utils/Draggable.min.js"></script>
body{
background-color:#111111;
overflow:hidden;
}
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container{
width:600px;
height:600px;
}

SVG Space Rocket!

Drag to explore space!

I have no idea what this is supposed to be really - I'm just messing about with a magnify effect, clip-path and GSAP's Draggable (and often getting odd results due to the pesky SVG coordinate system(s)).

A Pen by Chris Gannon on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment