-
Notifications
You must be signed in to change notification settings - Fork 0
/
bolbs.html
43 lines (32 loc) · 1.99 KB
/
bolbs.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/bolbs.css">
</head>
<body>
<div class="blob-box">
<div class="bolb">
<svg viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" id="blobSvg">
< transform="translate(168.76002502441406, 8.069480895996094)">
<path class="blob"
d="M422,346Q403,442,309.5,420.5Q216,399,149.5,365Q83,331,92.5,255Q102,179,159.5,142Q217,105,297,97.5Q377,90,409,170Q441,250,422,346Z"
fill="#ea0f1e">
<animate attributeName="d" dur="10000ms" repeatCount="indefinite"
values="M395,328.5Q375,407,297.5,395Q220,383,125,369.5Q30,356,66.5,267.5Q103,179,158.5,135.5Q214,92,298.5,87.5Q383,83,399,166.5Q415,250,395,328.5Z ;
M388.5,305.5Q339,361,270.5,411.5Q202,462,149,393Q96,324,85,244.5Q74,165,141,116Q208,67,289,83.5Q370,100,404,175Q438,250,388.5,305.5Z ;
M438,330Q377,410,293,421Q209,432,164,372.5Q119,313,84,233Q49,153,127,103.5Q205,54,289,74.5Q373,95,436,172.5Q499,250,438,330Z ;
M413.5,321.5Q364,393,290.5,393.5Q217,394,125.5,374Q34,354,39.5,252.5Q45,151,125.5,104.5Q206,58,278.5,90.5Q351,123,407,186.5Q463,250,413.5,321.5Z ;
M437,336.5Q388,423,297.5,431.5Q207,440,116.5,399Q26,358,46.5,260Q67,162,138,117Q209,72,300.5,71.5Q392,71,439,160.5Q486,250,437,336.5Z ;
M388,301Q332,352,265.5,412Q199,472,114.5,414Q30,356,64.5,267Q99,178,158,141Q217,104,304.5,88Q392,72,418,161Q444,250,388,301Z ;
M395,328.5Q375,407,297.5,395Q220,383,125,369.5Q30,356,66.5,267.5Q103,179,158.5,135.5Q214,92,298.5,87.5Q383,83,399,166.5Q415,250,395,328.5Z">
</animate>
</svg>
</div>
</div>
</body>
</html>