Pattern by mobinkakei
1.container { 2 width: 100%; 3 height: 100%; 4 --sz: 4px; /*** size ***/ 5 --sp: 5s; /*** speed ***/ 6 --b1: #211e1e; /*** color ***/ 7 --b2: #1c1b18; /*** color ***/ 8 --b3: #0c0b0a; /*** color ***/ 9 --b4: #0c0b0ae0; /*** color ***/ 10 --c1: #ffffff; /*** color ***/ 11 --ts: 50% / calc(var(--sz) * 17.5) calc(var(--sz) * 29.5); 12 background: 13 /* black shadows */ radial-gradient( 14 circle at 50% 50%, 15 var(--b4) calc(var(--sz) * 1), 16 #fff0 calc(var(--sz) * 8) 17 ) 18 var(--ts), 19 radial-gradient( 20 circle at 0% 0%, 21 var(--b4) calc(var(--sz) * 1), 22 #fff0 calc(var(--sz) * 8) 23 ) 24 var(--ts), 25 radial-gradient( 26 circle at 0% 100%, 27 var(--b4) calc(var(--sz) * 1), 28 #fff0 calc(var(--sz) * 8) 29 ) 30 var(--ts), 31 radial-gradient( 32 circle at 100% 0%, 33 var(--b4) calc(var(--sz) * 1), 34 #fff0 calc(var(--sz) * 8) 35 ) 36 var(--ts), 37 radial-gradient( 38 circle at 100% 100%, 39 var(--b4) calc(var(--sz) * 1), 40 #fff0 calc(var(--sz) * 8) 41 ) 42 var(--ts), 43 /* border bottom */ 44 conic-gradient( 45 from 90deg at 97.5% 67%, 46 var(--c1) 0 87.5deg, 47 #fff0 88deg 100% 48 ) 49 var(--ts), 50 /*repeated*/ 51 conic-gradient( 52 from 90deg at 97.5% 67%, 53 var(--c1) 0 87.5deg, 54 #fff0 88deg 100% 55 ) 56 var(--ts), 57 conic-gradient( 58 from 182.5deg at 2.5% 67%, 59 #fff0 0 0deg, 60 var(--c1) 0.5deg 90deg, 61 #fff0 0 100% 62 ) 63 var(--ts), 64 /*repeated*/ 65 conic-gradient( 66 from 182.5deg at 2.5% 67%, 67 #fff0 0 0deg, 68 var(--c1) 0.5deg 90deg, 69 #fff0 0 100% 70 ) 71 var(--ts), 72 /* border top */ 73 conic-gradient( 74 from 270deg at 2.5% 33%, 75 var(--c1) 0 87.5deg, 76 #fff0 88deg 100% 77 ) 78 var(--ts), 79 /*repeated*/ 80 conic-gradient( 81 from 270deg at 2.5% 33%, 82 var(--c1) 0 87.5deg, 83 #fff0 88deg 100% 84 ) 85 var(--ts), 86 conic-gradient( 87 from 2.5deg at 97.5% 33%, 88 #fff0 0 0deg, 89 var(--c1) 0.5deg 90deg, 90 #fff0 0 100% 91 ) 92 var(--ts), 93 /*repeated*/ 94 conic-gradient( 95 from 2.5deg at 97.5% 33%, 96 #fff0 0 0deg, 97 var(--c1) 0.5deg 90deg, 98 #fff0 0 100% 99 ) 100 var(--ts), 101 /* bottom */ 102 conic-gradient( 103 from 116.5deg at 50% 85.5%, 104 var(--b1) 0 127deg, 105 #fff0 0 100% 106 ) 107 var(--ts), 108 /*repeated*/ 109 conic-gradient( 110 from 116.5deg at 50% 85.5%, 111 var(--b1) 0 127deg, 112 #fff0 0 100% 113 ) 114 var(--ts), 115 /*repeated*/ 116 conic-gradient( 117 from 116.5deg at 50% 85.5%, 118 var(--b1) 0 127deg, 119 #fff0 0 100% 120 ) 121 var(--ts), 122 conic-gradient(from 120deg at 50% 83%, var(--c1) 0 120deg, #fff0 0 100%) 123 var(--ts), 124 /* top */ 125 conic-gradient( 126 from -63.5deg at 50% 14.5%, 127 var(--b1) 0 127deg, 128 #fff0 0 100% 129 ) 130 var(--ts), 131 /*repeated*/ 132 conic-gradient( 133 from -63.5deg at 50% 14.5%, 134 var(--b1) 0 127deg, 135 #fff0 0 100% 136 ) 137 var(--ts), 138 /*repeated*/ 139 conic-gradient( 140 from -63.5deg at 50% 14.5%, 141 var(--b1) 0 127deg, 142 #fff0 0 100% 143 ) 144 var(--ts), 145 conic-gradient(from -60deg at 50% 17%, var(--c1) 0 120deg, #fff0 0 100%) 146 var(--ts), 147 /* central gradient */ 148 conic-gradient( 149 from 0deg at 50% 50%, 150 #fff0 0 2deg, 151 var(--b2) 2.5deg 57.5deg, 152 #fff0 58deg 62.5deg, 153 var(--b1) 63deg 117.5deg, 154 #fff0 118deg 122.5deg, 155 var(--b3) 123deg 177.5deg, 156 #fff0 178deg 182deg, 157 var(--b2) 182.5deg 237.5deg, 158 #fff0 0 242.5deg, 159 var(--b1) 243deg 297.5deg, 160 #fff0 298deg 302.5deg, 161 var(--b3) 303deg 357.5deg, 162 #fff0 358deg 360deg 163 ) 164 var(--ts), 165 /* bg */ var(--c1); 166 animation: colors var(--sp) linear 0s infinite; 167} 168 169@keyframes colors { 170 100% { 171 filter: hue-rotate(360deg); 172 } 173} 174
1.1K views
1.1K views
MIT License