<div class="container">
<div class="bar">
<div class="option">Bubble</div>
<div class="option">Nav</div>
<div class="option">Bar</div>
</div>
<div class="bar bar--top">
<div class="option">Bubble</div>
<div class="option">Nav</div>
<div class="option">Bar</div>
</div>
<div class="bar bar--select">
<div class="option">Bubble</div>
<div class="option">Nav</div>
<div class="option">Bar</div>
</div>
</div>@import url("https://rsms.me/inter/inter.css");
body {
align-items: center;
display: flex;
font-family: "Inter", sans-serif;
font-size: 1.25em;
height: 100vh;
justify-content: center;
margin: 0;
}
.container {
position: relative;
}
.bar {
display: flex;
}
.bar--top {
background: #195ae0;
clip-path: polygon(
3.908% 28.04856%,
5.9017497% 28.04856%,
7.8954994% 28.04856%,
9.88925% 28.04856%,
11.883% 28.04856%,
13.876749% 28.04856%,
15.8705% 28.04856%,
17.86425% 28.04856%,
19.857997% 28.04856%,
21.851753% 28.04856%,
23.8455% 28.04856%,
25.839247% 28.04856%,
27.833003% 28.04856%,
29.82675% 28.04856%,
31.820497% 28.04856%,
33.814253% 28.04856%,
35.808% 28.04856%,
35.808% 30.792463%,
35.808% 33.536365%,
35.808% 36.280268%,
35.808% 39.02417%,
35.808% 41.768073%,
35.808% 44.511975%,
35.808% 47.255878%,
35.808% 49.99978%,
35.808% 52.743682%,
35.808% 55.487585%,
35.808% 58.231487%,
35.808% 60.97539%,
35.808% 63.719292%,
35.808% 66.463195%,
35.808% 69.207097%,
35.808% 71.951%,
33.814253% 71.951%,
31.820497% 71.951%,
29.82675% 71.951%,
27.833003% 71.951%,
25.839247% 71.951%,
23.8455% 71.951%,
21.851753% 71.951%,
19.857997% 71.951%,
17.86425% 71.951%,
15.8705% 71.951%,
13.876749% 71.951%,
11.883% 71.951%,
9.88925% 71.951%,
7.8954994% 71.951%,
5.9017497% 71.951%,
3.908% 71.951%,
3.908% 69.207097%,
3.908% 66.463195%,
3.908% 63.719292%,
3.908% 60.97539%,
3.908% 58.231487%,
3.908% 55.487585%,
3.908% 52.743682%,
3.908% 49.99978%,
3.908% 47.255878%,
3.908% 44.511975%,
3.908% 41.768073%,
3.908% 39.02417%,
3.908% 36.280268%,
3.908% 33.536365%,
3.908% 30.792463%
);
margin-top: -20px;
padding: 20px 0;
position: absolute;
top: 0;
}
.bar--select {
margin-top: -20px;
opacity: 0;
padding: 20px 0;
position: absolute;
top: 0;
}
.bar--top .option {
border-color: transparent;
color: white;
}
.option {
border: 3px solid #195ae0;
color: #195ae0;
cursor: pointer;
margin: 0 10px;
padding: 5.75px 20px;
}
@keyframes Anim1-2 {
0% {
clip-path: polygon(
3.908% 28.04856%,
5.9017497% 28.04856%,
7.8954994% 28.04856%,
9.88925% 28.04856%,
11.883% 28.04856%,
13.876749% 28.04856%,
15.8705% 28.04856%,
17.86425% 28.04856%,
19.857997% 28.04856%,
21.851753% 28.04856%,
23.8455% 28.04856%,
25.839247% 28.04856%,
27.833003% 28.04856%,
29.82675% 28.04856%,
31.820497% 28.04856%,
33.814253% 28.04856%,
35.808% 28.04856%,
35.808% 30.792463%,
35.808% 33.536365%,
35.808% 36.280268%,
35.808% 39.02417%,
35.808% 41.768073%,
35.808% 44.511975%,
35.808% 47.255878%,
35.808% 49.99978%,
35.808% 52.743682%,
35.808% 55.487585%,
35.808% 58.231487%,
35.808% 60.97539%,
35.808% 63.719292%,
35.808% 66.463195%,
35.808% 69.207097%,
35.808% 71.951%,
33.814253% 71.951%,
31.820497% 71.951%,
29.82675% 71.951%,
27.833003% 71.951%,
25.839247% 71.951%,
23.8455% 71.951%,
21.851753% 71.951%,
19.857997% 71.951%,
17.86425% 71.951%,
15.8705% 71.951%,
13.876749% 71.951%,
11.883% 71.951%,
9.88925% 71.951%,
7.8954994% 71.951%,
5.9017497% 71.951%,
3.908% 71.951%,
3.908% 69.207097%,
3.908% 66.463195%,
3.908% 63.719292%,
3.908% 60.97539%,
3.908% 58.231487%,
3.908% 55.487585%,
3.908% 52.743682%,
3.908% 49.99978%,
3.908% 47.255878%,
3.908% 44.511975%,
3.908% 41.768073%,
3.908% 39.02417%,
3.908% 36.280268%,
3.908% 33.536365%,
3.908% 30.792463%
);
}
50% {
clip-path: polygon(
23.704% 25.853438%,
24.98951% 23.902636%,
26.450816% 22.211941%,
28.062804% 20.781352%,
29.800361% 19.610871%,
31.638373% 18.700497%,
33.551725% 18.050229%,
35.515306% 17.660069%,
37.504% 17.530015%,
39.492694% 17.660069%,
41.456275% 18.050229%,
43.369627% 18.700497%,
45.207639% 19.610871%,
46.945196% 20.781352%,
48.557184% 22.211941%,
50.01849% 23.902636%,
51.304% 25.853438%,
52.418913% 28.102739%,
53.385171% 30.659637%,
54.202774% 33.480189%,
54.871721% 36.520454%,
55.392014% 39.736486%,
55.763652% 43.084347%,
55.986634% 46.520093%,
56.060962% 49.99978%,
55.986634% 53.479467%,
55.763652% 56.915213%,
55.392014% 60.263074%,
54.871721% 63.479106%,
54.202774% 66.519371%,
53.385171% 69.339923%,
52.418913% 71.896821%,
51.304% 74.146122%,
50.01849% 76.096924%,
48.557184% 77.787619%,
46.945196% 79.218208%,
45.207639% 80.388689%,
43.369627% 81.299063%,
41.456275% 81.949331%,
39.492694% 82.339491%,
37.504% 82.469545%,
35.515306% 82.339491%,
33.551725% 81.949331%,
31.638373% 81.299063%,
29.800361% 80.388689%,
28.062804% 79.218208%,
26.450816% 77.787619%,
24.98951% 76.096924%,
23.704% 74.146122%,
22.589087% 71.896821%,
21.622829% 69.339923%,
20.805226% 66.519371%,
20.136279% 63.479106%,
19.615986% 60.263074%,
19.244348% 56.915213%,
19.021366% 53.479467%,
18.947038% 49.99978%,
19.021366% 46.520093%,
19.244348% 43.084347%,
19.615986% 39.736486%,
20.136279% 36.520454%,
20.805226% 33.480189%,
21.622829% 30.659637%,
22.589087% 28.102739%
);
}
100% {
clip-path: polygon(
43.5% 28.04856%,
44.956244% 28.04856%,
46.412498% 28.04856%,
47.868751% 28.04856%,
49.324995% 28.04856%,
50.781249% 28.04856%,
52.237502% 28.04856%,
53.693746% 28.04856%,
55.15% 28.04856%,
56.606254% 28.04856%,
58.062498% 28.04856%,
59.518751% 28.04856%,
60.975005% 28.04856%,
62.431249% 28.04856%,
63.887502% 28.04856%,
65.343756% 28.04856%,
66.8% 28.04856%,
66.8% 30.792463%,
66.8% 33.536365%,
66.8% 36.280268%,
66.8% 39.02417%,
66.8% 41.768073%,
66.8% 44.511975%,
66.8% 47.255878%,
66.8% 49.99978%,
66.8% 52.743682%,
66.8% 55.487585%,
66.8% 58.231487%,
66.8% 60.97539%,
66.8% 63.719292%,
66.8% 66.463195%,
66.8% 69.207097%,
66.8% 71.951%,
65.343756% 71.951%,
63.887502% 71.951%,
62.431249% 71.951%,
60.975005% 71.951%,
59.518751% 71.951%,
58.062498% 71.951%,
56.606254% 71.951%,
55.15% 71.951%,
53.693746% 71.951%,
52.237502% 71.951%,
50.781249% 71.951%,
49.324995% 71.951%,
47.868751% 71.951%,
46.412498% 71.951%,
44.956244% 71.951%,
43.5% 71.951%,
43.5% 69.207097%,
43.5% 66.463195%,
43.5% 63.719292%,
43.5% 60.97539%,
43.5% 58.231487%,
43.5% 55.487585%,
43.5% 52.743682%,
43.5% 49.99978%,
43.5% 47.255878%,
43.5% 44.511975%,
43.5% 41.768073%,
43.5% 39.02417%,
43.5% 36.280268%,
43.5% 33.536365%,
43.5% 30.792463%
);
}
}
@keyframes Anim1-3 {
0% {
clip-path: polygon(
3.908% 28.04856%,
5.9017497% 28.04856%,
7.8954994% 28.04856%,
9.88925% 28.04856%,
11.883% 28.04856%,
13.876749% 28.04856%,
15.8705% 28.04856%,
17.86425% 28.04856%,
19.857997% 28.04856%,
21.851753% 28.04856%,
23.8455% 28.04856%,
25.839247% 28.04856%,
27.833003% 28.04856%,
29.82675% 28.04856%,
31.820497% 28.04856%,
33.814253% 28.04856%,
35.808% 28.04856%,
35.808% 30.792463%,
35.808% 33.536365%,
35.808% 36.280268%,
35.808% 39.02417%,
35.808% 41.768073%,
35.808% 44.511975%,
35.808% 47.255878%,
35.808% 49.99978%,
35.808% 52.743682%,
35.808% 55.487585%,
35.808% 58.231487%,
35.808% 60.97539%,
35.808% 63.719292%,
35.808% 66.463195%,
35.808% 69.207097%,
35.808% 71.951%,
33.814253% 71.951%,
31.820497% 71.951%,
29.82675% 71.951%,
27.833003% 71.951%,
25.839247% 71.951%,
23.8455% 71.951%,
21.851753% 71.951%,
19.857997% 71.951%,
17.86425% 71.951%,
15.8705% 71.951%,
13.876749% 71.951%,
11.883% 71.951%,
9.88925% 71.951%,
7.8954994% 71.951%,
5.9017497% 71.951%,
3.908% 71.951%,
3.908% 69.207097%,
3.908% 66.463195%,
3.908% 63.719292%,
3.908% 60.97539%,
3.908% 58.231487%,
3.908% 55.487585%,
3.908% 52.743682%,
3.908% 49.99978%,
3.908% 47.255878%,
3.908% 44.511975%,
3.908% 41.768073%,
3.908% 39.02417%,
3.908% 36.280268%,
3.908% 33.536365%,
3.908% 30.792463%
);
}
50% {
clip-path: polygon(
41.510962% 25.853438%,
42.796472% 23.902636%,
44.257778% 22.211941%,
45.869766% 20.781352%,
47.607323% 19.610871%,
49.445335% 18.700497%,
51.358687% 18.050229%,
53.322268% 17.660069%,
55.310962% 17.530015%,
57.299656% 17.660069%,
59.263237% 18.050229%,
61.176589% 18.700497%,
63.014601% 19.610871%,
64.752158% 20.781352%,
66.364146% 22.211941%,
67.825452% 23.902636%,
69.110962% 25.853438%,
70.225875% 28.102739%,
71.192133% 30.659637%,
72.009736% 33.480189%,
72.678683% 36.520454%,
73.198976% 39.736486%,
73.570614% 43.084347%,
73.793596% 46.520093%,
73.867924% 49.99978%,
73.793596% 53.479467%,
73.570614% 56.915213%,
73.198976% 60.263074%,
72.678683% 63.479106%,
72.009736% 66.519371%,
71.192133% 69.339923%,
70.225875% 71.896821%,
69.110962% 74.146122%,
67.825452% 76.096924%,
66.364146% 77.787619%,
64.752158% 79.218208%,
63.014601% 80.388689%,
61.176589% 81.299063%,
59.263237% 81.949331%,
57.299656% 82.339491%,
55.310962% 82.469545%,
53.322268% 82.339491%,
51.358687% 81.949331%,
49.445335% 81.299063%,
47.607323% 80.388689%,
45.869766% 79.218208%,
44.257778% 77.787619%,
42.796472% 76.096924%,
41.510962% 74.146122%,
40.396049% 71.896821%,
39.429791% 69.339923%,
38.612188% 66.519371%,
37.943241% 63.479106%,
37.422948% 60.263074%,
37.05131% 56.915213%,
36.828328% 53.479467%,
36.754% 49.99978%,
36.828328% 46.520093%,
37.05131% 43.084347%,
37.422948% 39.736486%,
37.943241% 36.520454%,
38.612188% 33.480189%,
39.429791% 30.659637%,
40.396049% 28.102739%
);
}
100% {
clip-path: polygon(
74.4% 28.04856%,
75.774994% 28.04856%,
77.149998% 28.04856%,
78.525001% 28.04856%,
79.899995% 28.04856%,
81.274999% 28.04856%,
82.650002% 28.04856%,
84.024997% 28.04856%,
85.4% 28.04856%,
86.775003% 28.04856%,
88.149998% 28.04856%,
89.525001% 28.04856%,
90.900005% 28.04856%,
92.274999% 28.04856%,
93.650002% 28.04856%,
95.025006% 28.04856%,
96.4% 28.04856%,
96.4% 30.792463%,
96.4% 33.536365%,
96.4% 36.280268%,
96.4% 39.02417%,
96.4% 41.768073%,
96.4% 44.511975%,
96.4% 47.255878%,
96.4% 49.99978%,
96.4% 52.743682%,
96.4% 55.487585%,
96.4% 58.231487%,
96.4% 60.97539%,
96.4% 63.719292%,
96.4% 66.463195%,
96.4% 69.207097%,
96.4% 71.951%,
95.025006% 71.951%,
93.650002% 71.951%,
92.274999% 71.951%,
90.900005% 71.951%,
89.525001% 71.951%,
88.149998% 71.951%,
86.775003% 71.951%,
85.4% 71.951%,
84.024997% 71.951%,
82.650002% 71.951%,
81.274999% 71.951%,
79.899995% 71.951%,
78.525001% 71.951%,
77.149998% 71.951%,
75.774994% 71.951%,
74.4% 71.951%,
74.4% 69.207097%,
74.4% 66.463195%,
74.4% 63.719292%,
74.4% 60.97539%,
74.4% 58.231487%,
74.4% 55.487585%,
74.4% 52.743682%,
74.4% 49.99978%,
74.4% 47.255878%,
74.4% 44.511975%,
74.4% 41.768073%,
74.4% 39.02417%,
74.4% 36.280268%,
74.4% 33.536365%,
74.4% 30.792463%
);
}
}
@keyframes Anim2-1 {
0% {
clip-path: polygon(
43.5% 28.04856%,
44.956244% 28.04856%,
46.412498% 28.04856%,
47.868751% 28.04856%,
49.324995% 28.04856%,
50.781249% 28.04856%,
52.237502% 28.04856%,
53.693746% 28.04856%,
55.15% 28.04856%,
56.606254% 28.04856%,
58.062498% 28.04856%,
59.518751% 28.04856%,
60.975005% 28.04856%,
62.431249% 28.04856%,
63.887502% 28.04856%,
65.343756% 28.04856%,
66.8% 28.04856%,
66.8% 30.792463%,
66.8% 33.536365%,
66.8% 36.280268%,
66.8% 39.02417%,
66.8% 41.768073%,
66.8% 44.511975%,
66.8% 47.255878%,
66.8% 49.99978%,
66.8% 52.743682%,
66.8% 55.487585%,
66.8% 58.231487%,
66.8% 60.97539%,
66.8% 63.719292%,
66.8% 66.463195%,
66.8% 69.207097%,
66.8% 71.951%,
65.343756% 71.951%,
63.887502% 71.951%,
62.431249% 71.951%,
60.975005% 71.951%,
59.518751% 71.951%,
58.062498% 71.951%,
56.606254% 71.951%,
55.15% 71.951%,
53.693746% 71.951%,
52.237502% 71.951%,
50.781249% 71.951%,
49.324995% 71.951%,
47.868751% 71.951%,
46.412498% 71.951%,
44.956244% 71.951%,
43.5% 71.951%,
43.5% 69.207097%,
43.5% 66.463195%,
43.5% 63.719292%,
43.5% 60.97539%,
43.5% 58.231487%,
43.5% 55.487585%,
43.5% 52.743682%,
43.5% 49.99978%,
43.5% 47.255878%,
43.5% 44.511975%,
43.5% 41.768073%,
43.5% 39.02417%,
43.5% 36.280268%,
43.5% 33.536365%,
43.5% 30.792463%
);
}
50% {
clip-path: polygon(
23.704% 25.853438%,
24.98951% 23.902636%,
26.450816% 22.211941%,
28.062804% 20.781352%,
29.800361% 19.610871%,
31.638373% 18.700497%,
33.551725% 18.050229%,
35.515306% 17.660069%,
37.504% 17.530015%,
39.492694% 17.660069%,
41.456275% 18.050229%,
43.369627% 18.700497%,
45.207639% 19.610871%,
46.945196% 20.781352%,
48.557184% 22.211941%,
50.01849% 23.902636%,
51.304% 25.853438%,
52.418913% 28.102739%,
53.385171% 30.659637%,
54.202774% 33.480189%,
54.871721% 36.520454%,
55.392014% 39.736486%,
55.763652% 43.084347%,
55.986634% 46.520093%,
56.060962% 49.99978%,
55.986634% 53.479467%,
55.763652% 56.915213%,
55.392014% 60.263074%,
54.871721% 63.479106%,
54.202774% 66.519371%,
53.385171% 69.339923%,
52.418913% 71.896821%,
51.304% 74.146122%,
50.01849% 76.096924%,
48.557184% 77.787619%,
46.945196% 79.218208%,
45.207639% 80.388689%,
43.369627% 81.299063%,
41.456275% 81.949331%,
39.492694% 82.339491%,
37.504% 82.469545%,
35.515306% 82.339491%,
33.551725% 81.949331%,
31.638373% 81.299063%,
29.800361% 80.388689%,
28.062804% 79.218208%,
26.450816% 77.787619%,
24.98951% 76.096924%,
23.704% 74.146122%,
22.589087% 71.896821%,
21.622829% 69.339923%,
20.805226% 66.519371%,
20.136279% 63.479106%,
19.615986% 60.263074%,
19.244348% 56.915213%,
19.021366% 53.479467%,
18.947038% 49.99978%,
19.021366% 46.520093%,
19.244348% 43.084347%,
19.615986% 39.736486%,
20.136279% 36.520454%,
20.805226% 33.480189%,
21.622829% 30.659637%,
22.589087% 28.102739%
);
}
100% {
clip-path: polygon(
3.908% 28.04856%,
5.9017497% 28.04856%,
7.8954994% 28.04856%,
9.88925% 28.04856%,
11.883% 28.04856%,
13.876749% 28.04856%,
15.8705% 28.04856%,
17.86425% 28.04856%,
19.857997% 28.04856%,
21.851753% 28.04856%,
23.8455% 28.04856%,
25.839247% 28.04856%,
27.833003% 28.04856%,
29.82675% 28.04856%,
31.820497% 28.04856%,
33.814253% 28.04856%,
35.808% 28.04856%,
35.808% 30.792463%,
35.808% 33.536365%,
35.808% 36.280268%,
35.808% 39.02417%,
35.808% 41.768073%,
35.808% 44.511975%,
35.808% 47.255878%,
35.808% 49.99978%,
35.808% 52.743682%,
35.808% 55.487585%,
35.808% 58.231487%,
35.808% 60.97539%,
35.808% 63.719292%,
35.808% 66.463195%,
35.808% 69.207097%,
35.808% 71.951%,
33.814253% 71.951%,
31.820497% 71.951%,
29.82675% 71.951%,
27.833003% 71.951%,
25.839247% 71.951%,
23.8455% 71.951%,
21.851753% 71.951%,
19.857997% 71.951%,
17.86425% 71.951%,
15.8705% 71.951%,
13.876749% 71.951%,
11.883% 71.951%,
9.88925% 71.951%,
7.8954994% 71.951%,
5.9017497% 71.951%,
3.908% 71.951%,
3.908% 69.207097%,
3.908% 66.463195%,
3.908% 63.719292%,
3.908% 60.97539%,
3.908% 58.231487%,
3.908% 55.487585%,
3.908% 52.743682%,
3.908% 49.99978%,
3.908% 47.255878%,
3.908% 44.511975%,
3.908% 41.768073%,
3.908% 39.02417%,
3.908% 36.280268%,
3.908% 33.536365%,
3.908% 30.792463%
);
}
}
@keyframes Anim2-3 {
0% {
clip-path: polygon(
43.5% 28.04856%,
44.956244% 28.04856%,
46.412498% 28.04856%,
47.868751% 28.04856%,
49.324995% 28.04856%,
50.781249% 28.04856%,
52.237502% 28.04856%,
53.693746% 28.04856%,
55.15% 28.04856%,
56.606254% 28.04856%,
58.062498% 28.04856%,
59.518751% 28.04856%,
60.975005% 28.04856%,
62.431249% 28.04856%,
63.887502% 28.04856%,
65.343756% 28.04856%,
66.8% 28.04856%,
66.8% 30.792463%,
66.8% 33.536365%,
66.8% 36.280268%,
66.8% 39.02417%,
66.8% 41.768073%,
66.8% 44.511975%,
66.8% 47.255878%,
66.8% 49.99978%,
66.8% 52.743682%,
66.8% 55.487585%,
66.8% 58.231487%,
66.8% 60.97539%,
66.8% 63.719292%,
66.8% 66.463195%,
66.8% 69.207097%,
66.8% 71.951%,
65.343756% 71.951%,
63.887502% 71.951%,
62.431249% 71.951%,
60.975005% 71.951%,
59.518751% 71.951%,
58.062498% 71.951%,
56.606254% 71.951%,
55.15% 71.951%,
53.693746% 71.951%,
52.237502% 71.951%,
50.781249% 71.951%,
49.324995% 71.951%,
47.868751% 71.951%,
46.412498% 71.951%,
44.956244% 71.951%,
43.5% 71.951%,
43.5% 69.207097%,
43.5% 66.463195%,
43.5% 63.719292%,
43.5% 60.97539%,
43.5% 58.231487%,
43.5% 55.487585%,
43.5% 52.743682%,
43.5% 49.99978%,
43.5% 47.255878%,
43.5% 44.511975%,
43.5% 41.768073%,
43.5% 39.02417%,
43.5% 36.280268%,
43.5% 33.536365%,
43.5% 30.792463%
);
}
50% {
clip-path: polygon(
55.517962% 25.853438%,
56.803472% 23.902636%,
58.264778% 22.211941%,
59.876766% 20.781352%,
61.614323% 19.610871%,
63.452335% 18.700497%,
65.365687% 18.050229%,
67.329268% 17.660069%,
69.317962% 17.530015%,
71.306656% 17.660069%,
73.270237% 18.050229%,
75.183589% 18.700497%,
77.021601% 19.610871%,
78.759158% 20.781352%,
80.371146% 22.211941%,
81.832452% 23.902636%,
83.117962% 25.853438%,
84.232875% 28.102739%,
85.199133% 30.659637%,
86.016736% 33.480189%,
86.685683% 36.520454%,
87.205976% 39.736486%,
87.577614% 43.084347%,
87.800596% 46.520093%,
87.874924% 49.99978%,
87.800596% 53.479467%,
87.577614% 56.915213%,
87.205976% 60.263074%,
86.685683% 63.479106%,
86.016736% 66.519371%,
85.199133% 69.339923%,
84.232875% 71.896821%,
83.117962% 74.146122%,
81.832452% 76.096924%,
80.371146% 77.787619%,
78.759158% 79.218208%,
77.021601% 80.388689%,
75.183589% 81.299063%,
73.270237% 81.949331%,
71.306656% 82.339491%,
69.317962% 82.469545%,
67.329268% 82.339491%,
65.365687% 81.949331%,
63.452335% 81.299063%,
61.614323% 80.388689%,
59.876766% 79.218208%,
58.264778% 77.787619%,
56.803472% 76.096924%,
55.517962% 74.146122%,
54.403049% 71.896821%,
53.436791% 69.339923%,
52.619188% 66.519371%,
51.950241% 63.479106%,
51.429948% 60.263074%,
51.05831% 56.915213%,
50.835328% 53.479467%,
50.761% 49.99978%,
50.835328% 46.520093%,
51.05831% 43.084347%,
51.429948% 39.736486%,
51.950241% 36.520454%,
52.619188% 33.480189%,
53.436791% 30.659637%,
54.403049% 28.102739%
);
}
100% {
clip-path: polygon(
74.4% 28.04856%,
75.774994% 28.04856%,
77.149998% 28.04856%,
78.525001% 28.04856%,
79.899995% 28.04856%,
81.274999% 28.04856%,
82.650002% 28.04856%,
84.024997% 28.04856%,
85.4% 28.04856%,
86.775003% 28.04856%,
88.149998% 28.04856%,
89.525001% 28.04856%,
90.900005% 28.04856%,
92.274999% 28.04856%,
93.650002% 28.04856%,
95.025006% 28.04856%,
96.4% 28.04856%,
96.4% 30.792463%,
96.4% 33.536365%,
96.4% 36.280268%,
96.4% 39.02417%,
96.4% 41.768073%,
96.4% 44.511975%,
96.4% 47.255878%,
96.4% 49.99978%,
96.4% 52.743682%,
96.4% 55.487585%,
96.4% 58.231487%,
96.4% 60.97539%,
96.4% 63.719292%,
96.4% 66.463195%,
96.4% 69.207097%,
96.4% 71.951%,
95.025006% 71.951%,
93.650002% 71.951%,
92.274999% 71.951%,
90.900005% 71.951%,
89.525001% 71.951%,
88.149998% 71.951%,
86.775003% 71.951%,
85.4% 71.951%,
84.024997% 71.951%,
82.650002% 71.951%,
81.274999% 71.951%,
79.899995% 71.951%,
78.525001% 71.951%,
77.149998% 71.951%,
75.774994% 71.951%,
74.4% 71.951%,
74.4% 69.207097%,
74.4% 66.463195%,
74.4% 63.719292%,
74.4% 60.97539%,
74.4% 58.231487%,
74.4% 55.487585%,
74.4% 52.743682%,
74.4% 49.99978%,
74.4% 47.255878%,
74.4% 44.511975%,
74.4% 41.768073%,
74.4% 39.02417%,
74.4% 36.280268%,
74.4% 33.536365%,
74.4% 30.792463%
);
}
}
@keyframes Anim3-1 {
0% {
clip-path: polygon(
74.4% 28.04856%,
75.774994% 28.04856%,
77.149998% 28.04856%,
78.525001% 28.04856%,
79.899995% 28.04856%,
81.274999% 28.04856%,
82.650002% 28.04856%,
84.024997% 28.04856%,
85.4% 28.04856%,
86.775003% 28.04856%,
88.149998% 28.04856%,
89.525001% 28.04856%,
90.900005% 28.04856%,
92.274999% 28.04856%,
93.650002% 28.04856%,
95.025006% 28.04856%,
96.4% 28.04856%,
96.4% 30.792463%,
96.4% 33.536365%,
96.4% 36.280268%,
96.4% 39.02417%,
96.4% 41.768073%,
96.4% 44.511975%,
96.4% 47.255878%,
96.4% 49.99978%,
96.4% 52.743682%,
96.4% 55.487585%,
96.4% 58.231487%,
96.4% 60.97539%,
96.4% 63.719292%,
96.4% 66.463195%,
96.4% 69.207097%,
96.4% 71.951%,
95.025006% 71.951%,
93.650002% 71.951%,
92.274999% 71.951%,
90.900005% 71.951%,
89.525001% 71.951%,
88.149998% 71.951%,
86.775003% 71.951%,
85.4% 71.951%,
84.024997% 71.951%,
82.650002% 71.951%,
81.274999% 71.951%,
79.899995% 71.951%,
78.525001% 71.951%,
77.149998% 71.951%,
75.774994% 71.951%,
74.4% 71.951%,
74.4% 69.207097%,
74.4% 66.463195%,
74.4% 63.719292%,
74.4% 60.97539%,
74.4% 58.231487%,
74.4% 55.487585%,
74.4% 52.743682%,
74.4% 49.99978%,
74.4% 47.255878%,
74.4% 44.511975%,
74.4% 41.768073%,
74.4% 39.02417%,
74.4% 36.280268%,
74.4% 33.536365%,
74.4% 30.792463%
);
}
50% {
clip-path: polygon(
41.510962% 25.853438%,
42.796472% 23.902636%,
44.257778% 22.211941%,
45.869766% 20.781352%,
47.607323% 19.610871%,
49.445335% 18.700497%,
51.358687% 18.050229%,
53.322268% 17.660069%,
55.310962% 17.530015%,
57.299656% 17.660069%,
59.263237% 18.050229%,
61.176589% 18.700497%,
63.014601% 19.610871%,
64.752158% 20.781352%,
66.364146% 22.211941%,
67.825452% 23.902636%,
69.110962% 25.853438%,
70.225875% 28.102739%,
71.192133% 30.659637%,
72.009736% 33.480189%,
72.678683% 36.520454%,
73.198976% 39.736486%,
73.570614% 43.084347%,
73.793596% 46.520093%,
73.867924% 49.99978%,
73.793596% 53.479467%,
73.570614% 56.915213%,
73.198976% 60.263074%,
72.678683% 63.479106%,
72.009736% 66.519371%,
71.192133% 69.339923%,
70.225875% 71.896821%,
69.110962% 74.146122%,
67.825452% 76.096924%,
66.364146% 77.787619%,
64.752158% 79.218208%,
63.014601% 80.388689%,
61.176589% 81.299063%,
59.263237% 81.949331%,
57.299656% 82.339491%,
55.310962% 82.469545%,
53.322268% 82.339491%,
51.358687% 81.949331%,
49.445335% 81.299063%,
47.607323% 80.388689%,
45.869766% 79.218208%,
44.257778% 77.787619%,
42.796472% 76.096924%,
41.510962% 74.146122%,
40.396049% 71.896821%,
39.429791% 69.339923%,
38.612188% 66.519371%,
37.943241% 63.479106%,
37.422948% 60.263074%,
37.05131% 56.915213%,
36.828328% 53.479467%,
36.754% 49.99978%,
36.828328% 46.520093%,
37.05131% 43.084347%,
37.422948% 39.736486%,
37.943241% 36.520454%,
38.612188% 33.480189%,
39.429791% 30.659637%,
40.396049% 28.102739%
);
}
100% {
clip-path: polygon(
3.908% 28.04856%,
5.9017497% 28.04856%,
7.8954994% 28.04856%,
9.88925% 28.04856%,
11.883% 28.04856%,
13.876749% 28.04856%,
15.8705% 28.04856%,
17.86425% 28.04856%,
19.857997% 28.04856%,
21.851753% 28.04856%,
23.8455% 28.04856%,
25.839247% 28.04856%,
27.833003% 28.04856%,
29.82675% 28.04856%,
31.820497% 28.04856%,
33.814253% 28.04856%,
35.808% 28.04856%,
35.808% 30.792463%,
35.808% 33.536365%,
35.808% 36.280268%,
35.808% 39.02417%,
35.808% 41.768073%,
35.808% 44.511975%,
35.808% 47.255878%,
35.808% 49.99978%,
35.808% 52.743682%,
35.808% 55.487585%,
35.808% 58.231487%,
35.808% 60.97539%,
35.808% 63.719292%,
35.808% 66.463195%,
35.808% 69.207097%,
35.808% 71.951%,
33.814253% 71.951%,
31.820497% 71.951%,
29.82675% 71.951%,
27.833003% 71.951%,
25.839247% 71.951%,
23.8455% 71.951%,
21.851753% 71.951%,
19.857997% 71.951%,
17.86425% 71.951%,
15.8705% 71.951%,
13.876749% 71.951%,
11.883% 71.951%,
9.88925% 71.951%,
7.8954994% 71.951%,
5.9017497% 71.951%,
3.908% 71.951%,
3.908% 69.207097%,
3.908% 66.463195%,
3.908% 63.719292%,
3.908% 60.97539%,
3.908% 58.231487%,
3.908% 55.487585%,
3.908% 52.743682%,
3.908% 49.99978%,
3.908% 47.255878%,
3.908% 44.511975%,
3.908% 41.768073%,
3.908% 39.02417%,
3.908% 36.280268%,
3.908% 33.536365%,
3.908% 30.792463%
);
}
}
@keyframes Anim3-2 {
0% {
clip-path: polygon(
74.4% 28.04856%,
75.774994% 28.04856%,
77.149998% 28.04856%,
78.525001% 28.04856%,
79.899995% 28.04856%,
81.274999% 28.04856%,
82.650002% 28.04856%,
84.024997% 28.04856%,
85.4% 28.04856%,
86.775003% 28.04856%,
88.149998% 28.04856%,
89.525001% 28.04856%,
90.900005% 28.04856%,
92.274999% 28.04856%,
93.650002% 28.04856%,
95.025006% 28.04856%,
96.4% 28.04856%,
96.4% 30.792463%,
96.4% 33.536365%,
96.4% 36.280268%,
96.4% 39.02417%,
96.4% 41.768073%,
96.4% 44.511975%,
96.4% 47.255878%,
96.4% 49.99978%,
96.4% 52.743682%,
96.4% 55.487585%,
96.4% 58.231487%,
96.4% 60.97539%,
96.4% 63.719292%,
96.4% 66.463195%,
96.4% 69.207097%,
96.4% 71.951%,
95.025006% 71.951%,
93.650002% 71.951%,
92.274999% 71.951%,
90.900005% 71.951%,
89.525001% 71.951%,
88.149998% 71.951%,
86.775003% 71.951%,
85.4% 71.951%,
84.024997% 71.951%,
82.650002% 71.951%,
81.274999% 71.951%,
79.899995% 71.951%,
78.525001% 71.951%,
77.149998% 71.951%,
75.774994% 71.951%,
74.4% 71.951%,
74.4% 69.207097%,
74.4% 66.463195%,
74.4% 63.719292%,
74.4% 60.97539%,
74.4% 58.231487%,
74.4% 55.487585%,
74.4% 52.743682%,
74.4% 49.99978%,
74.4% 47.255878%,
74.4% 44.511975%,
74.4% 41.768073%,
74.4% 39.02417%,
74.4% 36.280268%,
74.4% 33.536365%,
74.4% 30.792463%
);
}
50% {
clip-path: polygon(
55.517962% 25.853438%,
56.803472% 23.902636%,
58.264778% 22.211941%,
59.876766% 20.781352%,
61.614323% 19.610871%,
63.452335% 18.700497%,
65.365687% 18.050229%,
67.329268% 17.660069%,
69.317962% 17.530015%,
71.306656% 17.660069%,
73.270237% 18.050229%,
75.183589% 18.700497%,
77.021601% 19.610871%,
78.759158% 20.781352%,
80.371146% 22.211941%,
81.832452% 23.902636%,
83.117962% 25.853438%,
84.232875% 28.102739%,
85.199133% 30.659637%,
86.016736% 33.480189%,
86.685683% 36.520454%,
87.205976% 39.736486%,
87.577614% 43.084347%,
87.800596% 46.520093%,
87.874924% 49.99978%,
87.800596% 53.479467%,
87.577614% 56.915213%,
87.205976% 60.263074%,
86.685683% 63.479106%,
86.016736% 66.519371%,
85.199133% 69.339923%,
84.232875% 71.896821%,
83.117962% 74.146122%,
81.832452% 76.096924%,
80.371146% 77.787619%,
78.759158% 79.218208%,
77.021601% 80.388689%,
75.183589% 81.299063%,
73.270237% 81.949331%,
71.306656% 82.339491%,
69.317962% 82.469545%,
67.329268% 82.339491%,
65.365687% 81.949331%,
63.452335% 81.299063%,
61.614323% 80.388689%,
59.876766% 79.218208%,
58.264778% 77.787619%,
56.803472% 76.096924%,
55.517962% 74.146122%,
54.403049% 71.896821%,
53.436791% 69.339923%,
52.619188% 66.519371%,
51.950241% 63.479106%,
51.429948% 60.263074%,
51.05831% 56.915213%,
50.835328% 53.479467%,
50.761% 49.99978%,
50.835328% 46.520093%,
51.05831% 43.084347%,
51.429948% 39.736486%,
51.950241% 36.520454%,
52.619188% 33.480189%,
53.436791% 30.659637%,
54.403049% 28.102739%
);
}
100% {
clip-path: polygon(
43.5% 28.04856%,
44.956244% 28.04856%,
46.412498% 28.04856%,
47.868751% 28.04856%,
49.324995% 28.04856%,
50.781249% 28.04856%,
52.237502% 28.04856%,
53.693746% 28.04856%,
55.15% 28.04856%,
56.606254% 28.04856%,
58.062498% 28.04856%,
59.518751% 28.04856%,
60.975005% 28.04856%,
62.431249% 28.04856%,
63.887502% 28.04856%,
65.343756% 28.04856%,
66.8% 28.04856%,
66.8% 30.792463%,
66.8% 33.536365%,
66.8% 36.280268%,
66.8% 39.02417%,
66.8% 41.768073%,
66.8% 44.511975%,
66.8% 47.255878%,
66.8% 49.99978%,
66.8% 52.743682%,
66.8% 55.487585%,
66.8% 58.231487%,
66.8% 60.97539%,
66.8% 63.719292%,
66.8% 66.463195%,
66.8% 69.207097%,
66.8% 71.951%,
65.343756% 71.951%,
63.887502% 71.951%,
62.431249% 71.951%,
60.975005% 71.951%,
59.518751% 71.951%,
58.062498% 71.951%,
56.606254% 71.951%,
55.15% 71.951%,
53.693746% 71.951%,
52.237502% 71.951%,
50.781249% 71.951%,
49.324995% 71.951%,
47.868751% 71.951%,
46.412498% 71.951%,
44.956244% 71.951%,
43.5% 71.951%,
43.5% 69.207097%,
43.5% 66.463195%,
43.5% 63.719292%,
43.5% 60.97539%,
43.5% 58.231487%,
43.5% 55.487585%,
43.5% 52.743682%,
43.5% 49.99978%,
43.5% 47.255878%,
43.5% 44.511975%,
43.5% 41.768073%,
43.5% 39.02417%,
43.5% 36.280268%,
43.5% 33.536365%,
43.5% 30.792463%
);
}
}
const options = Array.from(
document.querySelectorAll(".bar--select .option")
);
const barTop = document.querySelector(".bar--top");
let current = 0;
for (const option of options) {
const index = options.indexOf(option);
option.addEventListener("click", () => {
barTop.style.animation = `Anim${current + 1}-${index +
1} 300ms linear forwards`;
current = index;
});
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.