html
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
<html>
<head>
<title>Birdie</title>
</head>
<body>
<svg width="400" height="400">
<rect width="400" height="200" x="0" y="0" fill="#0B2545">
<animate attributename="y" from="-200" to="0" fill="freeze" dur="4"/>
</rect>
<circle cx="200" cy="200" r="150"/>
<line x1="0" y1="200" x2="400" y2="200" stroke="white"/>
<rect width="400" height="200" x="0" y="200" fill="#0B2545">
<animate attributename="y" from="400" to="200" fill="freeze" dur="4"/>
</rect>
<line x1="100" y1="205" x2="120" y2="205" stroke="white"/>
<line x1="120" y1="210" x2="140" y2="210" stroke="white"/>
<line x1="140" y1="220" x2="160" y2="220" stroke="white"/>
<line x1="135" y1="240" x2="150" y2="240" stroke="white"/>
<line x1="300" y1="205" x2="320" y2="205" stroke="white"/>
<line x1="260" y1="240" x2="280" y2="240" stroke="white"/>
<line x1="250" y1="250" x2="270" y2="250" stroke="white"/>
<line x1="135" y1="240" x2="150" y2="240" stroke="white"/>
<polygon points="0,150 100,138 98,155" stroke="none" fill="#CBD1CA">
<animate attributename="points" from="180,150 160,130 140,155" to="0,150 100,138 98,155" dur="4s"/>
</polygon>
<polygon points="100,138 140,120 155,230 135,190 98,155" stroke="none" fill="#2E5077">
<animate attributename="points" from="135,138 140,120 155,230 155,190 135,155" to="100,138 140,120 155,230 135,190 98,155" dur="4s"/>
</polygon>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
circle {
fill: white;
box-shadow: -10px 0px 40px grey;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run