[single element] CSS Double Helix

1html {
2  height: 100%;
3  font-size: 1em;
4  background-color: hsl(60,0%,20%);
5  background-image:
6    /* 1 */
7    radial-gradient(
8      white 10%,
9      hsla(0,0%,100%,0) 11%
10      ),
11    /* 2 */
12    radial-gradient(
13      white 10%,
14      hsla(0,0%,100%,0) 11%
15      ),
16    /* 3 */
17    radial-gradient(
18      white 8%,
19      hsla(0,0%,100%,0) 9%
20      ),
21    /* 4 */
22    radial-gradient(
23      white 6%,
24      hsla(0,0%,100%,0) 7%
25      ),
26    /* 5 */
27    radial-gradient(
28      white 6%,
29      hsla(0,0%,100%,0) 7%
30      ),
31    /* 6 */
32    radial-gradient(
33      white 8%,
34      hsla(0,0%,100%,0) 9%
35      ),  
36    /* 7 */
37    radial-gradient(
38      white 10%,
39      hsla(0,0%,100%,0) 11%
40      ),
41    /* 8 */
42    radial-gradient(
43      white 10%,
44      hsla(0,0%,100%,0) 11%
45      ),
46		/* bg */
47    radial-gradient(
48      hsla(105,80%,70%,1), 
49      hsla(0,0%,100%,0)
50      ), 
51    linear-gradient(
52      60deg, 
53      hsl(224,80%,50%), 
54      hsl(10,80%,50%)
55      );
56  background-position: 
57    calc(50% - 5em) 50%,/* 1 */
58    calc(50% - 2.5em) calc(50% - 1.5em),/* 2 */
59    50% calc(50% - 2em),/* 3 */ 
60    calc(50% + 2.5em) calc(50% - 1.5em),/* 4 */
61    
62    calc(50% - 5em) 50%,/* 5 */
63    calc(50% - 2.5em) calc(50% + 1.5em),/* 6 */
64    50% calc(50% + 2em),/* 7 */ 
65    calc(50% + 2.5em) calc(50% + 1.5em),/* 8 */
66    
67    0 50%,    
68    0 50%;    
69    background-size: 
70      10em 10em,
71      10em 10em,
72      10em 10em,
73      10em 10em,
74    
75      10em 10em,
76      10em 10em,
77      10em 10em,
78      10em 10em,
79      
80      100% 100%,      
81      100% 100%;
82  background-repeat: repeat-x;
83  animation: .25s ring linear infinite;
84  }
85
86
87@keyframes ring {
88  0% {
89    background-position: 
90      calc(50% - 5em) 50%,/* 1 */
91      calc(50% - 2.5em) calc(50% - 1.5em),/* 2 */
92      50% calc(50% - 2em),/* 3 */ 
93      calc(50% + 2.5em) calc(50% - 1.5em),/* 4 */
94      
95      calc(50% - 5em) 50%,/* 5 */
96      calc(50% - 2.5em) calc(50% + 1.5em),/* 6 */
97      50% calc(50% + 2em),/* 7 */ 
98      calc(50% + 2.5em) calc(50% + 1.5em),/* 8 */
99      
100      0 50%,      
101      0 50%;  
102    }
103  100% { 
104    background-position: 
105      calc(50% - 2.5em) calc(50% - 1.5em),/* 1 */
106      50% calc(50% - 2em),/* 2 */
107      calc(50% + 2.5em) calc(50% - 1.5em),/* 3 */ 
108      calc(50% + 5em) 50%,/* 4 */
109      
110      calc(50% - 2.5em) calc(50% + 1.5em),/* 5 */
111      50% calc(50% + 2em),/* 6 */
112      calc(50% + 2.5em) calc(50% + 1.5em),/* 7 */ 
113      calc(50% + 5em) 50%,/* 8 */
114      
115      0 50%,      
116      0 50%;  
117    }
118  }
119
120
121
122