Back to Components
Juicy Hamburger Menu Animation using HTML & CSS
Component

Juicy Hamburger Menu Animation using HTML & CSS

CodewithLord
January 5, 2026

Create a visually stunning and interactive juicy hamburger menu animation using pure HTML, CSS, and SVG. This animation features gooey effects, smooth transitions, and multiple creative menu styles.

🔥 Description

This project showcases a Juicy Hamburger Menu Animation built using HTML, CSS, and SVG only — no JavaScript logic required for animation.

Each hamburger icon transforms smoothly into a close (X) icon using:

  • SVG path animations
  • stroke-dasharray & stroke-dashoffset
  • CSS transitions
  • Gooey filter effects

Clicking on any menu icon toggles its animation, making this perfect for:

  • Modern websites
  • Creative portfolios
  • Interactive UI demos

🧱 HTML Structure

The HTML consists of:

  • An SVG gooey filter
  • Multiple hamburger menu variations (plates)
  • SVG paths for burger lines and close icons
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <title>Juicy Hamburgers Menu | @coding.stella</title>
7  <link rel="stylesheet" href="./style.css">
8</head>
9
10<body>
11  <svg>
12    <defs>
13      <filter id="gooeyness">
14        <feGaussianBlur in="SourceGraphic" stdDeviation="2.2" result="blur" />
15        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10"
16          result="gooeyness" />
17        <feComposite in="SourceGraphic" in2="gooeyness" operator="atop" />
18      </filter>
19    </defs>
20  </svg>
21  <div class="plates">
22    <div class="plate plate1" onclick="this.classList.toggle('active')">
23      <svg class="burger" version="1.1" height="100" width="100" viewBox="0 0 100 100">
24        <path class="line line1" d="M 30,65 H 70" />
25        <path class="line line2"
26          d="M 70,50 H 30 C 30,50 18.644068,50.320751 18.644068,36.016949 C 18.644068,21.712696 24.988973,6.5812347 38.79661,11.016949 C 52.604247,15.452663 46.423729,62.711864 46.423729,62.711864 L 50.423729,49.152542 L 50.423729,16.101695" />
27        <path class="line line3"
28          d="M 30,35 H 70 C 70,35 80.084746,36.737688 80.084746,25.423729 C 80.084746,19.599612 75.882239,9.3123528 64.711864,13.559322 C 53.541489,17.806291 54.423729,62.711864 54.423729,62.711864 L 50.423729,49.152542 V 16.101695" />
29      </svg>
30      <svg class="x" version="1.1" height="100" width="100" viewBox="0 0 100 100">
31        <path class="line" d="M 34,32 L 66,68" />
32        <path class="line" d="M 66,32 L 34,68" />
33      </svg>
34    </div>
35    <div class="plate plate2" onclick="this.classList.toggle('active')">
36      <svg class="burger" version="1.1" height="100" width="100" viewBox="0 0 100 100">
37        <path class="line line1"
38          d="M 50,65 H 70 C 70,65 75,65.198488 75,70.762712 C 75,73.779026 74.368822,78.389831 66.525424,78.389831 C 22.092231,78.389831 -18.644068,-30.508475 -18.644068,-30.508475" />
39        <path class="line line2"
40          d="M 50,35 H 70 C 70,35 81.355932,35.300135 81.355932,25.635593 C 81.355932,20.906215 78.841706,14.830508 72.881356,14.830508 C 35.648232,14.830508 -30.508475,84.322034 -30.508475,84.322034" />
41        <path class="line line3"
42          d="M 50,50 H 30 C 30,50 12.288136,47.749959 12.288136,60.169492 C 12.288136,67.738339 16.712974,73.305085 40.677966,73.305085 C 73.791674,73.305085 108.47458,-19.915254 108.47458,-19.915254" />
43        <path class="line line4"
44          d="M 50,50 H 70 C 70,50 81.779661,50.277128 81.779661,36.607372 C 81.779661,28.952694 77.941689,25 69.067797,25 C 39.95532,25 -16.949153,119.91525 -16.949153,119.91525" />
45        <path class="line line5"
46          d="M 50,65 H 30 C 30,65 17.79661,64.618439 17.79661,74.152543 C 17.79661,80.667556 25.093813,81.355932 38.559322,81.355932 C 89.504001,81.355932 135.59322,-21.186441 135.59322,-21.186441" />
47        <path class="line line6"
48          d="M 50,35 H 30 C 30,35 16.525424,35.528154 16.525424,24.152542 C 16.525424,17.535987 22.597755,13.559322 39.40678,13.559322 C 80.617882,13.559322 94.067797,111.01695 94.067797,111.01695" />
49      </svg>
50      <svg class="x" version="1.1" height="100" width="100" viewBox="0 0 100 100">
51        <path class="line" d="M 34,32 L 66,68" />
52        <path class="line" d="M 66,32 L 34,68" />
53      </svg>
54    </div>
55    <div class="plate plate3" onclick="this.classList.toggle('active')">
56      <svg class="burger" version="1.1" height="100" width="100" viewBox="0 0 100 100">
57        <path class="line line1" d="M 50,35 H 30 C 6.9919512,35 5.5084746,123.72881 5.5084746,123.72881" />
58        <path class="line line2" d="M 50,35 H 70 C 98.006349,35 92.796611,119.91525 92.796611,119.91525" />
59        <path class="line line3" d="M 50,50 H 30 C 8.2796577,50 5.9322035,138.1356 5.9322035,138.1356" />
60        <path class="line line4" d="M 50,50 H 70 C 91.152643,50 91.949152,133.21754 91.949152,133.21754" />
61        <path class="line line5"
62          d="M 50,65 C 50,65 47.570314,65 30,65 C 4.9857853,65 9.3220337,147.88136 9.3220337,147.88136" />
63        <path class="line line6" d="M 50,65 H 70 C 91.937316,65 88.559322,144.91525 88.559322,144.91525" />
64      </svg>
65      <svg class="x" version="1.1" height="100" width="100" viewBox="0 0 100 100">
66        <path class="line" d="M 34,32 L 66,68" />
67        <path class="line" d="M 66,32 L 34,68" />
68      </svg>
69    </div>
70    <div class="plate plate4" onclick="this.classList.toggle('active')">
71      <svg class="burger" version="1.1" height="100" width="100" viewBox="0 0 100 100">
72        <path class="line line1" d="M 50,35 H 30" />
73        <path class="line line2" d="M 50,35 H 70" />
74        <path class="line line3" d="M 50,50 H 30" />
75        <path class="line line4" d="M 50,50 H 70" />
76        <path class="line line5" d="M 50,65 H 30" />
77        <path class="line line6" d="M 50,65 H 70" />
78      </svg>
79      <svg class="x" version="1.1" height="100" width="100" viewBox="0 0 100 100">
80        <path class="line" d="M 34,32 L 66,68" />
81        <path class="line" d="M 66,32 L 34,68" />
82      </svg>
83    </div>
84    <div class="plate plate5" onclick="this.classList.toggle('active')">
85      <svg class="burger" version="1.1" height="100" width="100" viewBox="0 0 100 100">
86        <path class="line line1" d="M 30,35 H 70 " />
87        <path class="line line2" d="M 50,50 H 30 L 34,32" />
88        <path class="line line3" d="M 50,50 H 70 L 66,68" />
89        <path class="line line4" d="M 30,65 H 70 " />
90      </svg>
91      <svg class="x" version="1.1" height="100" width="100" viewBox="0 0 100 100">
92        <path class="line" d="M 34,32 L 66,68" />
93        <path class="line" d="M 66,32 L 34,68" />
94      </svg>
95    </div>
96    <div class="plate plate6" onclick="this.classList.toggle('active')">
97      <svg class="burger" version="1.1" height="100" width="100" viewBox="0 0 100 100">
98        <path class="line line1" d="M 50,35 H 30 M 50,35 H 70 V 38 H 30 V 41 H 70" />
99        <path class="line line2" d="M 50,50 H 30 V 47 H 70 V 44 H 30" />
100        <path class="line line3" d="M 50,50 H 70 V 53 H 30 V 56 H 70" />
101        <path class="line line4" d="M 50,65 H 70 M 50,65 H 30 V 62 H 70 V 59 H 30" />
102      </svg>
103      <svg class="x" version="1.1" height="100" width="100" viewBox="0 0 100 100">
104        <path class="line" d="M 34,32 L 66,68" />
105        <path class="line" d="M 66,32 L 34,68" />
106      </svg>
107    </div>
108    <div class="plate plate7" onclick="this.classList.toggle('active')">
109      <svg class="burger" version="1.1" height="100" width="100" viewBox="0 0 100 100">
110        <path class="line line1"
111          d="M 30,35 H 60 C 63.595663,35 65,32.357023 65,30 C 65,27.642977 62.357023,25 60,25 C 57.642977,25 55,25.933659 55,30 V 77.828008" />
112        <path class="line line2"
113          d="M 70,35 H 50 C 46.404337,35 45,32.357023 45,30 C 45,27.642977 47.642977,25 50,25 C 52.357023,25 55,25.933659 55,30 V 77.828008" />
114        <path class="line line3"
115          d="M 30,50 H 55 C 58.595665,50 60.000005,47.357023 60.000005,45 C 60.000005,42.642977 57.357025,40 55,40 C 52.642977,40 50,40.933659 50,45 V 92.828008" />
116        <path class="line line4"
117          d="M 70,50 H 45 C 41.404337,50 40,47.357023 40,45 C 40,42.642977 42.642977,40 45,40 C 47.357023,40 50,40.933659 50,45 V 92.828008" />
118        <path class="line line5"
119          d="M 30,65 H 50 C 53.595665,65 55.000005,62.357023 55.000005,60 C 55.000005,57.642977 52.357025,55 50,55 C 47.642977,55 45,55.933659 45,60 V 107.82801" />
120        <path class="line line6"
121          d="M 70,65 H 40 C 36.404337,65 35,62.357023 35,60 C 35,57.642977 37.642977,55 40,55 C 42.357023,55 45,55.933659 45,60 V 107.82801" />
122      </svg>
123      <svg class="x" version="1.1" height="100" width="100" viewBox="0 0 100 100">
124        <path class="line" d="M 34,32 L 66,68" />
125        <path class="line" d="M 66,32 L 34,68" />
126      </svg>
127    </div>
128    <div class="plate plate8" onclick="this.classList.toggle('active')">
129      <svg class="burger" version="1.1" height="100" width="100" viewBox="0 0 100 100">
130        <path class="line line1"
131          d="M 50,35 H 30 C 30,35 20,33.951333 20,25 C 20,16.048667 30,15 30,15 C 38.261288,15 35.285955,25 40,25 C 44.714045,25 45.285955,15 50,15 C 54.714045,15 55.285955,25 60,25 C 64.714045,25 65.285955,15 70,15 C 74.714045,15 75.285955,25 80,25 C 84.714045,25 85.285955,15 90,15 C 94.714045,15 95.285955,25 100,25 C 104.71405,25 105.28595,15 110,15 C 114.71405,15 115.28595,25 120,25 C 124.71405,25 125.33898,15 130,15" />
132        <path class="line line2"
133          d="M 50,35 H 69.999999 C 69.999999,35 79.999999,36.048667 79.999999,45 C 79.999999,53.951333 69.999999,55 69.999999,55 C 61.738709,55 64.714049,45 59.999999,45 C 55.28596,45 54.71405,55 50,55 C 45.285955,55 44.714045,45 40,45 C 35.285955,45 34.714045,55 30,55 C 25.285955,55 24.714045,45 20,45 C 15.285955,45 14.714045,55 10,55 C 5.285955,55 4.714045,45 0,45 C -4.71405,45 -5.28595,55 -10,55 C -14.71405,55 -15.28595,45 -20,45 C -24.71405,45 -25.33898,55 -30,55" />
134        <path class="line line3"
135          d="M 50,50 H 30 C 30,50 20,48.95133 20,40 C 20,31.04867 30,30 30,30 C 38.261288,30 35.285955,40 40,40 C 44.714045,40 45.285955,30 50,30 C 54.714045,30 55.285955,40 60,40 C 64.714045,40 65.285955,30 70,30 C 74.714045,30 75.285955,40 80,40 C 84.714045,40 85.285955,30 90,30 C 94.714045,30 95.285955,40 100,40 C 104.71405,40 105.28595,30 110,30 C 114.71405,30 115.28595,40 120,40 C 124.71405,40 125.33898,30 130,30" />
136        <path class="line line4"
137          d="M 50,50 H 69.999999 C 69.999999,50 79.999999,51.04867 79.999999,60 C 79.999999,68.95133 69.999999,70 69.999999,70 C 61.738709,70 64.714049,60 59.999999,60 C 55.28596,60 54.71405,70 50,70 C 45.285955,70 44.714045,60 40,60 C 35.285955,60 34.714045,70 30,70 C 25.285955,70 24.714045,60 20,60 C 15.285955,60 14.714045,70 10,70 C 5.285955,70 4.714045,60 0,60 C -4.71405,60 -5.28595,70 -10,70 C -14.71405,70 -15.28595,60 -20,60 C -24.71405,60 -25.33898,70 -30,70" />
138        <path class="line line5"
139          d="M 50.000001,65 H 30.000001 C 30.000001,65 20.000001,63.95133 20.000001,55 C 20.000001,46.048664 30.000001,44.999997 30.000001,44.999997 C 38.261289,44.999997 35.285956,55 40.000001,55 C 44.714046,55 45.285956,44.999997 50.000001,44.999997 C 54.714046,44.999997 55.285956,55 60.000001,55 C 64.714046,55 65.285956,44.999997 70.000001,44.999997 C 74.714046,44.999997 75.285956,55 80.000001,55 C 84.714046,55 85.285956,44.999997 90.000001,44.999997 C 94.714046,44.999997 95.285956,55 99.999998,55 C 104.71405,55 105.28595,44.999997 110,44.999997 C 114.71405,44.999997 115.28595,55 120,55 C 124.71405,55 125.33898,44.999997 130,44.999997" />
140        <path class="line line6"
141          d="M 50.000001,65 H 70 C 70,65 80,66.04866 80,75 C 80,83.95133 70,85 70,85 C 61.73871,85 64.71405,75 60,75 C 55.285961,75 54.714051,85 50.000001,85 C 45.285956,85 44.714046,75 40.000001,75 C 35.285956,75 34.714046,85 30.000001,85 C 25.285956,85 24.714046,75 20.000001,75 C 15.285956,75 14.714046,85 10.000001,85 C 5.2859559,85 4.7140459,75 0,75 C -4.7140491,75 -5.2859491,85 -9.9999991,85 C -14.714049,85 -15.285949,75 -19.999999,75 C -24.714049,75 -25.338979,85 -29.999999,85" />
142      </svg>
143      <svg class="x" version="1.1" height="100" width="100" viewBox="0 0 100 100">
144        <path class="line" d="M 34,32 L 66,68" />
145        <path class="line" d="M 66,32 L 34,68" />
146      </svg>
147    </div>
148  </div>
149
150  <script src="./script.js"></script>
151
152</body>
153</html>

