-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
170 lines (170 loc) · 25.3 KB
/
index.html
File metadata and controls
170 lines (170 loc) · 25.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG ICONS</title>
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<h1>Interactive SVG Icons</h1>
<p>These are my Interactive SVG icons I made in Adobe Illustrator. It consists of different flavours for my rebrand of Swerve.</p>
<section class="icon-container">
<div>
<svg id="chocolate" class="icon" data-name="chocolate" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352.68 352.68">
<g id="chocolate" data-name="chocolate">
<g>
<path d="M288.8,138.35c10.18-5.96,23.68.29,23.68-6.28s-16.49-17.5-23.68-17.5-13.03,5.32-13.03,11.89,6.97,15.44,13.03,11.89Z" style="fill: #432500;"/>
<path d="M114.51,291.41c18.51-4.73,23.75,18.59,54.72,4.13,31.69-14.79,16.68-36.85,34.07-33.04,26.42,5.79,43.66,3.55,54.78-2.71.46-3.82.69-7.76.69-11.81,0-45.24-69.57,18.2-144.56,18.2-51.58,0-93.22-38.55-109.39-48.7,2.28,9.54,5.33,18.78,9.09,27.65,18.06-8.26,49.31,59.39,100.59,46.29Z" style="fill: #8c5200;"/>
<path d="M352.64,172.73c-13.83-14.63-29.02-27.25-32.66-28.9-.22-.1-.43-.13-.63-.1-8.58,1.51,2.83,72.85-12.79,76.91-11.05,2.87-22.63-38.19-28.82-30.96-.19.22-5.55,2.92-3.1,12.39,2.5,9.63,8.28,43.73-16.56,57.72-11.11,6.26-28.36,8.5-54.78,2.71-17.39-3.81-2.39,18.25-34.07,33.04-30.98,14.46-36.22-8.86-54.72-4.13-51.28,13.1-82.53-54.54-100.59-46.29,3.69,8.7,8.05,17.04,13.03,24.95,31.2,49.63,86.44,82.61,149.39,82.61,97.39,0,176.34-78.95,176.34-176.34,0-1.21-.02-2.41-.04-3.62Z" style="fill: #432500;"/>
<path d="M258.77,247.98c0,4.05-.23,7.99-.69,11.81,24.84-13.99,19.05-48.09,16.56-57.72-2.46-9.47,2.91-12.17,3.1-12.39,6.2-7.23,17.77,33.83,28.82,30.96,15.62-4.06,4.21-75.4,12.79-76.91.2-.03.4,0,.63.1,3.64,1.65,18.83,14.27,32.66,28.9C350.72,77,272.52,0,176.34,0S0,78.95,0,176.34c0,14.16,1.67,27.94,4.83,41.13,16.17,10.15,57.81,48.7,109.39,48.7,74.99,0,144.56-63.44,144.56-18.2ZM288.8,114.57c7.19,0,23.68,10.94,23.68,17.5s-13.5.32-23.68,6.28c-6.06,3.54-13.03-5.32-13.03-11.89s5.83-11.89,13.03-11.89Z" style="fill: #fff;"/>
<g id="Chocolate_Bar" data-name="Chocolate Bar">
<rect x="95.93" y="47.7" width="129.58" height="182.92" transform="translate(-50.71 116.92) rotate(-34.88)" style="fill: #603813; stroke: #000; stroke-miterlimit: 10; stroke-width: 5px;"/>
<rect x="79.72" y="82.7" width="50.39" height="50.39" transform="translate(-42.86 79.39) rotate(-34.88)" style="fill: #8c5200; stroke: #000; stroke-miterlimit: 10; stroke-width: 3px;"/>
<rect x="126.96" y="49.76" width="50.39" height="50.39" transform="translate(-15.53 100.49) rotate(-34.88)" style="fill: #8c5200; stroke: #000; stroke-miterlimit: 10; stroke-width: 3px;"/>
<rect x="113.12" y="130.61" width="50.39" height="50.39" transform="translate(-64.25 107.1) rotate(-34.88)" style="fill: #8c5200; stroke: #000; stroke-miterlimit: 10; stroke-width: 3px;"/>
<rect x="160.36" y="97.67" width="50.39" height="50.39" transform="translate(-36.93 128.2) rotate(-34.88)" style="fill: #8c5200; stroke: #000; stroke-miterlimit: 10; stroke-width: 3px;"/>
<rect x="146.24" y="178.11" width="50.39" height="50.39" transform="translate(-85.47 134.58) rotate(-34.88)" style="fill: #8c5200; stroke: #000; stroke-miterlimit: 10; stroke-width: 3px;"/>
<rect x="193.48" y="145.17" width="50.39" height="50.39" transform="translate(-58.14 155.68) rotate(-34.88)" style="fill: #8c5200; stroke: #000; stroke-miterlimit: 10; stroke-width: 3px;"/>
</g>
</g>
</g>
</svg>
</svg>
</div>
<div>
<svg id="strawberry" class="icon" data-name="strawberry" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352.68 355.11">
<g id="strawberry" data-name="strawberry">
<g>
<path d="M288.8,140.78c10.18-5.96,23.68.29,23.68-6.28s-16.49-17.5-23.68-17.5-13.03,5.32-13.03,11.89,6.97,15.44,13.03,11.89Z" style="fill: #ed1c24;"/>
<path d="M114.51,293.84c18.51-4.73,23.75,18.59,54.72,4.13,31.69-14.79,16.68-36.85,34.07-33.04,26.42,5.79,43.66,3.55,54.78-2.71.46-3.82.69-7.76.69-11.81,0-45.24-69.57,18.2-144.56,18.2-51.58,0-93.22-38.55-109.39-48.7,2.28,9.54,5.33,18.78,9.09,27.65,18.06-8.26,49.31,59.39,100.59,46.29Z" style="fill: #ff7bac;"/>
<path d="M352.64,175.15c-13.83-14.63-29.02-27.25-32.66-28.9-.22-.1-.43-.13-.63-.1-8.58,1.51,2.83,72.85-12.79,76.91-11.05,2.87-22.63-38.19-28.82-30.96-.19.22-5.55,2.92-3.1,12.39,2.5,9.63,8.28,43.73-16.56,57.72-11.11,6.26-28.36,8.5-54.78,2.71-17.39-3.81-2.39,18.25-34.07,33.04-30.98,14.46-36.22-8.86-54.72-4.13-51.28,13.1-82.53-54.54-100.59-46.29,3.69,8.7,8.05,17.04,13.03,24.95,31.2,49.63,86.44,82.61,149.39,82.61,97.39,0,176.34-78.95,176.34-176.34,0-1.21-.02-2.41-.04-3.62Z" style="fill: #ed1c24;"/>
<path d="M258.77,250.4c0,4.05-.23,7.99-.69,11.81,24.84-13.99,19.05-48.09,16.56-57.72-2.46-9.47,2.91-12.17,3.1-12.39,6.2-7.23,17.77,33.83,28.82,30.96,15.62-4.06,4.21-75.4,12.79-76.91.2-.03.4,0,.63.1,3.64,1.65,18.83,14.27,32.66,28.9C350.72,79.43,272.52,2.43,176.34,2.43S0,81.38,0,178.77c0,14.16,1.67,27.94,4.83,41.13,16.17,10.15,57.81,48.7,109.39,48.7,74.99,0,144.56-63.44,144.56-18.2ZM288.8,117c7.19,0,23.68,10.94,23.68,17.5s-13.5.32-23.68,6.28c-6.06,3.54-13.03-5.32-13.03-11.89s5.83-11.89,13.03-11.89Z" style="fill: none;"/>
<g id="Strawberry">
<path d="M258.77,247.98c0,4.05-.23,7.99-.69,11.81,24.84-13.99,19.05-48.09,16.56-57.72-2.46-9.47,2.91-12.17,3.1-12.39,6.2-7.23,17.77,33.83,28.82,30.96,15.62-4.06,4.21-75.4,12.79-76.91.2-.03.4,0,.63.1,3.64,1.65,18.83,14.27,32.66,28.9C350.72,77,272.52,0,176.34,0S0,78.95,0,176.34c0,14.16,1.67,27.94,4.83,41.13,16.17,10.15,57.81,48.7,109.39,48.7,74.99,0,144.56-63.44,144.56-18.2ZM288.8,114.57c7.19,0,23.68,10.94,23.68,17.5s-13.5.32-23.68,6.28c-6.06,3.54-13.03-5.32-13.03-11.89s5.83-11.89,13.03-11.89Z" style="fill: #fff;"/>
<path d="M193.91,92.81c-4.2,0-8.27.82-12.2,2.14,9.19-23.86,8.88-45.93-19.12-16.09-6.77,7.22,10.01-68.21-13.21-23.99-5.33,10.16-23.99-18.32-31.25-14.72-1.22.61.49,28.48-.48,30.76-4.34,10.27-49.38-6.82-16.53,10.83,40.18,21.59,22.48,19.56.34,24.02-8.98,1.81-1.98,6.3,9.6,11.03-18.66,4.42-26.1,15.84-19.47,42.71,11.68,47.3,80.82,80.94,102.31,70.66,21.25-10.16,40.41-41.79,40.41-70.66s-7.71-66.69-40.41-66.69Z" style="fill: #fbff78; stroke: #000; stroke-miterlimit: 10; stroke-width: 15px;"/>
<path d="M151.56,129.45c-15.67-4.57-69.26-20.65-50.09-24.5,22.14-4.46,39.84-2.44-.34-24.02-32.84-17.65,12.19-.56,16.53-10.83.96-2.27-.75-30.15.48-30.76,7.25-3.6,25.91,24.88,31.25,14.72,23.22-44.21,6.44,31.21,13.21,23.99,49.82-53.08,11.99,58.11-11.03,51.4Z" style="fill: #00f13d;"/>
<path d="M234.32,158.68c0,28.87-19.16,60.5-40.41,70.66-21.49,10.28-90.63-23.36-102.31-70.66-9.45-38.26,9.64-45.2,49.05-45.2,13.76,0,31.77-21.49,53.26-21.49,32.7,0,40.41,37.1,40.41,66.69Z" style="fill: #dd002d;"/>
<ellipse cx="189.55" cy="164.09" rx="5.14" ry="13.55" style="fill: #fbff78;"/>
<ellipse cx="122.24" cy="150.54" rx="5.14" ry="13.55" transform="translate(-44.63 51.74) rotate(-20.29)" style="fill: #fbff78;"/>
<ellipse cx="197.74" cy="129.74" rx="5.14" ry="13.55" transform="translate(-21.23 40.38) rotate(-11.07)" style="fill: #fbff78;"/>
<ellipse cx="161.77" cy="141.49" rx="5.14" ry="13.55" transform="translate(-49.07 99.84) rotate(-30)" style="fill: #fbff78;"/>
<ellipse cx="151.86" cy="174.43" rx="5.14" ry="13.55" transform="translate(-51.07 63.5) rotate(-20.29)" style="fill: #fbff78;"/>
<ellipse cx="182.82" cy="201.93" rx="5.14" ry="13.55" transform="translate(-58.69 75.94) rotate(-20.29)" style="fill: #fbff78;"/>
</g>
</g>
</g>
</svg>
</div>
<div>
<svg id="banana" class="icon" data-name="banana" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352.68 352.68">
<g id="banana" data-name="banana">
<g>
<path d="M258.77,247.98c0,4.05-.23,7.99-.69,11.81,24.84-13.99,19.05-48.09,16.56-57.72-2.46-9.47,2.91-12.17,3.1-12.39,6.2-7.23,17.77,33.83,28.82,30.96,15.62-4.06,4.21-75.4,12.79-76.91.2-.03.4,0,.63.1,3.64,1.65,18.83,14.27,32.66,28.9C350.72,77,272.52,0,176.34,0S0,78.95,0,176.34c0,14.16,1.67,27.94,4.83,41.13,16.17,10.15,57.81,48.7,109.39,48.7,74.99,0,144.56-63.44,144.56-18.2ZM288.8,114.57c7.19,0,23.68,10.94,23.68,17.5s-13.5.32-23.68,6.28c-6.06,3.54-13.03-5.32-13.03-11.89s5.83-11.89,13.03-11.89Z" style="fill: #fff;"/>
<path d="M288.8,138.35c10.18-5.96,23.68.29,23.68-6.28s-16.49-17.5-23.68-17.5-13.03,5.32-13.03,11.89,6.97,15.44,13.03,11.89Z" style="fill: #fcee21;"/>
<path d="M114.51,291.41c18.51-4.73,23.75,18.59,54.72,4.13,31.69-14.79,16.68-36.85,34.07-33.04,26.42,5.79,43.66,3.55,54.78-2.71.46-3.82.69-7.76.69-11.81,0-45.24-69.57,18.2-144.56,18.2-51.58,0-93.22-38.55-109.39-48.7,2.28,9.54,5.33,18.78,9.09,27.65,18.06-8.26,49.31,59.39,100.59,46.29Z" style="fill: #ddc800;"/>
<path d="M352.64,172.73c-13.83-14.63-29.02-27.25-32.66-28.9-.22-.1-.43-.13-.63-.1-8.58,1.51,2.83,72.85-12.79,76.91-11.05,2.87-22.63-38.19-28.82-30.96-.19.22-5.55,2.92-3.1,12.39,2.5,9.63,8.28,43.73-16.56,57.72-11.11,6.26-28.36,8.5-54.78,2.71-17.39-3.81-2.39,18.25-34.07,33.04-30.98,14.46-36.22-8.86-54.72-4.13-51.28,13.1-82.53-54.54-100.59-46.29,3.69,8.7,8.05,17.04,13.03,24.95,31.2,49.63,86.44,82.61,149.39,82.61,97.39,0,176.34-78.95,176.34-176.34,0-1.21-.02-2.41-.04-3.62Z" style="fill: #fcee21;"/>
<g id="Banana">
<path d="M249.1,59.39c3.19-1.57,5.25-4.04,5.25-6.82,0-4.74-5.99-8.59-13.37-8.59s-13.37,3.84-13.37,8.59c0,2.02,1.09,3.88,2.92,5.35-13.49,16.5-31.18,62.19-68.97,95.02-37.13,32.25-83.87,43.59-102.81,54.47-.94-.18-1.94-.28-2.97-.28-5.72,0-10.36,2.98-10.36,6.66,0,2.49,2.13,4.66,5.29,5.8.45,1.12,1.19,2.29,2.26,3.52,17.95,20.67,105.97,14.44,159.31-31.9,50.25-43.64,51.82-107.29,36.83-131.81Z" style="fill: #754c24; stroke: #000; stroke-miterlimit: 10; stroke-width: 15px;"/>
<path d="M240.98,141.58c-4.5,10.54-25.86,56.39-88.06,74.8-13.96,4.13-27.52,6.16-39.65,7" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="M246.15,55.3c17.95,20.67,19.47,89.56-33.88,135.9-53.35,46.34-141.36,52.56-159.31,31.9-17.95-20.67,55.25-23.83,108.6-70.17,53.35-46.34,66.64-118.3,84.59-97.63Z" style="fill: #fcee21;"/>
<path d="M247.63,56.66c20.33,54.23-18.03,103.74-41.79,123.12-3.52,2.87,28.76-29.83,38.59-58.1,7.07-20.35-1.05-66.81,2.57-65.77.32.09.51.44.63.75Z" style="fill: #a67c52;"/>
<path d="M51.52,214.37c12.08,2.39,101.91,10.03,36.86-2.86-23.35-4.63,57.56-17.55,42.08-15.49-5.44.73-24.24-7.1-78.94,18.35Z" style="fill: #a67c52;"/>
<path d="M50.61,214.32c48.49,29.39,95.41-4.75,121.8-20.36,61.95-36.66-38.87,29.6-68.66,32.52-21.44,2.1-33.82,2.32-53.55-11.28-.28-.19.13-1.06.42-.88Z" style="fill: #a67c52;"/>
<path d="M234.64,59.73c13.88-10.66-18.56,62.7-72.77,100.13-3.74,2.58,41.45-45.79,50.08-57.05,25.89-33.79,5.88-30.17,22.69-43.08Z" style="fill: #a67c52;"/>
<path d="M240.42,74.89c-1.03.41-.9,2-2,2s-2-.9-2-2,.9-2,2-2,7.03,0,2,2Z" style="fill: #a67c52;"/>
<circle cx="98.26" cy="192.86" r=".45" style="fill: #a67c52;"/>
<circle cx="243.39" cy="70.74" r=".43" style="fill: #a67c52;"/>
<ellipse cx="93.86" cy="208.54" rx="1.88" ry=".39" style="fill: #a67c52;"/>
<circle cx="114.74" cy="201.74" r=".81" style="fill: #a67c52;"/>
<circle cx="75.13" cy="219.62" r=".81" style="fill: #a67c52;"/>
<path d="M52.32,210.73c69.62-24.28,67.2-16.01,113.92-47.77,43.3-29.42-54.23,33.42-82.34,36.66-7.85.9-31.58,11.11-31.58,11.11Z" style="fill: #a67c52;"/>
<circle cx="241.97" cy="66.14" r=".99" style="fill: #a67c52;"/>
<ellipse cx="240.98" cy="52.56" rx="13.37" ry="8.59" style="fill: #754c24;"/>
<ellipse cx="55.77" cy="213.77" rx="10.36" ry="6.66" style="fill: #754c24;"/>
</g>
</g>
</g>
</svg>
</div>
<div>
<svg id="blue" class="icon" data-name="blue" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352.64 352.68">
<g id="blue" data-name="blue">
<g>
<path d="M258.77,247.98c0,4.05-.23,7.99-.69,11.81,24.84-13.99,19.05-48.09,16.56-57.72-2.46-9.47,2.91-12.17,3.1-12.39,6.2-7.23,17.77,33.83,28.82,30.96,15.62-4.06,4.21-75.4,12.79-76.91.2-.03.4,0,.63.1,3.64,1.65,18.83,14.27,32.66,28.9C350.72,77,272.52,0,176.34,0S0,78.95,0,176.34c0,14.16,1.67,27.94,4.83,41.13,16.17,10.15,57.81,48.7,109.39,48.7,74.99,0,144.56-63.44,144.56-18.2ZM288.8,114.57c7.19,0,23.68,10.94,23.68,17.5s-13.5.32-23.68,6.28c-6.06,3.54-13.03-5.32-13.03-11.89s5.83-11.89,13.03-11.89Z" style="fill: #fff;"/>
<path d="M288.76,138.35c10.18-5.96,23.68.29,23.68-6.28s-16.49-17.5-23.68-17.5-13.03,5.32-13.03,11.89,6.97,15.44,13.03,11.89Z" style="fill: blue;"/>
<path d="M114.47,291.41c18.51-4.73,23.75,18.59,54.72,4.13,31.69-14.79,16.68-36.85,34.07-33.04,26.42,5.79,43.66,3.55,54.78-2.71.46-3.82.69-7.76.69-11.81,0-45.24-69.57,18.2-144.56,18.2-51.58,0-93.22-38.55-109.39-48.7,2.28,9.54,5.33,18.78,9.09,27.65,18.06-8.26,49.31,59.39,100.59,46.29Z" style="fill: aqua;"/>
<path d="M352.6,172.73c-13.83-14.63-29.02-27.25-32.66-28.9-.22-.1-.43-.13-.63-.1-8.58,1.51,2.83,72.85-12.79,76.91-11.05,2.87-22.63-38.19-28.82-30.96-.19.22-5.55,2.92-3.1,12.39,2.5,9.63,8.28,43.73-16.56,57.72-11.11,6.26-28.36,8.5-54.78,2.71-17.39-3.81-2.39,18.25-34.07,33.04-30.98,14.46-36.22-8.86-54.72-4.13-51.28,13.1-82.53-54.54-100.59-46.29,3.69,8.7,8.05,17.04,13.03,24.95,31.2,49.63,86.44,82.61,149.39,82.61,97.39,0,176.34-78.95,176.34-176.34,0-1.21-.02-2.41-.04-3.62Z" style="fill: blue;"/>
<g id="Chocolate_Bar" data-name="Chocolate Bar">
<rect x="95.89" y="47.7" width="129.58" height="182.92" transform="translate(-50.72 116.9) rotate(-34.88)" style="fill: #603813; stroke: #000; stroke-miterlimit: 10; stroke-width: 5px;"/>
<rect x="79.68" y="82.7" width="50.39" height="50.39" transform="translate(-42.86 79.37) rotate(-34.88)" style="fill: #8c5200; stroke: #000; stroke-miterlimit: 10; stroke-width: 3px;"/>
<rect x="126.92" y="49.76" width="50.39" height="50.39" transform="translate(-15.54 100.47) rotate(-34.88)" style="fill: #8c5200; stroke: #000; stroke-miterlimit: 10; stroke-width: 3px;"/>
<rect x="113.08" y="130.61" width="50.39" height="50.39" transform="translate(-64.26 107.08) rotate(-34.88)" style="fill: #8c5200; stroke: #000; stroke-miterlimit: 10; stroke-width: 3px;"/>
<rect x="160.32" y="97.67" width="50.39" height="50.39" transform="translate(-36.93 128.18) rotate(-34.88)" style="fill: #8c5200; stroke: #000; stroke-miterlimit: 10; stroke-width: 3px;"/>
<rect x="146.2" y="178.11" width="50.39" height="50.39" transform="translate(-85.48 134.55) rotate(-34.88)" style="fill: #8c5200; stroke: #000; stroke-miterlimit: 10; stroke-width: 3px;"/>
<rect x="193.44" y="145.17" width="50.39" height="50.39" transform="translate(-58.15 155.66) rotate(-34.88)" style="fill: #8c5200; stroke: #000; stroke-miterlimit: 10; stroke-width: 3px;"/>
</g>
</g>
</g>
</svg>
</div>
<div>
<svg id="blue" class="icon" data-name="blue" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352.68 352.68">
<g id="blue" data-name="blue">
<g>
<path d="M258.79,247.98c0,4.05-.23,7.99-.69,11.81,24.84-13.99,19.05-48.09,16.56-57.72-2.46-9.47,2.91-12.17,3.1-12.39,6.2-7.23,17.77,33.83,28.82,30.96,15.62-4.06,4.21-75.4,12.79-76.91.2-.03.4,0,.63.1,3.64,1.65,18.83,14.27,32.66,28.9C350.74,77,272.54,0,176.36,0S.02,78.95.02,176.34c0,14.16,1.67,27.94,4.83,41.13,16.17,10.15,57.81,48.7,109.39,48.7,74.99,0,144.56-63.44,144.56-18.2ZM288.82,114.57c7.19,0,23.68,10.94,23.68,17.5s-13.5.32-23.68,6.28c-6.06,3.54-13.03-5.32-13.03-11.89s5.83-11.89,13.03-11.89Z" style="fill: #fff;"/>
<path d="M288.8,138.35c10.18-5.96,23.68.29,23.68-6.28s-16.49-17.5-23.68-17.5-13.03,5.32-13.03,11.89,6.97,15.44,13.03,11.89Z" style="fill: blue;"/>
<path d="M114.51,291.41c18.51-4.73,23.75,18.59,54.72,4.13,31.69-14.79,16.68-36.85,34.07-33.04,26.42,5.79,43.66,3.55,54.78-2.71.46-3.82.69-7.76.69-11.81,0-45.24-69.57,18.2-144.56,18.2-51.58,0-93.22-38.55-109.39-48.7,2.28,9.54,5.33,18.78,9.09,27.65,18.06-8.26,49.31,59.39,100.59,46.29Z" style="fill: aqua;"/>
<path d="M352.64,172.73c-13.83-14.63-29.02-27.25-32.66-28.9-.22-.1-.43-.13-.63-.1-8.58,1.51,2.83,72.85-12.79,76.91-11.05,2.87-22.63-38.19-28.82-30.96-.19.22-5.55,2.92-3.1,12.39,2.5,9.63,8.28,43.73-16.56,57.72-11.11,6.26-28.36,8.5-54.78,2.71-17.39-3.81-2.39,18.25-34.07,33.04-30.98,14.46-36.22-8.86-54.72-4.13-51.28,13.1-82.53-54.54-100.59-46.29,3.69,8.7,8.05,17.04,13.03,24.95,31.2,49.63,86.44,82.61,149.39,82.61,97.39,0,176.34-78.95,176.34-176.34,0-1.21-.02-2.41-.04-3.62Z" style="fill: blue;"/>
<path d="M258.77,247.98c0,4.05-.23,7.99-.69,11.81,24.84-13.99,19.05-48.09,16.56-57.72-2.46-9.47,2.91-12.17,3.1-12.39,6.2-7.23,17.77,33.83,28.82,30.96,15.62-4.06,4.21-75.4,12.79-76.91.2-.03.4,0,.63.1,3.64,1.65,18.83,14.27,32.66,28.9C350.72,77,272.52,0,176.34,0S0,78.95,0,176.34c0,14.16,1.67,27.94,4.83,41.13,16.17,10.15,57.81,48.7,109.39,48.7,74.99,0,144.56-63.44,144.56-18.2ZM288.8,114.57c7.19,0,23.68,10.94,23.68,17.5s-13.5.32-23.68,6.28c-6.06,3.54-13.03-5.32-13.03-11.89s5.83-11.89,13.03-11.89Z" style="fill: none;"/>
<path d="M193.91,90.38c-4.2,0-8.27.82-12.2,2.14,9.19-23.86,8.88-45.93-19.12-16.09-6.77,7.22,10.01-68.21-13.21-23.99-5.33,10.16-23.99-18.32-31.25-14.72-1.22.61.49,28.48-.48,30.76-4.34,10.27-49.38-6.82-16.53,10.83,40.18,21.59,22.48,19.56.34,24.02-8.98,1.81-1.98,6.3,9.6,11.03-18.66,4.42-26.1,15.84-19.47,42.71,11.68,47.3,80.82,80.94,102.31,70.66,21.25-10.16,40.41-41.79,40.41-70.66s-7.71-66.69-40.41-66.69Z" style="fill: #fbff78; stroke: #000; stroke-miterlimit: 10; stroke-width: 15px;"/>
<path d="M151.56,127.02c-15.67-4.57-69.26-20.65-50.09-24.5,22.14-4.46,39.84-2.44-.34-24.02-32.84-17.65,12.19-.56,16.53-10.83.96-2.27-.75-30.15.48-30.76,7.25-3.6,25.91,24.88,31.25,14.72,23.22-44.21,6.44,31.21,13.21,23.99,49.82-53.08,11.99,58.11-11.03,51.4Z" style="fill: #00f13d;"/>
<path d="M234.32,156.25c0,28.87-19.16,60.5-40.41,70.66-21.49,10.28-90.63-23.36-102.31-70.66-9.45-38.26,9.64-45.2,49.05-45.2,13.76,0,31.77-21.49,53.26-21.49,32.7,0,40.41,37.1,40.41,66.69Z" style="fill: #dd002d;"/>
<ellipse cx="189.55" cy="161.66" rx="5.14" ry="13.55" style="fill: #fbff78;"/>
<ellipse cx="122.24" cy="148.11" rx="5.14" ry="13.55" transform="translate(-43.78 51.59) rotate(-20.29)" style="fill: #fbff78;"/>
<ellipse cx="197.74" cy="127.31" rx="5.14" ry="13.55" transform="translate(-20.77 40.34) rotate(-11.07)" style="fill: #fbff78;"/>
<ellipse cx="161.77" cy="139.06" rx="5.14" ry="13.55" transform="translate(-47.86 99.51) rotate(-30)" style="fill: #fbff78;"/>
<ellipse cx="151.86" cy="172" rx="5.14" ry="13.55" transform="translate(-50.23 63.35) rotate(-20.29)" style="fill: #fbff78;"/>
<ellipse cx="182.82" cy="199.51" rx="5.14" ry="13.55" transform="translate(-57.85 75.79) rotate(-20.29)" style="fill: #fbff78;"/>
</g>
</g>
</svg>
</div>
<div>
<svg id="blue" class="icon" data-name="blue" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352.68 352.68">
<g id="blue" data-name="blue">
<g>
<path d="M258.77,247.98c0,4.05-.23,7.99-.69,11.81,24.84-13.99,19.05-48.09,16.56-57.72-2.46-9.47,2.91-12.17,3.1-12.39,6.2-7.23,17.77,33.83,28.82,30.96,15.62-4.06,4.21-75.4,12.79-76.91.2-.03.4,0,.63.1,3.64,1.65,18.83,14.27,32.66,28.9C350.72,77,272.52,0,176.34,0S0,78.95,0,176.34c0,14.16,1.67,27.94,4.83,41.13,16.17,10.15,57.81,48.7,109.39,48.7,74.99,0,144.56-63.44,144.56-18.2ZM288.8,114.57c7.19,0,23.68,10.94,23.68,17.5s-13.5.32-23.68,6.28c-6.06,3.54-13.03-5.32-13.03-11.89s5.83-11.89,13.03-11.89Z" style="fill: #fff;"/>
<path d="M288.8,138.35c10.18-5.96,23.68.29,23.68-6.28s-16.49-17.5-23.68-17.5-13.03,5.32-13.03,11.89,6.97,15.44,13.03,11.89Z" style="fill: blue;"/>
<path d="M114.51,291.41c18.51-4.73,23.75,18.59,54.72,4.13,31.69-14.79,16.68-36.85,34.07-33.04,26.42,5.79,43.66,3.55,54.78-2.71.46-3.82.69-7.76.69-11.81,0-45.24-69.57,18.2-144.56,18.2-51.58,0-93.22-38.55-109.39-48.7,2.28,9.54,5.33,18.78,9.09,27.65,18.06-8.26,49.31,59.39,100.59,46.29Z" style="fill: aqua;"/>
<path d="M352.64,172.73c-13.83-14.63-29.02-27.25-32.66-28.9-.22-.1-.43-.13-.63-.1-8.58,1.51,2.83,72.85-12.79,76.91-11.05,2.87-22.63-38.19-28.82-30.96-.19.22-5.55,2.92-3.1,12.39,2.5,9.63,8.28,43.73-16.56,57.72-11.11,6.26-28.36,8.5-54.78,2.71-17.39-3.81-2.39,18.25-34.07,33.04-30.98,14.46-36.22-8.86-54.72-4.13-51.28,13.1-82.53-54.54-100.59-46.29,3.69,8.7,8.05,17.04,13.03,24.95,31.2,49.63,86.44,82.61,149.39,82.61,97.39,0,176.34-78.95,176.34-176.34,0-1.21-.02-2.41-.04-3.62Z" style="fill: blue;"/>
<g id="Banana">
<path d="M249.1,59.39c3.19-1.57,5.25-4.04,5.25-6.82,0-4.74-5.99-8.59-13.37-8.59s-13.37,3.84-13.37,8.59c0,2.02,1.09,3.88,2.92,5.35-13.49,16.5-31.18,62.19-68.97,95.02-37.13,32.25-83.87,43.59-102.81,54.47-.94-.18-1.94-.28-2.97-.28-5.72,0-10.36,2.98-10.36,6.66,0,2.49,2.13,4.66,5.29,5.8.45,1.12,1.19,2.29,2.26,3.52,17.95,20.67,105.97,14.44,159.31-31.9,50.25-43.64,51.82-107.29,36.83-131.81Z" style="fill: #754c24; stroke: #000; stroke-miterlimit: 10; stroke-width: 15px;"/>
<path d="M240.98,141.58c-4.5,10.54-25.86,56.39-88.06,74.8-13.96,4.13-27.52,6.16-39.65,7" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="M246.15,55.3c17.95,20.67,19.47,89.56-33.88,135.9-53.35,46.34-141.36,52.56-159.31,31.9s55.25-23.83,108.6-70.17c53.35-46.34,66.64-118.3,84.59-97.63Z" style="fill: #fcee21;"/>
<path d="M247.63,56.66c20.33,54.23-18.03,103.74-41.79,123.12-3.52,2.87,28.76-29.83,38.59-58.1,7.07-20.35-1.05-66.81,2.57-65.77.32.09.51.44.63.75Z" style="fill: #a67c52;"/>
<path d="M51.52,214.37c12.08,2.39,101.91,10.03,36.86-2.86-23.35-4.63,57.56-17.55,42.08-15.49-5.44.73-24.24-7.1-78.94,18.35Z" style="fill: #a67c52;"/>
<path d="M50.61,214.32c48.49,29.39,95.41-4.75,121.8-20.36,61.95-36.66-38.87,29.6-68.66,32.52-21.44,2.1-33.82,2.32-53.55-11.28-.28-.19.13-1.06.42-.88Z" style="fill: #a67c52;"/>
<path d="M234.64,59.73c13.88-10.66-18.56,62.7-72.77,100.13-3.74,2.58,41.45-45.79,50.08-57.05,25.89-33.79,5.88-30.17,22.69-43.08Z" style="fill: #a67c52;"/>
<path d="M240.42,74.89c-1.03.41-.9,2-2,2s-2-.9-2-2,.9-2,2-2,7.03,0,2,2Z" style="fill: #a67c52;"/>
<circle cx="98.26" cy="192.86" r=".45" style="fill: #a67c52;"/>
<circle cx="243.39" cy="70.74" r=".43" style="fill: #a67c52;"/>
<ellipse cx="93.86" cy="208.54" rx="1.88" ry=".39" style="fill: #a67c52;"/>
<circle cx="114.74" cy="201.74" r=".81" style="fill: #a67c52;"/>
<circle cx="75.13" cy="219.62" r=".81" style="fill: #a67c52;"/>
<path d="M52.32,210.73c69.62-24.28,67.2-16.01,113.92-47.77,43.3-29.42-54.23,33.42-82.34,36.66-7.85.9-31.58,11.11-31.58,11.11Z" style="fill: #a67c52;"/>
<circle cx="241.97" cy="66.14" r=".99" style="fill: #a67c52;"/>
<ellipse cx="240.98" cy="52.56" rx="13.37" ry="8.59" style="fill: #754c24;"/>
<ellipse cx="55.77" cy="213.77" rx="10.36" ry="6.66" style="fill: #754c24;"/>
</g>
</g>
</g>
</svg>
</div>
</section>
</section>
<!-- link just above the closing body tag
this allows for the entire DOM tree to be built -->
<script src="js/main.js"></script>
</body>
</html>