<div class="drop cut"></div>
<div class="light cut">
<div class="flash"></div>
</div>
<div class="sourceContainer">
<div class="source"></div>
</div>
body {
align-items: center;
background-color: #333;
display: flex;
justify-content: center;
overflow: hidden;
height: 100vh;
}
.cut {
clip-path: polygon(
0% 0.67435509%,
0.001% 76.864952%,
19.42075% 76.865953%,
22.46631% 76.864653%,
30.31704% 76.865953%,
33.13677% 47.031546%,
33.1839% 50.785461%,
33.32214% 54.23464%,
33.54677% 57.387721%,
33.85306% 60.253326%,
34.23628% 62.840094%,
34.69172% 65.156644%,
35.21463% 67.211618%,
35.80031% 69.013635%,
36.44402% 70.571332%,
37.14103% 71.893338%,
37.88663% 72.988278%,
38.67609% 73.864787%,
39.50467% 74.531496%,
40.36766% 74.997031%,
41.26033% 75.270026%,
42.17796% 75.359106%,
42.79248% 75.337566%,
43.34577% 75.270556%,
43.84433% 75.153996%,
44.29456% 74.983879%,
44.70298% 74.756465%,
45.07605% 74.467785%,
45.42022% 74.113946%,
45.74197% 73.691036%,
46.04773% 73.195128%,
46.34401% 72.622304%,
46.63726% 71.968665%,
46.93395% 71.230286%,
47.24054% 70.403257%,
47.5635% 69.483676%,
47.90929% 68.467619%,
48.28437% 67.351177%,
48.45936% 71.283418%,
48.25409% 74.596894%,
47.73926% 77.320726%,
46.98559% 79.484024%,
46.06376% 81.11591%,
45.04449% 82.245492%,
43.99847% 82.90189%,
42.99642% 83.114224%,
42.1259% 83.048804%,
41.39429% 82.833447%,
40.75194% 82.439579%,
40.14922% 81.838615%,
39.53649% 81.00198%,
38.86411% 79.90108%,
38.08244% 78.507334%,
37.14186% 76.792163%,
33.80685% 91.543673%,
33.84909% 91.638653%,
33.97881% 91.907037%,
34.19255% 92.324074%,
34.48828% 92.864981%,
34.86401% 93.504986%,
35.31772% 94.219313%,
35.84738% 94.983189%,
36.45098% 95.77184%,
37.12652% 96.560491%,
37.87197% 97.324367%,
38.68533% 98.038693%,
39.56456% 98.678699%,
40.50767% 99.219606%,
41.51264% 99.636642%,
42.57744% 99.905027%,
43.70008% 100.00001%,
45.3833% 99.81836%,
46.91204% 99.294008%,
48.29263% 98.457807%,
49.5314% 97.340624%,
50.63468% 95.973321%,
51.6088% 94.386759%,
52.4601% 92.611803%,
53.19491% 90.679317%,
53.81956% 88.620167%,
54.34037% 86.465211%,
54.76369% 84.245314%,
55.09584% 81.991341%,
55.34317% 79.734156%,
55.512% 77.504618%,
55.60864% 75.333594%,
55.63963% 73.251949%,
60.00647% 76.864744%,
67.79977% 76.865944%,
67.7368% 43.495897%,
67.75267% 43.270713%,
67.81953% 42.676825%,
67.96674% 41.836712%,
68.22363% 40.872831%,
68.61964% 39.90768%,
69.18407% 39.063723%,
69.94627% 38.463444%,
70.93557% 38.22934%,
71.91779% 38.440578%,
72.66131% 39.014408%,
73.19932% 39.8304%,
73.56507% 40.768115%,
73.79172% 41.707108%,
73.91248% 42.526936%,
73.96059% 43.107158%,
73.96929% 43.327315%,
73.97069% 76.864943%,
81.93269% 76.865943%,
87.6615% 62.799012%,
87.85758% 66.916778%,
88.39617% 70.388007%,
89.2028% 73.242751%,
90.20296% 75.511059%,
91.32215% 77.222988%,
92.4859% 78.408587%,
93.61971% 79.097908%,
94.6491% 79.321013%,
95.60816% 79.125423%,
96.55657% 78.609779%,
97.45819% 77.880765%,
98.27691% 77.045067%,
98.97658% 76.209364%,
99.52108% 75.480351%,
99.87428% 74.964706%,
100.00002% 74.769116%,
98.75354% 58.753189%,
97.98846% 59.646744%,
97.38228% 60.003531%,
96.87156% 59.906701%,
96.39283% 59.439427%,
95.95146% 58.673472%,
95.60953% 57.68349%,
95.38854% 56.556968%,
95.31008% 55.381396%,
95.3106% 39.18248%,
99.52256% 39.18398%,
99.52356% 21.410726%,
95.30962% 21.412026%,
95.31058% 6.0692323%,
87.66093% 6.0700351%,
87.66162% 21.336908%,
84.16708% 21.338008%,
84.16763% 39.344765%,
87.66093% 39.345965%,
87.66162% 62.798939%,
81.93221% 76.864665%,
81.93361% 38.26962%,
81.81609% 34.57647%,
81.47744% 31.116206%,
80.93121% 27.968823%,
80.1922% 25.214313%,
79.27529% 22.932668%,
78.19531% 21.203884%,
76.96713% 20.107951%,
75.60558% 19.724864%,
74.26178% 19.853761%,
73.06237% 20.253672%,
71.98548% 20.944436%,
71.00925% 21.945893%,
70.11182% 23.277879%,
69.27131% 24.960232%,
68.46586% 27.012791%,
67.6736% 29.455393%,
67.6736% 0%,
60.02491% 0%,
60.00601% 76.864676%,
55.63917% 73.251881%,
55.64937% 21.463792%,
48.03081% 21.464992%,
48.03178% 54.557111%,
47.66381% 54.847189%,
46.75368% 55.485336%,
45.58659% 56.123482%,
44.44874% 56.413561%,
43.34051% 56.086972%,
42.23858% 54.775862%,
41.76832% 53.595785%,
41.39361% 51.983186%,
41.14583% 49.875935%,
41.05625% 47.211902%,
41.15561% 44.561786%,
41.42955% 42.49123%,
41.84188% 40.930505%,
42.35644% 39.809895%,
43.54749% 38.61013%,
44.71326% 38.334149%,
45.82599% 38.620902%,
46.90035% 39.251799%,
47.71055% 39.8827%,
48.03079% 40.169452%,
48.03176% 26.158149%,
47.91883% 25.854759%,
47.59273% 25.05491%,
47.06746% 23.924088%,
46.35789% 22.627779%,
45.47888% 21.331472%,
44.44534% 20.20065%,
43.27213% 19.400801%,
41.97416% 19.097411%,
41.1763% 19.205161%,
40.3773% 19.528775%,
39.58441% 20.068801%,
38.8049% 20.825787%,
38.04601% 21.800278%,
37.31501% 22.99282%,
36.61918% 24.403965%,
35.96576% 26.034257%,
35.36201% 27.884243%,
34.81521% 29.95447%,
34.33261% 32.245487%,
33.92147% 34.757839%,
33.58906% 37.492075%,
33.34263% 40.44874%,
33.18944% 43.628383%,
33.13676% 47.031551%,
30.31708% 76.864681%,
30.31786% 20.826693%,
22.46641% 20.827993%,
22.46791% 76.864682%,
19.42068% 76.865982%,
19.42188% 56.049503%,
8.43032% 56.051003%,
8.43093% 0.53039046%
);
}
.light,
.drop {
height: 150px;
overflow: hidden;
position: absolute;
width: 382px;
}
.drop {
background: #484848;
}
.flash {
background: #f2f2f2;
height: 600px;
width: 600px;
clip-path: polygon(300px 0px, -50px 600px, 650px 600px);
transform: translateX(-196px) rotate(0deg);
transform-origin: 50% 0%;
transition: transform 700ms ease-in-out;
}
.sourceContainer {
height: 150px;
position: absolute;
width: 382px;
}
.source {
background: #f2f2f2;
border-radius: 50%;
height: 30px;
left: 86px;
position: absolute;
top: -8px;
width: 30px;
}
const flash = document.querySelector(".flash");
const states = [
() => {
flash.style.transition = "transform 1ms";
flash.style.transform = "translateX(-196px) rotate(0deg)";
},
() => {
flash.style.transition = "transform 700ms ease-in-out";
setTimeout(() => {
flash.style.transform = "translateX(-196px) rotate(-485deg)";
}, 100);
},
() => (flash.style.transform = "translateX(-196px) rotate(-320deg)"),
() => (flash.style.transform = "translateX(-196px) rotate(-375deg)"),
() => (flash.style.transform = "translateX(-196px) rotate(-355deg)"),
() => (flash.style.transform = "translateX(-196px) rotate(-360deg)")
];
let currentState = 0;
const animateToNextState = () => {
requestAnimationFrame(() => {
states[++currentState % states.length]();
});
};
flash.addEventListener("transitionend", () => animateToNextState());
window.onload = () => {
animateToNextState();
};
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.