Skip to content

Instantly share code, notes, and snippets.

@MstrVLT

MstrVLT/draggable-svg-icons-inside-changing-container.markdown

Created March 4, 2025 09:50
Show Gist options
  • Save MstrVLT/0271cb3aa1141efb4d5a668c954935e9 to your computer and use it in GitHub Desktop.
Save MstrVLT/0271cb3aa1141efb4d5a668c954935e9 to your computer and use it in GitHub Desktop.
Download ZIP
Draggable SVG Icons inside changing container
Raw
draggable-svg-icons-inside-changing-container.markdown
Raw
index.html
<link href='https://fonts.googleapis.com/css?family=Signika+Negative:300,400,700' rel='stylesheet' type='text/css'>
<h2>Drag Icons into Bag</h2>
<!-- icons from GraphicsFuel -->
<!-- http://www.graphicsfuel.com/2015/11/ecommerce-icon-set/ -->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 800 430" style="enable-background:new 0 0 800 430;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#4A453F;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
.st1{fill:#E8B87E;}
.st2{fill:#E19A60;}
.st3{fill:#4A453F;}
.st4{opacity:0.1;fill:#010101;enable-background:new ;}
.st5{fill:#F26557;}
.st6{fill:#FFD55C;}
.st7{fill:#FFFFFF;}
.st8{fill:#F15F5B;}
.st9{fill:#596874;}
.st10{fill:#50BFEE;}
.st11{fill:#F7F8F8;}
.st12{fill:#97A3AB;}
.st13{fill:none;stroke:#97A3AB;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
.st14{fill:#5ABD77;}
.st15{opacity:0.2;fill:#FFFFFF;enable-background:new ;}
.st16{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
.st17{fill:#F1A81E;}
.st18{fill:none;stroke:#A2DDF2;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
.st19{fill:#E8E8E8;}
.st20{fill:#A2DDF2;}
.st21{fill:none;stroke:#596874;stroke-width:8;stroke-linecap:round;stroke-miterlimit:10;}
.st22{fill:#9ED2A0;}
.st23{opacity:0.5;fill:#FFFFFF;enable-background:new ;}
.st24{fill:none;stroke:#596874;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
.st25{fill:none;stroke:#50BFEE;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
</style>
<g id="bag">
<path class="st0" d="M677.5,108V83.5c0-10.8,10-18.5,20.9-18.5h7.9c10.9,0,18.2,7.7,18.2,18.5V108"/>
<path class="st1" d="M628.5,87v89.4c0,6.5,5.3,12.6,11.8,12.6h102.4c6.5,0,11.8-6.2,11.8-12.6V87H628.5z"/>
<path class="st2" d="M732.5,87v89.4c0,6.5,5.5,11.7,12,11.7s12-5.3,12-11.7V87H732.5z"/>
<g>
<path class="st0" d="M654.5,108V83.5c0-10.8,9.4-18.5,20.3-18.5h7.9c10.9,0,18.8,7.7,18.8,18.5V108"/>
<ellipse class="st3" cx="701.4" cy="107.9" rx="5.9" ry="5.9"/>
<ellipse class="st3" cx="654.1" cy="108.9" rx="5.9" ry="5.9"/>
</g>
<path class="st4" d="M744.5,172.4l-10.6,8.6h0c0.5,1,1.1,2.1,1.8,2.9l0,0c0.4,0.4,0.7,0.8,1.1,1.2c0,0,0,0.1,0.1,0.1
c0.4,0.3,0.8,0.7,1.3,1c0,0,0.1,0,0.1,0.1c0.4,0.3,0.8,0.5,1.2,0.7c0.1,0,0.2,0.1,0.2,0.1c0.5,0.2,0.9,0.4,1.4,0.5c0,0,0.1,0,0.1,0
c0.4,0.1,0.9,0.2,1.4,0.3c0.1,0,0.3,0,0.4,0.1c0.5,0.1,1,0.1,1.6,0.1c6.5,0,11.8-5.3,11.8-11.7V87h-12L744.5,172.4L744.5,172.4z"/>
<polygon class="st5" points="692.5,139.7 681.6,138.3 676.6,128.1 671.9,138.4 661,140.3 669,148.1 667.3,159.4 677,153.9
686.8,159.1 684.8,147.9 "/>
</g>
<g id="credit" class="icon">
<g>
<path class="st6" d="M541.9,174.2c0,5.3-4.4,9.6-9.8,9.6h-84.5c-5.4,0-9.7-4.3-9.7-9.6v-44.8c0-5.3,4.4-9.6,9.7-9.6h84.5
c5.4,0,9.8,4.3,9.8,9.6V174.2z"/>
<rect x="452.3" y="159.8" class="st7" width="64" height="9.6"/>
<circle class="st8" cx="529.1" cy="132.6" r="6"/>
<circle class="st9" cx="519.5" cy="132.6" r="6"/>
<path class="st4" d="M516.2,127.8h-78.1c-0.1,0.5-0.2,1.1-0.2,1.6v44.8c0,5.3,4.4,9.6,9.7,9.6h78.1c0.1-0.5,0.2-1.1,0.2-1.6v-44.8
C525.9,132.1,521.5,127.8,516.2,127.8z"/>
</g>
<g>
<path class="st10" d="M517.9,190.2c0,5.3-4.4,9.6-9.7,9.6h-84.5c-5.4,0-9.8-4.3-9.8-9.6v-44.8c0-5.3,4.4-9.6,9.8-9.6h84.5
c5.4,0,9.7,4.3,9.7,9.6V190.2z"/>
<rect x="413.9" y="143.8" class="st9" width="104" height="12"/>
<rect x="421.9" y="160.6" class="st7" width="52" height="8"/>
<rect x="485.4" y="181" class="st9" width="26" height="12"/>
</g>
</g>
<g id="store" class="icon">
<polygon class="st9" points="281.5,22.5 217.5,62.5 345.5,62.5 "/>
<rect x="233.5" y="62.5" class="st10" width="96" height="88"/>
<rect x="249.5" y="86.5" class="st11" width="32" height="40"/>
<rect x="289.5" y="86.5" class="st11" width="24" height="40"/>
<rect x="289.5" y="134.5" class="st11" width="24" height="8"/>
<rect x="217.5" y="62.5" class="st12" width="128" height="8"/>
<rect x="217.5" y="142.5" class="st9" width="128" height="8"/>
<rect x="249.5" y="126.5" class="st9" width="32" height="4"/>
<rect x="217.5" y="134.5" class="st6" width="24" height="8"/>
<rect x="321.5" y="134.5" class="st6" width="24" height="8"/>
<rect x="249.5" y="38.5" class="st10" width="64" height="20"/>
<g>
<path class="st8" d="M241.5,62.5v8c0,4.4,3.6,8,8,8s8-3.6,8-8v-8H241.5z"/>
<path class="st6" d="M257.5,62.5v8c0,4.4,3.6,8,8,8s8-3.6,8-8v-8H257.5z"/>
<path class="st6" d="M225.5,62.5v8c0,4.4,3.6,8,8,8s8-3.6,8-8v-8H225.5z"/>
<path class="st8" d="M273.5,62.5v8c0,4.4,3.6,8,8,8s8-3.6,8-8v-8H273.5z"/>
<path class="st6" d="M289.5,62.5v8c0,4.4,3.6,8,8,8s8-3.6,8-8v-8H289.5z"/>
<path class="st8" d="M305.5,62.5v8c0,4.4,3.6,8,8,8s8-3.6,8-8v-8H305.5z"/>
<path class="st6" d="M321.5,62.5v8c0,4.4,3.6,8,8,8s8-3.6,8-8v-8H321.5z"/>
</g>
<g>
<path class="st7" d="M260.5,46.7c-0.2,0.2-0.3,0.4-0.3,0.7c0,0.3,0.1,0.5,0.4,0.7c0.3,0.2,0.9,0.4,1.8,0.6c1,0.2,1.7,0.6,2.2,1
c0.5,0.5,0.8,1.1,0.8,2s-0.3,1.6-1,2.1c-0.7,0.5-1.6,0.8-2.7,0.8c-1.6,0-3-0.6-4.3-1.7l1.3-1.6c1.1,0.9,2.1,1.4,3,1.4
c0.4,0,0.7-0.1,1-0.3c0.2-0.2,0.4-0.4,0.4-0.7c0-0.3-0.1-0.5-0.4-0.7c-0.2-0.2-0.7-0.3-1.5-0.5c-1.2-0.3-2-0.6-2.6-1
c-0.5-0.4-0.8-1.1-0.8-2c0-0.9,0.3-1.6,1-2.1c0.7-0.5,1.5-0.7,2.6-0.7c0.7,0,1.3,0.1,2,0.3c0.7,0.2,1.3,0.5,1.8,0.9l-1.1,1.6
c-0.9-0.6-1.8-1-2.7-1C261.1,46.4,260.8,46.5,260.5,46.7z"/>
<path class="st7" d="M271.5,46.6v7.8h-2.2v-7.8h-2.8v-1.9h7.9v1.9H271.5z"/>
<path class="st7" d="M284.2,53.1c-1,1-2.3,1.4-3.8,1.4c-1.5,0-2.7-0.5-3.8-1.4c-1-1-1.5-2.1-1.5-3.6c0-1.4,0.5-2.6,1.5-3.6
c1-1,2.3-1.4,3.8-1.4c1.5,0,2.7,0.5,3.8,1.4c1,1,1.5,2.1,1.5,3.6C285.7,50.9,285.2,52.1,284.2,53.1z M283.4,49.5
c0-0.9-0.3-1.6-0.9-2.2c-0.6-0.6-1.3-0.9-2.1-0.9c-0.8,0-1.5,0.3-2.1,0.9c-0.6,0.6-0.9,1.3-0.9,2.2c0,0.9,0.3,1.6,0.9,2.2
c0.6,0.6,1.3,0.9,2.1,0.9c0.8,0,1.5-0.3,2.1-0.9C283.2,51.1,283.4,50.4,283.4,49.5z"/>
<path class="st7" d="M295.8,47.9c0,1.5-0.6,2.5-1.9,3l2.5,3.5h-2.8l-2.2-3.1h-1.6v3.1h-2.2v-9.7h3.8c1.6,0,2.7,0.3,3.3,0.8
C295.4,46,295.8,46.8,295.8,47.9z M293.1,49.1c0.3-0.2,0.4-0.6,0.4-1.1c0-0.5-0.1-0.9-0.4-1.1c-0.3-0.2-0.8-0.3-1.5-0.3h-1.7v2.9
h1.6C292.3,49.4,292.8,49.3,293.1,49.1z"/>
<path class="st7" d="M305.3,44.7v1.9h-5v2h4.5v1.8h-4.5v2h5.2v1.9h-7.4v-9.7L305.3,44.7L305.3,44.7z"/>
</g>
<line class="st13" x1="274.5" y1="90.5" x2="256.5" y2="108.5"/>
<line class="st13" x1="274.5" y1="104.5" x2="260.5" y2="118.5"/>
<line class="st13" x1="308.5" y1="99.5" x2="294.5" y2="113.5"/>
</g>
<g id="security" class="icon">
<path class="st9" d="M134,101c-28,0-57.6,10.1-55.9,19.7C92.1,199.5,118.4,229,134,229c15.6,0,41.9-29.5,55.9-108.3
C191.6,111.1,162,101,134,101z"/>
<path class="st7" d="M134,109c-24,0-49.4,8.9-47.9,17.2c12,68.9,35.7,94.8,49.1,94.8c13.4,0,34.8-25.8,46.8-94.8
C183.4,117.9,158,109,134,109z"/>
<path class="st14" d="M134,112.5c-22.5,0-46.3,8.3-44.9,16.2c11.2,64.6,33.4,88.8,46,88.8c12.6,0,32.7-24.2,43.9-88.8
C180.3,120.8,156.5,112.5,134,112.5z"/>
<path class="st15" d="M134,229c15.6,0,41.9-29.5,55.9-108.3c1.7-9.6-28-19.7-55.9-19.7V229z"/>
<g>
<path class="st8" d="M136,183c-13.2,0-24-10.8-24-24s10.8-24,24-24s24,10.8,24,24S149.2,183,136,183z"/>
<path class="st7" d="M136,137c12.1,0,22,9.9,22,22s-9.9,22-22,22s-22-9.9-22-22S123.9,137,136,137 M136,133c-14.4,0-26,11.6-26,26
s11.6,26,26,26s26-11.6,26-26S150.4,133,136,133L136,133z"/>
</g>
<polyline class="st16" points="126,159 132.7,167 146,151 "/>
</g>
<g id="search" class="icon">
<g>
<path class="st19" d="M252.8,335.2c-10.3,0-19.9-4-27.2-11.3c-15-15-15-39.4,0-54.4c7.3-7.3,16.9-11.3,27.2-11.3
c10.3,0,19.9,4,27.2,11.3c15,15,15,39.4,0,54.4C272.7,331.2,263.1,335.2,252.8,335.2z"/>
<path class="st9" d="M252.8,262.2c9.2,0,17.8,3.6,24.3,10.1c13.4,13.5,13.4,35.3,0,48.8c-6.5,6.5-15.1,10.1-24.3,10.1
c-9.2,0-17.8-3.6-24.3-10.1c-13.4-13.5-13.4-35.3,0-48.8C235,265.8,243.6,262.2,252.8,262.2 M252.8,254.2
c-10.9,0-21.7,4.1-30,12.4c-16.6,16.6-16.6,43.5,0,60.1c8.3,8.3,19.1,12.4,30,12.4c10.9,0,21.7-4.1,30-12.4
c16.6-16.6,16.6-43.5,0-60.1C274.5,258.3,263.7,254.2,252.8,254.2L252.8,254.2z"/>
</g>
<g>
<path class="st20" d="M248.4,324.4c-11-11-11-28.9,0-40c5.9-6,13.9-8.7,21.7-8.2c-11.1-10.5-28.5-10.4-39.4,0.5
c-11,11-11,28.9,0,40c5.1,5.1,11.6,7.8,18.2,8.2C248.7,324.7,248.5,324.5,248.4,324.4z"/>
</g>
<g>
<line class="st21" x1="283" y1="326.5" x2="301.8" y2="345.3"/>
<path class="st8" d="M335.3,364.3c4.1,4.1,4.1,10.7,0,14.8l0,0c-4.1,4.1-10.7,4.1-14.8,0l-28.2-28.3c-4.1-4.1-4.1-10.7,0-14.8l0,0
c4.1-4.1,10.7-4.1,14.8,0L335.3,364.3z"/>
<line class="st16" x1="297.9" y1="345.8" x2="307.3" y2="355.2"/>
<rect x="313.8" y="364.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -165.4558 337.3396)" class="st6" width="21.4" height="8"/>
</g>
<path class="st16" d="M245.9,277.8c0,0-12.8,3.2-12.8,16.1"/>
</g>
<g id="calculator" class="icon">
<path class="st9" d="M743.5,377c0,2.8-2.3,5.1-5.1,5.1h-93.8c-2.8,0-5.1-2.3-5.1-5.1V259.3c0-2.8,2.3-5.1,5.1-5.1h93.8
c2.8,0,5.1,2.3,5.1,5.1V377z"/>
<path class="st22" d="M732.6,290.2c0,2.8-2.3,5.1-5.1,5.1h-72c-2.8,0-5.1-2.3-5.1-5.1v-18.9c0-2.8,2.3-5.1,5.1-5.1h72
c2.8,0,5.1,2.3,5.1,5.1V290.2z"/>
<path class="st20" d="M667.5,314.2c0,1.1-0.9,2-2,2h-14c-1.1,0-2-0.9-2-2v-6c0-1.1,0.9-2,2-2h14c1.1,0,2,0.9,2,2V314.2z"/>
<path class="st20" d="M689.5,314.2c0,1.1-0.9,2-2,2h-14c-1.1,0-2-0.9-2-2v-6c0-1.1,0.9-2,2-2h14c1.1,0,2,0.9,2,2V314.2z"/>
<path class="st20" d="M733.5,314.2c0,1.1-0.9,2-2,2h-14c-1.1,0-2-0.9-2-2v-6c0-1.1,0.9-2,2-2h14c1.1,0,2,0.9,2,2V314.2z"/>
<path class="st20" d="M711.5,314.2c0,1.1-0.9,2-2,2h-14c-1.1,0-2-0.9-2-2v-6c0-1.1,0.9-2,2-2h14c1.1,0,2,0.9,2,2V314.2z"/>
<path class="st7" d="M667.5,328.2c0,1.1-0.9,2-2,2h-14c-1.1,0-2-0.9-2-2v-6c0-1.1,0.9-2,2-2h14c1.1,0,2,0.9,2,2V328.2z"/>
<path class="st7" d="M689.5,328.2c0,1.1-0.9,2-2,2h-14c-1.1,0-2-0.9-2-2v-6c0-1.1,0.9-2,2-2h14c1.1,0,2,0.9,2,2V328.2z"/>
<path class="st20" d="M733.5,328.2c0,1.1-0.9,2-2,2h-14c-1.1,0-2-0.9-2-2v-6c0-1.1,0.9-2,2-2h14c1.1,0,2,0.9,2,2V328.2z"/>
<path class="st7" d="M711.5,328.2c0,1.1-0.9,2-2,2h-14c-1.1,0-2-0.9-2-2v-6c0-1.1,0.9-2,2-2h14c1.1,0,2,0.9,2,2V328.2z"/>
<path class="st7" d="M667.5,342.2c0,1.1-0.9,2-2,2h-14c-1.1,0-2-0.9-2-2v-6c0-1.1,0.9-2,2-2h14c1.1,0,2,0.9,2,2V342.2z"/>
<path class="st7" d="M689.5,342.2c0,1.1-0.9,2-2,2h-14c-1.1,0-2-0.9-2-2v-6c0-1.1,0.9-2,2-2h14c1.1,0,2,0.9,2,2V342.2z"/>
<path class="st20" d="M733.5,342.2c0,1.1-0.9,2-2,2h-14c-1.1,0-2-0.9-2-2v-6c0-1.1,0.9-2,2-2h14c1.1,0,2,0.9,2,2V342.2z"/>
<path class="st7" d="M711.5,342.2c0,1.1-0.9,2-2,2h-14c-1.1,0-2-0.9-2-2v-6c0-1.1,0.9-2,2-2h14c1.1,0,2,0.9,2,2V342.2z"/>
<path class="st7" d="M667.5,356.2c0,1.1-0.9,2-2,2h-14c-1.1,0-2-0.9-2-2v-6c0-1.1,0.9-2,2-2h14c1.1,0,2,0.9,2,2V356.2z"/>
<path class="st7" d="M689.5,356.2c0,1.1-0.9,2-2,2h-14c-1.1,0-2-0.9-2-2v-6c0-1.1,0.9-2,2-2h14c1.1,0,2,0.9,2,2V356.2z"/>
<path class="st6" d="M733.5,370.2c0,1.1-0.9,2-2,2h-14c-1.1,0-2-0.9-2-2v-20c0-1.1,0.9-2,2-2h14c1.1,0,2,0.9,2,2V370.2z"/>
<path class="st7" d="M711.5,356.2c0,1.1-0.9,2-2,2h-14c-1.1,0-2-0.9-2-2v-6c0-1.1,0.9-2,2-2h14c1.1,0,2,0.9,2,2V356.2z"/>
<path class="st7" d="M689.5,370.2c0,1.1-0.9,2-2,2h-36c-1.1,0-2-0.9-2-2v-6c0-1.1,0.9-2,2-2h36c1.1,0,2,0.9,2,2V370.2z"/>
<path class="st7" d="M711.5,370.2c0,1.1-0.9,2-2,2h-14c-1.1,0-2-0.9-2-2v-6c0-1.1,0.9-2,2-2h14c1.1,0,2,0.9,2,2V370.2z"/>
<path class="st23" d="M727.5,266.2h-20.4l-15.9,29h36.2c2.8,0,5-2.2,5-5v-18.9C732.5,268.5,730.3,266.2,727.5,266.2z"/>
</g>
<g id="truck" class="icon">
<path class="st10" d="M172,389.4l-0.9-9.6c0-7.7-4.4-7.7-6.5-7.7h-24.8v17.3H172z"/>
<path class="st9" d="M156,372.4l-2-12.8c-0.6-4-3.8-4.5-6.1-4.5H123v17.3H156z"/>
<path class="st19" d="M152.3,369.4l-1.3-8.5c-0.4-2.6-2.6-3-4.1-3h-16.5v11.5L152.3,369.4L152.3,369.4z"/>
<path class="st9" d="M140,389.5v-52.3c0-2.5-2-4.4-4.5-4.4H64.4c-2.5,0-4.5,2-4.5,4.4v52.3H140z"/>
<line class="st24" x1="56" y1="389.5" x2="172" y2="389.5"/>
<ellipse class="st8" cx="99.5" cy="360.2" rx="12.8" ry="12.8"/>
<g>
<line class="st25" x1="48" y1="373.7" x2="82.2" y2="373.7"/>
<line class="st25" x1="56.8" y1="361.7" x2="91" y2="361.7"/>
<line class="st25" x1="49.8" y1="349.7" x2="84" y2="349.7"/>
</g>
<ellipse transform="matrix(0.9279 -0.3728 0.3728 0.9279 -128.9029 90.7688)" class="st8" cx="170.2" cy="378.7" rx="1.5" ry="2.1"/>
<g>
<path class="st19" d="M141.8,392.5c0-6.6,5.8-12,12.9-12c7.1,0,12.9,5.4,12.9,12H141.8z"/>
<circle class="st9" cx="154.7" cy="393.8" r="9"/>
<circle class="st19" cx="154.7" cy="393.9" r="5"/>
</g>
<g>
<path class="st19" d="M70.2,392.9c0-6.6,5.8-12,12.9-12c7.1,0,12.9,5.4,12.9,12H70.2z"/>
<circle class="st9" cx="83.1" cy="394.2" r="9"/>
<circle class="st19" cx="83.1" cy="394.4" r="5"/>
</g>
<line class="st24" x1="147" y1="376.9" x2="152" y2="376.9"/>
</g>
</svg>
Raw
script.js
console.clear();
let d = Draggable.create(".icon", {
bounds:"svg",
onPress() {
let m = MotionPathPlugin.getGlobalMatrix(this.target, true, true),
p = m.apply({x: this.pointerX, y: this.pointerY});
this.pressX = p.x;
this.pressY = p.y;
},
onDrag() {
if (this.hitTest("#bag")) {
gsap.to(this.target, {duration: 0.6, opacity:0, scale:0, svgOrigin:"675 143"});
}
}
});
setInterval(()=>{
const x = Math.floor(Math.random() * 40);
const y = Math.floor(Math.random() * 40);
const scale = Math.random() * 0.2;
gsap.to("svg", {
x,
y,
scale: 1 + scale,
onUpdate() {
d.forEach((draggable, i) => {
if (draggable.isPressed) {
let m = MotionPathPlugin.getGlobalMatrix(draggable.target, true, true),
p = m.apply({x: draggable.pointerX, y: draggable.pointerY});
gsap.set(draggable.target, {
x: "+=" + (p.x - draggable.pressX),
y: "+=" + (p.y - draggable.pressY)
});
draggable.update(true);
}
});
}
});
}, 1000);
Raw
scripts
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/Draggable.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/MotionPathPlugin.min.js"></script>
Raw
style.css
body {
margin:0;
background: #333;
text-align:center;
color:#ddd;
font-family: Signika Negative, Asap, sans-serif;
min-height: 300vh;
}
svg {
display:block;
position:relative;
width:400px;
background:#1d1d1d;
margin:20px auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment