-
Notifications
You must be signed in to change notification settings - Fork 0
/
bulb.html
71 lines (63 loc) · 6.37 KB
/
bulb.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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE HTML>
<head>
<style>
body{
margin: 0;
}
#container{
display: flex;
align-items: center;
height: 100vh;
width: 100%;
/*background: linear-gradient(#666, #444, #303645);*/
background-color: #444;
}
svg{
margin: auto;
}
#Light{
-webkit-animation: light 4s linear infinite;
-moz-animation: light 4s linear infinite;
animation: light 4s linear infinite;
}
@-webkit-keyframes light
{
0% {fill: rgba(255,255,200,0);}
20% {fill: rgba(255,255,200,0.3);}
50% {fill: rgba(255,255,200,0.8);}
80% {fill: rgba(255,255,200,0.8);}
100% {fill: rgba(255,255,200,0.0);}
}
@-moz-keyframes light
{
0% {fill: #0D232E;}
20% {fill: #0D232E;}
50% {fill: #F4A4FA;}
80% {fill: #F4A4FA;}
100% {fill: #0D232E;}
}
@keyframes light
{
0% {fill: rgba(255,255,200,0);}
20% {fill: rgba(255,255,200,0.3);}
50% {fill: rgba(255,255,200,0.8);}
80% {fill: rgba(255,255,200,0.8);}
100% {fill: rgba(255,255,200,0.0);}
}
</style>
</head>
<body>
<div id="container">
<!-- <div id='triangle'/> -->
<svg width="36vw" height="75vh" viewBox="0 0 56 95" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Bulb">
<path d="M34.063,71.681 L22.155,71.681 C19.039,71.681 16.656,69.968 15.125,68.661 C15.004,68.571 14.835,68.427 14.748,68.329 C12.192,65.513 12.216,62.747 12.231,61.095 C12.249,59 11.542,57.066 11.026,55.654 C10.922,55.37 10.826,55.106 10.743,54.866 C10.249,53.428 7.032,47.793 5.305,45.201 C-0.209,36.925 0.185,29.677 0.397,25.783 C0.798,18.403 3.796,12.32 9.562,7.185 C11.907,5.097 14.765,3.441 18.056,2.264 C21.003,1.103 24.171,0.462 27.42,0.377 C27.496,0.367 27.573,0.361 27.651,0.36 L27.766,0.36 L28.088,0.363 L28.156,0.36 C28.184,0.36 28.247,0.361 28.275,0.363 L28.447,0.36 C28.459,0.36 28.564,0.36 28.575,0.361 C28.641,0.362 28.707,0.366 28.771,0.374 C32.459,0.455 36.027,1.247 39.379,2.731 C42.13,3.845 44.599,5.352 46.658,7.185 C52.453,12.347 55.451,18.433 55.823,25.791 L55.843,26.222 C55.88,26.852 55.915,27.482 55.915,28.121 L55.912,28.28 C55.904,32.701 55.33,38.573 50.914,45.2 C49.187,47.791 45.971,53.426 45.476,54.865 C45.393,55.106 45.296,55.372 45.192,55.659 C44.675,57.069 43.969,59.002 43.987,61.041 C44.003,62.767 44.028,65.534 41.463,68.339 C41.373,68.438 41.212,68.575 41.093,68.662 C39.566,69.973 37.194,71.681 34.063,71.681 L34.063,71.681 L34.063,71.681 L34.063,71.681 Z M17.6,65.519 C17.628,65.54 17.656,65.563 17.683,65.586 C19.375,67.036 20.753,67.681 22.155,67.681 L34.063,67.681 C35.477,67.681 36.853,67.037 38.526,65.594 C38.557,65.567 38.59,65.54 38.623,65.515 C40.013,63.924 40,62.514 39.988,61.15 C39.964,58.311 40.849,55.889 41.435,54.286 C41.53,54.026 41.618,53.786 41.693,53.567 C42.393,51.528 46.032,45.315 47.586,42.984 C51.386,37.28 51.904,32.371 51.911,28.32 L51.914,28.164 C51.915,27.561 51.882,27.008 51.85,26.456 L51.829,25.999 C51.513,19.76 48.951,14.585 43.998,10.173 C42.281,8.645 40.202,7.38 37.818,6.414 C34.84,5.097 31.728,4.418 28.51,4.371 C28.456,4.37 28.405,4.367 28.353,4.362 L28.256,4.362 C28.217,4.363 28.141,4.361 28.103,4.36 L27.902,4.36 C27.84,4.367 27.778,4.371 27.714,4.372 C24.865,4.424 22.088,4.975 19.46,6.009 C16.596,7.034 14.181,8.427 12.221,10.173 C7.292,14.562 4.731,19.739 4.39,26 C4.132,30.748 4.225,36.367 8.633,42.982 C10.187,45.314 13.825,51.527 14.525,53.565 C14.6,53.782 14.687,54.021 14.781,54.279 C15.367,55.883 16.254,58.306 16.23,61.075 C16.218,62.496 16.205,63.909 17.6,65.519 L17.6,65.519 L17.6,65.519 L17.6,65.519 Z" id="Lightbulb" fill="#222222"></path>
<path d="M17.6,65.519 C17.628,65.54 17.656,65.563 17.683,65.586 C19.375,67.036 20.753,67.681 22.155,67.681 L34.063,67.681 C35.477,67.681 36.853,67.037 38.526,65.594 C38.557,65.567 38.59,65.54 38.623,65.515 C40.013,63.924 40,62.514 39.988,61.15 C39.964,58.311 40.849,55.889 41.435,54.286 C41.53,54.026 41.618,53.786 41.693,53.567 C42.393,51.528 46.032,45.315 47.586,42.984 C51.386,37.28 51.904,32.371 51.911,28.32 L51.914,28.164 C51.915,27.561 51.882,27.008 51.85,26.456 L51.829,25.999 C51.513,19.76 48.951,14.585 43.998,10.173 C42.281,8.645 40.202,7.38 37.818,6.414 C34.84,5.097 31.728,4.418 28.51,4.371 C28.456,4.37 28.405,4.367 28.353,4.362 L28.256,4.362 C28.217,4.363 28.141,4.361 28.103,4.36 L27.902,4.36 C27.84,4.367 27.778,4.371 27.714,4.372 C24.865,4.424 22.088,4.975 19.46,6.009 C16.596,7.034 14.181,8.427 12.221,10.173 C7.292,14.562 4.731,19.739 4.39,26 C4.132,30.748 4.225,36.367 8.633,42.982 C10.187,45.314 13.825,51.527 14.525,53.565 C14.6,53.782 14.687,54.021 14.781,54.279 C15.367,55.883 16.254,58.306 16.23,61.075 C16.218,62.496 16.205,63.909 17.6,65.519 L17.6,65.519 L17.6,65.519 L17.6,65.519 Z" id="Light" fill="rgba(0,0,0,0)"></path>
<path d="M19.417,72.892 C19.396,72.895 19.378,72.904 19.359,72.908 C18.392,73.089 17.735,74.001 17.886,74.98 C18.025,75.885 18.804,76.532 19.693,76.532 C19.736,76.532 19.78,76.525 19.824,76.522 L26.907,75.434 L28.299,75.219 C29.297,75.066 29.984,74.132 29.829,73.133 C29.809,73.002 29.773,72.879 29.728,72.76 L20.278,72.76 L19.417,72.892 L19.417,72.892 L19.417,72.892 L19.417,72.892 Z" id="Bottom4" fill="#222222"></path>
<path d="M19.626,81.591 C18.737,81.591 17.958,80.944 17.819,80.038 C17.665,79.039 18.351,78.104 19.35,77.952 L36.311,75.346 C37.312,75.19 38.245,75.876 38.398,76.877 C38.552,77.875 37.866,78.809 36.868,78.963 L19.906,81.569 C19.812,81.583 19.718,81.591 19.626,81.591 L19.626,81.591 L19.626,81.591 L19.626,81.591 Z" id="Bottom3" fill="#222222"></path>
<path d="M19.626,86.676 C18.737,86.676 17.958,86.03 17.819,85.123 C17.665,84.124 18.351,83.19 19.35,83.037 L36.311,80.431 C37.312,80.275 38.245,80.961 38.398,81.962 C38.552,82.961 37.866,83.896 36.868,84.049 L19.906,86.654 C19.812,86.668 19.718,86.676 19.626,86.676 L19.626,86.676 L19.626,86.676 L19.626,86.676 Z" id="Bottom2" fill="#222222"></path>
<path d="M28.109,94.077 C25.108,94.077 22.432,92.169 21.45,89.329 C21.089,88.285 21.643,87.146 22.687,86.785 C23.729,86.427 24.869,86.977 25.23,88.022 C25.655,89.251 26.812,90.077 28.108,90.077 C29.404,90.077 30.562,89.252 30.986,88.022 C31.346,86.979 32.484,86.426 33.53,86.785 C34.574,87.146 35.128,88.285 34.767,89.329 C33.786,92.169 31.111,94.077 28.109,94.077 L28.109,94.077 L28.109,94.077 L28.109,94.077 Z" id="Bottom1" fill="#222222"></path>
</g>
</svg>
</div>
</body>