🧠 Key Points

  • Each .plate acts as a clickable hamburger menu
  • SVG paths allow precise animation control
  • onclick toggles the .active class

🎨 CSS Styling & Animation

CSS does all the heavy lifting here — including animations.

1body {
2  align-items: center;
3  display: flex;
4  height: 100vh;
5  justify-content: center;
6  margin: 0;
7  background-color: #252432;
8}
9
10svg {
11  height: 80px;
12  position: absolute;
13  width: 80px;
14}
15
16.plates {
17  display: flex;
18  flex-wrap: wrap;
19  max-height: 160px;
20  width: 640px;
21  cursor: pointer;
22}
23
24@media (max-width: 640px) {
25  .plates {
26    width: 320px;
27  }
28}
29
30.plate {
31  height: 80px;
32  width: 80px;
33}
34
35.burger {
36  filter: url(#gooeyness);
37}
38
39.x {
40  transform: scale(0);
41  transition: transform 400ms;
42}
43
44.line {
45  fill: none;
46  stroke: rgb(255, 255, 255);
47  stroke-width: 6px;
48  stroke-linecap: round;
49  stroke-linejoin: round;
50  transform-origin: 50%;
51  transition: stroke-dasharray 500ms 200ms, stroke-dashoffset 500ms 200ms, transform 500ms 200ms;
52}
53
54.x .line {
55  stroke-width: 5.5px;
56}
57
58/* First plate */
59.plate1 .line2 {
60  stroke-dasharray: 40 200;
61  stroke-dashoffset: 0px;
62}
63
64.plate1 .line3 {
65  stroke-dasharray: 40 179;
66  stroke-dashoffset: 0px;
67}
68
69.active .line {
70  transition: stroke-dasharray 500ms, stroke-dashoffset 500ms, transform 500ms;
71}
72
73.active.plate1 .line1 {
74  transform: scale(0, 1);
75  transition: transform 500ms 100ms;
76}
77
78.active.plate1 .line2 {
79  stroke-dasharray: 5px 200;
80  stroke-dashoffset: -164px;
81}
82
83.active.plate1 .line3 {
84  stroke-dasharray: 5px 179;
85  stroke-dashoffset: -142px;
86}
87
88.active .x {
89  transform: scale(1);
90  transition: transform 400ms 350ms;
91}
92
93/* El segundo plato */
94.plate2 .line1 {
95  stroke-dasharray: 21 185.62753295898438;
96  transition-delay: 0;
97}
98
99.plate2 .line2 {
100  stroke-dasharray: 21 178.6514129638672;
101  transition-delay: 30ms;
102}
103
104.plate2 .line3 {
105  stroke-dasharray: 21 197.92425537109375;
106  transition-delay: 60ms;
107}
108
109.plate2 .line4 {
110  stroke-dasharray: 21 190.6597137451172;
111  transition-delay: 90ms;
112}
113
114.plate2 .line5 {
115  stroke-dasharray: 21 208.52874755859375;
116  transition-delay: 120ms;
117}
118
119.plate2 .line6 {
120  stroke-dasharray: 21 186.59703063964844;
121  transition-delay: 150ms;
122}
123
124.active.plate2 .line1 {
125  stroke-dasharray: 5 185.62753295898438;
126  stroke-dashoffset: -141px;
127}
128
129.active.plate2 .line2 {
130  stroke-dasharray: 5 178.6514129638672;
131  stroke-dashoffset: -137px;
132}
133
134.active.plate2 .line3 {
135  stroke-dasharray: 5 197.92425537109375;
136  stroke-dashoffset: -176px;
137}
138
139.active.plate2 .line4 {
140  stroke-dasharray: 5 190.6597137451172;
141  stroke-dashoffset: -159px;
142}
143
144.active.plate2 .line5 {
145  stroke-dasharray: 5 208.52874755859375;
146  stroke-dashoffset: -139px;
147}
148
149.active.plate2 .line6 {
150  stroke-dasharray: 5 186.59703063964844;
151  stroke-dashoffset: -176px;
152}
153
154.active.plate2 .x {
155  transition: transform 400ms 250ms;
156}
157
158/* O terceiro prato */
159.plate3 .line {
160  transition: stroke-dasharray 300ms 200ms, stroke-dashoffset 300ms 200ms, transform 300ms 200ms;
161}
162
163.plate3 .line1 {
164  stroke-dasharray: 21 109;
165}
166
167.plate3 .line2 {
168  stroke-dasharray: 21 112;
169}
170
171.plate3 .line3 {
172  stroke-dasharray: 21 102;
173}
174
175.plate3 .line4 {
176  stroke-dasharray: 21 103;
177}
178
179.plate3 .line5 {
180  stroke-dasharray: 21 110;
181}
182
183.plate3 .line6 {
184  stroke-dasharray: 21 115;
185}
186
187.plate3 .x {
188  transition: transform 400ms 50ms;
189}
190
191.active.plate3 .line {
192  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
193}
194
195.active.plate3 .line1 {
196  stroke-dasharray: 5 109;
197  stroke-dashoffset: -95px;
198}
199
200.active.plate3 .line2 {
201  stroke-dasharray: 5 112;
202  stroke-dashoffset: -96px;
203}
204
205.active.plate3 .line3 {
206  stroke-dasharray: 5 102;
207  stroke-dashoffset: -79px;
208}
209
210.active.plate3 .line4 {
211  stroke-dasharray: 5 103;
212  stroke-dashoffset: -78px;
213}
214
215.active.plate3 .line5 {
216  stroke-dasharray: 5 110;
217  stroke-dashoffset: -63px;
218}
219
220.active.plate3 .line6 {
221  stroke-dasharray: 5 115;
222  stroke-dashoffset: -64px;
223}
224
225.active.plate3 .x {
226  transition: transform 400ms 100ms;
227}
228
229/* Die vierte teller */
230.plate4 .x {
231  transition: transform 400ms;
232}
233
234.plate4 .line {
235  transform-origin: 50%;
236  transition: transform 400ms 100ms;
237}
238
239.active.plate4 .line {
240  transition: transform 400ms;
241}
242
243.active.plate4 .line1 {
244  transform: translateX(18px) translateY(-3px) rotate(-45deg) scale(.7);
245}
246
247.active.plate4 .line2 {
248  transform: translateX(-18px) translateY(-3px) rotate(45deg) scale(.7);
249}
250
251.active.plate4 .line3 {
252  transform: translateY(0px) rotate(45deg) scale(.7);
253}
254
255.active.plate4 .line4 {
256  transform: translateY(0px) rotate(-45deg) scale(.7);
257}
258
259.active.plate4 .line5 {
260  transform: translateX(18px) translateY(3px) rotate(45deg) scale(.7);
261}
262
263.active.plate4 .line6 {
264  transform: translateX(-18px) translateY(3px) rotate(-45deg) scale(.7);
265}
266
267.active.plate4 .x {
268  transition: transform 400ms 100ms;
269  transform: scale(1);
270}
271
272/* Den femte rätten */
273.plate5 .line {
274  transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms;
275}
276
277.plate5 .line1 {
278  stroke-dasharray: 40 40;
279}
280
281.plate5 .line2 {
282  stroke-dasharray: 21 39;
283}
284
285.plate5 .line3 {
286  stroke-dasharray: 21 39;
287}
288
289.plate5 .line4 {
290  stroke-dasharray: 40 40;
291}
292
293.plate5 .x {
294  transition: transform 400ms 50ms;
295}
296
297.active.plate5 .line {
298  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
299}
300
301.active.plate5 .line1 {
302  stroke-dasharray: 1 40;
303  stroke-dashoffset: -33px;
304}
305
306.active.plate5 .line2 {
307  stroke-dasharray: 5 39;
308  stroke-dashoffset: -37px;
309}
310
311.active.plate5 .line3 {
312  stroke-dasharray: 5 39;
313  stroke-dashoffset: -37px;
314}
315
316.active.plate5 .line4 {
317  stroke-dasharray: 1 40;
318  stroke-dashoffset: -33px;
319}
320
321.active.plate5 .x {
322  transition: transform 400ms 50ms;
323}
324
325/* Шестая пластина */
326.plate6 .line {
327  transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms;
328}
329
330.plate6 .line1 {
331  stroke-dasharray: 21 127;
332}
333
334.plate6 .line2 {
335  stroke-dasharray: 21 106;
336}
337
338.plate6 .line3 {
339  stroke-dasharray: 21 106;
340}
341
342.plate6 .line4 {
343  stroke-dasharray: 21 126;
344}
345
346.plate6 .x {
347  transition: transform 400ms 50ms;
348}
349
350.active.plate6 .line {
351  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
352}
353
354.active.plate6 .line1 {
355  stroke-dasharray: 2 127;
356  stroke-dashoffset: -94px;
357}
358
359.active.plate6 .line2 {
360  stroke-dasharray: 2 106;
361  stroke-dashoffset: -91px;
362}
363
364.active.plate6 .line3 {
365  stroke-dasharray: 2 106;
366  stroke-dashoffset: -91px;
367}
368
369.active.plate6 .line4 {
370  stroke-dasharray: 2 127;
371  stroke-dashoffset: -94px;
372}
373
374.active.plate6 .x {
375  transition: transform 400ms 50ms;
376}
377
378/* 제 7 판 */
379.plate7 .line {
380  transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms;
381}
382
383.plate7 .line1 {
384  stroke-dasharray: 21 102;
385}
386
387.plate7 .line2 {
388  stroke-dasharray: 21 92;
389}
390
391.plate7 .line3 {
392  stroke-dasharray: 21 97;
393}
394
395.plate7 .line4 {
396  stroke-dasharray: 21 97;
397}
398
399.plate7 .line5 {
400  stroke-dasharray: 21 92;
401}
402
403.plate7 .line6 {
404  stroke-dasharray: 21 102;
405}
406
407.plate7 .x {
408  transition: transform 400ms 50ms;
409}
410
411.active.plate7 .line {
412  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
413}
414
415.active.plate7 .line1 {
416  stroke-dasharray: 2 102;
417  stroke-dashoffset: -102px;
418}
419
420.active.plate7 .line2 {
421  stroke-dasharray: 2 92;
422  stroke-dashoffset: -92px;
423}
424
425.active.plate7 .line3 {
426  stroke-dasharray: 2 97;
427  stroke-dashoffset: -97px;
428  transition-delay: 20ms;
429}
430
431.active.plate7 .line4 {
432  stroke-dasharray: 2 97;
433  stroke-dashoffset: -97px;
434  transition-delay: 20ms;
435}
436
437.active.plate7 .line5 {
438  stroke-dasharray: 2 92;
439  stroke-dashoffset: -90px;
440  transition-delay: 40ms;
441}
442
443.active.plate7 .line6 {
444  stroke-dasharray: 2 102;
445  stroke-dashoffset: -100px;
446  transition-delay: 40ms;
447}
448
449.active.plate7 .x {
450  transition: transform 400ms 50ms;
451}
452
453/* Όγδοο πιάτο */
454.plate8 .line {
455  transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms;
456}
457
458.plate8 .line1 {
459  stroke-dasharray: 21 201;
460}
461
462.plate8 .line2 {
463  stroke-dasharray: 21 201;
464  transition-delay: 20ms;
465}
466
467.plate8 .line3 {
468  stroke-dasharray: 21 201;
469  transition-delay: 40ms;
470}
471
472.plate8 .line4 {
473  stroke-dasharray: 21 201;
474  transition-delay: 60ms;
475}
476
477.plate8 .line5 {
478  stroke-dasharray: 21 201;
479  transition-delay: 80ms;
480}
481
482.plate8 .line6 {
483  stroke-dasharray: 21 201;
484  transition-delay: 100ms;
485}
486
487.plate8 .x {
488  transition: transform 400ms 50ms;
489}
490
491.active.plate8 .line {
492  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
493}
494
495.active.plate8 .line1 {
496  stroke-dasharray: 5 201;
497  stroke-dashoffset: -158px;
498}
499
500.active.plate8 .line2 {
501  stroke-dasharray: 5 201;
502  stroke-dashoffset: -158px;
503  transition-delay: 20ms;
504}
505
506.active.plate8 .line3 {
507  stroke-dasharray: 5 201;
508  stroke-dashoffset: -158px;
509  transition-delay: 40ms;
510}
511
512.active.plate8 .line4 {
513  stroke-dasharray: 5 201;
514  stroke-dashoffset: -158px;
515  transition-delay: 60ms;
516}
517
518.active.plate8 .line5 {
519  stroke-dasharray: 5 201;
520  stroke-dashoffset: -158px;
521  transition-delay: 80ms;
522}
523
524.active.plate8 .line6 {
525  stroke-dasharray: 5 201;
526  stroke-dashoffset: -158px;
527  transition-delay: 100ms;
528}
529
530.active.plate8 .x {
531  transition: transform 400ms 50ms;
532}

✨ Animation Magic

  • stroke-dasharray → controls visible stroke length
  • stroke-dashoffset → slides strokes out
  • transform → rotates & scales lines
  • Gooey SVG filter gives liquid-like motion

⚙️ JavaScript Logic

No external JavaScript logic is required 🚀 The interaction is handled directly in HTML using:

1 onclick="this.classList.toggle('active')"

✅ Why This Works

  • Lightweight
  • Instant response
  • Perfect for UI components
  • No dependencies

Love this component?

Explore more components and build amazing UIs.

View All Components