A CodePen by malei0311. css-fibonacci

index.html

<!-- div.container>div.circle-$*1000 -->

<div class="container">
  <div class="circle-1"></div>
  <div class="circle-2"></div>
  <div class="circle-3"></div>
  <div class="circle-4"></div>
  <div class="circle-5"></div>
  <div class="circle-6"></div>
  <div class="circle-7"></div>
  <div class="circle-8"></div>
  <div class="circle-9"></div>
  <div class="circle-10"></div>
  <div class="circle-11"></div>
  <div class="circle-12"></div>
  <div class="circle-13"></div>
  <div class="circle-14"></div>
  <div class="circle-15"></div>
  <div class="circle-16"></div>
  <div class="circle-17"></div>
  <div class="circle-18"></div>
  <div class="circle-19"></div>
  <div class="circle-20"></div>
  <div class="circle-21"></div>
  <div class="circle-22"></div>
  <div class="circle-23"></div>
  <div class="circle-24"></div>
  <div class="circle-25"></div>
  <div class="circle-26"></div>
  <div class="circle-27"></div>
  <div class="circle-28"></div>
  <div class="circle-29"></div>
  <div class="circle-30"></div>
  <div class="circle-31"></div>
  <div class="circle-32"></div>
  <div class="circle-33"></div>
  <div class="circle-34"></div>
  <div class="circle-35"></div>
  <div class="circle-36"></div>
  <div class="circle-37"></div>
  <div class="circle-38"></div>
  <div class="circle-39"></div>
  <div class="circle-40"></div>
  <div class="circle-41"></div>
  <div class="circle-42"></div>
  <div class="circle-43"></div>
  <div class="circle-44"></div>
  <div class="circle-45"></div>
  <div class="circle-46"></div>
  <div class="circle-47"></div>
  <div class="circle-48"></div>
  <div class="circle-49"></div>
  <div class="circle-50"></div>
  <div class="circle-51"></div>
  <div class="circle-52"></div>
  <div class="circle-53"></div>
  <div class="circle-54"></div>
  <div class="circle-55"></div>
  <div class="circle-56"></div>
  <div class="circle-57"></div>
  <div class="circle-58"></div>
  <div class="circle-59"></div>
  <div class="circle-60"></div>
  <div class="circle-61"></div>
  <div class="circle-62"></div>
  <div class="circle-63"></div>
  <div class="circle-64"></div>
  <div class="circle-65"></div>
  <div class="circle-66"></div>
  <div class="circle-67"></div>
  <div class="circle-68"></div>
  <div class="circle-69"></div>
  <div class="circle-70"></div>
  <div class="circle-71"></div>
  <div class="circle-72"></div>
  <div class="circle-73"></div>
  <div class="circle-74"></div>
  <div class="circle-75"></div>
  <div class="circle-76"></div>
  <div class="circle-77"></div>
  <div class="circle-78"></div>
  <div class="circle-79"></div>
  <div class="circle-80"></div>
  <div class="circle-81"></div>
  <div class="circle-82"></div>
  <div class="circle-83"></div>
  <div class="circle-84"></div>
  <div class="circle-85"></div>
  <div class="circle-86"></div>
  <div class="circle-87"></div>
  <div class="circle-88"></div>
  <div class="circle-89"></div>
  <div class="circle-90"></div>
  <div class="circle-91"></div>
  <div class="circle-92"></div>
  <div class="circle-93"></div>
  <div class="circle-94"></div>
  <div class="circle-95"></div>
  <div class="circle-96"></div>
  <div class="circle-97"></div>
  <div class="circle-98"></div>
  <div class="circle-99"></div>
  <div class="circle-100"></div>
  <div class="circle-101"></div>
  <div class="circle-102"></div>
  <div class="circle-103"></div>
  <div class="circle-104"></div>
  <div class="circle-105"></div>
  <div class="circle-106"></div>
  <div class="circle-107"></div>
  <div class="circle-108"></div>
  <div class="circle-109"></div>
  <div class="circle-110"></div>
  <div class="circle-111"></div>
  <div class="circle-112"></div>
  <div class="circle-113"></div>
  <div class="circle-114"></div>
  <div class="circle-115"></div>
  <div class="circle-116"></div>
  <div class="circle-117"></div>
  <div class="circle-118"></div>
  <div class="circle-119"></div>
  <div class="circle-120"></div>
  <div class="circle-121"></div>
  <div class="circle-122"></div>
  <div class="circle-123"></div>
  <div class="circle-124"></div>
  <div class="circle-125"></div>
  <div class="circle-126"></div>
  <div class="circle-127"></div>
  <div class="circle-128"></div>
  <div class="circle-129"></div>
  <div class="circle-130"></div>
  <div class="circle-131"></div>
  <div class="circle-132"></div>
  <div class="circle-133"></div>
  <div class="circle-134"></div>
  <div class="circle-135"></div>
  <div class="circle-136"></div>
  <div class="circle-137"></div>
  <div class="circle-138"></div>
  <div class="circle-139"></div>
  <div class="circle-140"></div>
  <div class="circle-141"></div>
  <div class="circle-142"></div>
  <div class="circle-143"></div>
  <div class="circle-144"></div>
  <div class="circle-145"></div>
  <div class="circle-146"></div>
  <div class="circle-147"></div>
  <div class="circle-148"></div>
  <div class="circle-149"></div>
  <div class="circle-150"></div>
  <div class="circle-151"></div>
  <div class="circle-152"></div>
  <div class="circle-153"></div>
  <div class="circle-154"></div>
  <div class="circle-155"></div>
  <div class="circle-156"></div>
  <div class="circle-157"></div>
  <div class="circle-158"></div>
  <div class="circle-159"></div>
  <div class="circle-160"></div>
  <div class="circle-161"></div>
  <div class="circle-162"></div>
  <div class="circle-163"></div>
  <div class="circle-164"></div>
  <div class="circle-165"></div>
  <div class="circle-166"></div>
  <div class="circle-167"></div>
  <div class="circle-168"></div>
  <div class="circle-169"></div>
  <div class="circle-170"></div>
  <div class="circle-171"></div>
  <div class="circle-172"></div>
  <div class="circle-173"></div>
  <div class="circle-174"></div>
  <div class="circle-175"></div>
  <div class="circle-176"></div>
  <div class="circle-177"></div>
  <div class="circle-178"></div>
  <div class="circle-179"></div>
  <div class="circle-180"></div>
  <div class="circle-181"></div>
  <div class="circle-182"></div>
  <div class="circle-183"></div>
  <div class="circle-184"></div>
  <div class="circle-185"></div>
  <div class="circle-186"></div>
  <div class="circle-187"></div>
  <div class="circle-188"></div>
  <div class="circle-189"></div>
  <div class="circle-190"></div>
  <div class="circle-191"></div>
  <div class="circle-192"></div>
  <div class="circle-193"></div>
  <div class="circle-194"></div>
  <div class="circle-195"></div>
  <div class="circle-196"></div>
  <div class="circle-197"></div>
  <div class="circle-198"></div>
  <div class="circle-199"></div>
  <div class="circle-200"></div>
  <div class="circle-201"></div>
  <div class="circle-202"></div>
  <div class="circle-203"></div>
  <div class="circle-204"></div>
  <div class="circle-205"></div>
  <div class="circle-206"></div>
  <div class="circle-207"></div>
  <div class="circle-208"></div>
  <div class="circle-209"></div>
  <div class="circle-210"></div>
  <div class="circle-211"></div>
  <div class="circle-212"></div>
  <div class="circle-213"></div>
  <div class="circle-214"></div>
  <div class="circle-215"></div>
  <div class="circle-216"></div>
  <div class="circle-217"></div>
  <div class="circle-218"></div>
  <div class="circle-219"></div>
  <div class="circle-220"></div>
  <div class="circle-221"></div>
  <div class="circle-222"></div>
  <div class="circle-223"></div>
  <div class="circle-224"></div>
  <div class="circle-225"></div>
  <div class="circle-226"></div>
  <div class="circle-227"></div>
  <div class="circle-228"></div>
  <div class="circle-229"></div>
  <div class="circle-230"></div>
  <div class="circle-231"></div>
  <div class="circle-232"></div>
  <div class="circle-233"></div>
  <div class="circle-234"></div>
  <div class="circle-235"></div>
  <div class="circle-236"></div>
  <div class="circle-237"></div>
  <div class="circle-238"></div>
  <div class="circle-239"></div>
  <div class="circle-240"></div>
  <div class="circle-241"></div>
  <div class="circle-242"></div>
  <div class="circle-243"></div>
  <div class="circle-244"></div>
  <div class="circle-245"></div>
  <div class="circle-246"></div>
  <div class="circle-247"></div>
  <div class="circle-248"></div>
  <div class="circle-249"></div>
  <div class="circle-250"></div>
  <div class="circle-251"></div>
  <div class="circle-252"></div>
  <div class="circle-253"></div>
  <div class="circle-254"></div>
  <div class="circle-255"></div>
  <div class="circle-256"></div>
  <div class="circle-257"></div>
  <div class="circle-258"></div>
  <div class="circle-259"></div>
  <div class="circle-260"></div>
  <div class="circle-261"></div>
  <div class="circle-262"></div>
  <div class="circle-263"></div>
  <div class="circle-264"></div>
  <div class="circle-265"></div>
  <div class="circle-266"></div>
  <div class="circle-267"></div>
  <div class="circle-268"></div>
  <div class="circle-269"></div>
  <div class="circle-270"></div>
  <div class="circle-271"></div>
  <div class="circle-272"></div>
  <div class="circle-273"></div>
  <div class="circle-274"></div>
  <div class="circle-275"></div>
  <div class="circle-276"></div>
  <div class="circle-277"></div>
  <div class="circle-278"></div>
  <div class="circle-279"></div>
  <div class="circle-280"></div>
  <div class="circle-281"></div>
  <div class="circle-282"></div>
  <div class="circle-283"></div>
  <div class="circle-284"></div>
  <div class="circle-285"></div>
  <div class="circle-286"></div>
  <div class="circle-287"></div>
  <div class="circle-288"></div>
  <div class="circle-289"></div>
  <div class="circle-290"></div>
  <div class="circle-291"></div>
  <div class="circle-292"></div>
  <div class="circle-293"></div>
  <div class="circle-294"></div>
  <div class="circle-295"></div>
  <div class="circle-296"></div>
  <div class="circle-297"></div>
  <div class="circle-298"></div>
  <div class="circle-299"></div>
  <div class="circle-300"></div>
  <div class="circle-301"></div>
  <div class="circle-302"></div>
  <div class="circle-303"></div>
  <div class="circle-304"></div>
  <div class="circle-305"></div>
  <div class="circle-306"></div>
  <div class="circle-307"></div>
  <div class="circle-308"></div>
  <div class="circle-309"></div>
  <div class="circle-310"></div>
  <div class="circle-311"></div>
  <div class="circle-312"></div>
  <div class="circle-313"></div>
  <div class="circle-314"></div>
  <div class="circle-315"></div>
  <div class="circle-316"></div>
  <div class="circle-317"></div>
  <div class="circle-318"></div>
  <div class="circle-319"></div>
  <div class="circle-320"></div>
  <div class="circle-321"></div>
  <div class="circle-322"></div>
  <div class="circle-323"></div>
  <div class="circle-324"></div>
  <div class="circle-325"></div>
  <div class="circle-326"></div>
  <div class="circle-327"></div>
  <div class="circle-328"></div>
  <div class="circle-329"></div>
  <div class="circle-330"></div>
  <div class="circle-331"></div>
  <div class="circle-332"></div>
  <div class="circle-333"></div>
  <div class="circle-334"></div>
  <div class="circle-335"></div>
  <div class="circle-336"></div>
  <div class="circle-337"></div>
  <div class="circle-338"></div>
  <div class="circle-339"></div>
  <div class="circle-340"></div>
  <div class="circle-341"></div>
  <div class="circle-342"></div>
  <div class="circle-343"></div>
  <div class="circle-344"></div>
  <div class="circle-345"></div>
  <div class="circle-346"></div>
  <div class="circle-347"></div>
  <div class="circle-348"></div>
  <div class="circle-349"></div>
  <div class="circle-350"></div>
  <div class="circle-351"></div>
  <div class="circle-352"></div>
  <div class="circle-353"></div>
  <div class="circle-354"></div>
  <div class="circle-355"></div>
  <div class="circle-356"></div>
  <div class="circle-357"></div>
  <div class="circle-358"></div>
  <div class="circle-359"></div>
  <div class="circle-360"></div>
  <div class="circle-361"></div>
  <div class="circle-362"></div>
  <div class="circle-363"></div>
  <div class="circle-364"></div>
  <div class="circle-365"></div>
  <div class="circle-366"></div>
  <div class="circle-367"></div>
  <div class="circle-368"></div>
  <div class="circle-369"></div>
  <div class="circle-370"></div>
  <div class="circle-371"></div>
  <div class="circle-372"></div>
  <div class="circle-373"></div>
  <div class="circle-374"></div>
  <div class="circle-375"></div>
  <div class="circle-376"></div>
  <div class="circle-377"></div>
  <div class="circle-378"></div>
  <div class="circle-379"></div>
  <div class="circle-380"></div>
  <div class="circle-381"></div>
  <div class="circle-382"></div>
  <div class="circle-383"></div>
  <div class="circle-384"></div>
  <div class="circle-385"></div>
  <div class="circle-386"></div>
  <div class="circle-387"></div>
  <div class="circle-388"></div>
  <div class="circle-389"></div>
  <div class="circle-390"></div>
  <div class="circle-391"></div>
  <div class="circle-392"></div>
  <div class="circle-393"></div>
  <div class="circle-394"></div>
  <div class="circle-395"></div>
  <div class="circle-396"></div>
  <div class="circle-397"></div>
  <div class="circle-398"></div>
  <div class="circle-399"></div>
  <div class="circle-400"></div>
  <div class="circle-401"></div>
  <div class="circle-402"></div>
  <div class="circle-403"></div>
  <div class="circle-404"></div>
  <div class="circle-405"></div>
  <div class="circle-406"></div>
  <div class="circle-407"></div>
  <div class="circle-408"></div>
  <div class="circle-409"></div>
  <div class="circle-410"></div>
  <div class="circle-411"></div>
  <div class="circle-412"></div>
  <div class="circle-413"></div>
  <div class="circle-414"></div>
  <div class="circle-415"></div>
  <div class="circle-416"></div>
  <div class="circle-417"></div>
  <div class="circle-418"></div>
  <div class="circle-419"></div>
  <div class="circle-420"></div>
  <div class="circle-421"></div>
  <div class="circle-422"></div>
  <div class="circle-423"></div>
  <div class="circle-424"></div>
  <div class="circle-425"></div>
  <div class="circle-426"></div>
  <div class="circle-427"></div>
  <div class="circle-428"></div>
  <div class="circle-429"></div>
  <div class="circle-430"></div>
  <div class="circle-431"></div>
  <div class="circle-432"></div>
  <div class="circle-433"></div>
  <div class="circle-434"></div>
  <div class="circle-435"></div>
  <div class="circle-436"></div>
  <div class="circle-437"></div>
  <div class="circle-438"></div>
  <div class="circle-439"></div>
  <div class="circle-440"></div>
  <div class="circle-441"></div>
  <div class="circle-442"></div>
  <div class="circle-443"></div>
  <div class="circle-444"></div>
  <div class="circle-445"></div>
  <div class="circle-446"></div>
  <div class="circle-447"></div>
  <div class="circle-448"></div>
  <div class="circle-449"></div>
  <div class="circle-450"></div>
  <div class="circle-451"></div>
  <div class="circle-452"></div>
  <div class="circle-453"></div>
  <div class="circle-454"></div>
  <div class="circle-455"></div>
  <div class="circle-456"></div>
  <div class="circle-457"></div>
  <div class="circle-458"></div>
  <div class="circle-459"></div>
  <div class="circle-460"></div>
  <div class="circle-461"></div>
  <div class="circle-462"></div>
  <div class="circle-463"></div>
  <div class="circle-464"></div>
  <div class="circle-465"></div>
  <div class="circle-466"></div>
  <div class="circle-467"></div>
  <div class="circle-468"></div>
  <div class="circle-469"></div>
  <div class="circle-470"></div>
  <div class="circle-471"></div>
  <div class="circle-472"></div>
  <div class="circle-473"></div>
  <div class="circle-474"></div>
  <div class="circle-475"></div>
  <div class="circle-476"></div>
  <div class="circle-477"></div>
  <div class="circle-478"></div>
  <div class="circle-479"></div>
  <div class="circle-480"></div>
  <div class="circle-481"></div>
  <div class="circle-482"></div>
  <div class="circle-483"></div>
  <div class="circle-484"></div>
  <div class="circle-485"></div>
  <div class="circle-486"></div>
  <div class="circle-487"></div>
  <div class="circle-488"></div>
  <div class="circle-489"></div>
  <div class="circle-490"></div>
  <div class="circle-491"></div>
  <div class="circle-492"></div>
  <div class="circle-493"></div>
  <div class="circle-494"></div>
  <div class="circle-495"></div>
  <div class="circle-496"></div>
  <div class="circle-497"></div>
  <div class="circle-498"></div>
  <div class="circle-499"></div>
  <div class="circle-500"></div>
  <div class="circle-501"></div>
  <div class="circle-502"></div>
  <div class="circle-503"></div>
  <div class="circle-504"></div>
  <div class="circle-505"></div>
  <div class="circle-506"></div>
  <div class="circle-507"></div>
  <div class="circle-508"></div>
  <div class="circle-509"></div>
  <div class="circle-510"></div>
  <div class="circle-511"></div>
  <div class="circle-512"></div>
  <div class="circle-513"></div>
  <div class="circle-514"></div>
  <div class="circle-515"></div>
  <div class="circle-516"></div>
  <div class="circle-517"></div>
  <div class="circle-518"></div>
  <div class="circle-519"></div>
  <div class="circle-520"></div>
  <div class="circle-521"></div>
  <div class="circle-522"></div>
  <div class="circle-523"></div>
  <div class="circle-524"></div>
  <div class="circle-525"></div>
  <div class="circle-526"></div>
  <div class="circle-527"></div>
  <div class="circle-528"></div>
  <div class="circle-529"></div>
  <div class="circle-530"></div>
  <div class="circle-531"></div>
  <div class="circle-532"></div>
  <div class="circle-533"></div>
  <div class="circle-534"></div>
  <div class="circle-535"></div>
  <div class="circle-536"></div>
  <div class="circle-537"></div>
  <div class="circle-538"></div>
  <div class="circle-539"></div>
  <div class="circle-540"></div>
  <div class="circle-541"></div>
  <div class="circle-542"></div>
  <div class="circle-543"></div>
  <div class="circle-544"></div>
  <div class="circle-545"></div>
  <div class="circle-546"></div>
  <div class="circle-547"></div>
  <div class="circle-548"></div>
  <div class="circle-549"></div>
  <div class="circle-550"></div>
  <div class="circle-551"></div>
  <div class="circle-552"></div>
  <div class="circle-553"></div>
  <div class="circle-554"></div>
  <div class="circle-555"></div>
  <div class="circle-556"></div>
  <div class="circle-557"></div>
  <div class="circle-558"></div>
  <div class="circle-559"></div>
  <div class="circle-560"></div>
  <div class="circle-561"></div>
  <div class="circle-562"></div>
  <div class="circle-563"></div>
  <div class="circle-564"></div>
  <div class="circle-565"></div>
  <div class="circle-566"></div>
  <div class="circle-567"></div>
  <div class="circle-568"></div>
  <div class="circle-569"></div>
  <div class="circle-570"></div>
  <div class="circle-571"></div>
  <div class="circle-572"></div>
  <div class="circle-573"></div>
  <div class="circle-574"></div>
  <div class="circle-575"></div>
  <div class="circle-576"></div>
  <div class="circle-577"></div>
  <div class="circle-578"></div>
  <div class="circle-579"></div>
  <div class="circle-580"></div>
  <div class="circle-581"></div>
  <div class="circle-582"></div>
  <div class="circle-583"></div>
  <div class="circle-584"></div>
  <div class="circle-585"></div>
  <div class="circle-586"></div>
  <div class="circle-587"></div>
  <div class="circle-588"></div>
  <div class="circle-589"></div>
  <div class="circle-590"></div>
  <div class="circle-591"></div>
  <div class="circle-592"></div>
  <div class="circle-593"></div>
  <div class="circle-594"></div>
  <div class="circle-595"></div>
  <div class="circle-596"></div>
  <div class="circle-597"></div>
  <div class="circle-598"></div>
  <div class="circle-599"></div>
  <div class="circle-600"></div>
  <div class="circle-601"></div>
  <div class="circle-602"></div>
  <div class="circle-603"></div>
  <div class="circle-604"></div>
  <div class="circle-605"></div>
  <div class="circle-606"></div>
  <div class="circle-607"></div>
  <div class="circle-608"></div>
  <div class="circle-609"></div>
  <div class="circle-610"></div>
  <div class="circle-611"></div>
  <div class="circle-612"></div>
  <div class="circle-613"></div>
  <div class="circle-614"></div>
  <div class="circle-615"></div>
  <div class="circle-616"></div>
  <div class="circle-617"></div>
  <div class="circle-618"></div>
  <div class="circle-619"></div>
  <div class="circle-620"></div>
  <div class="circle-621"></div>
  <div class="circle-622"></div>
  <div class="circle-623"></div>
  <div class="circle-624"></div>
  <div class="circle-625"></div>
  <div class="circle-626"></div>
  <div class="circle-627"></div>
  <div class="circle-628"></div>
  <div class="circle-629"></div>
  <div class="circle-630"></div>
  <div class="circle-631"></div>
  <div class="circle-632"></div>
  <div class="circle-633"></div>
  <div class="circle-634"></div>
  <div class="circle-635"></div>
  <div class="circle-636"></div>
  <div class="circle-637"></div>
  <div class="circle-638"></div>
  <div class="circle-639"></div>
  <div class="circle-640"></div>
  <div class="circle-641"></div>
  <div class="circle-642"></div>
  <div class="circle-643"></div>
  <div class="circle-644"></div>
  <div class="circle-645"></div>
  <div class="circle-646"></div>
  <div class="circle-647"></div>
  <div class="circle-648"></div>
  <div class="circle-649"></div>
  <div class="circle-650"></div>
  <div class="circle-651"></div>
  <div class="circle-652"></div>
  <div class="circle-653"></div>
  <div class="circle-654"></div>
  <div class="circle-655"></div>
  <div class="circle-656"></div>
  <div class="circle-657"></div>
  <div class="circle-658"></div>
  <div class="circle-659"></div>
  <div class="circle-660"></div>
  <div class="circle-661"></div>
  <div class="circle-662"></div>
  <div class="circle-663"></div>
  <div class="circle-664"></div>
  <div class="circle-665"></div>
  <div class="circle-666"></div>
  <div class="circle-667"></div>
  <div class="circle-668"></div>
  <div class="circle-669"></div>
  <div class="circle-670"></div>
  <div class="circle-671"></div>
  <div class="circle-672"></div>
  <div class="circle-673"></div>
  <div class="circle-674"></div>
  <div class="circle-675"></div>
  <div class="circle-676"></div>
  <div class="circle-677"></div>
  <div class="circle-678"></div>
  <div class="circle-679"></div>
  <div class="circle-680"></div>
  <div class="circle-681"></div>
  <div class="circle-682"></div>
  <div class="circle-683"></div>
  <div class="circle-684"></div>
  <div class="circle-685"></div>
  <div class="circle-686"></div>
  <div class="circle-687"></div>
  <div class="circle-688"></div>
  <div class="circle-689"></div>
  <div class="circle-690"></div>
  <div class="circle-691"></div>
  <div class="circle-692"></div>
  <div class="circle-693"></div>
  <div class="circle-694"></div>
  <div class="circle-695"></div>
  <div class="circle-696"></div>
  <div class="circle-697"></div>
  <div class="circle-698"></div>
  <div class="circle-699"></div>
  <div class="circle-700"></div>
  <div class="circle-701"></div>
  <div class="circle-702"></div>
  <div class="circle-703"></div>
  <div class="circle-704"></div>
  <div class="circle-705"></div>
  <div class="circle-706"></div>
  <div class="circle-707"></div>
  <div class="circle-708"></div>
  <div class="circle-709"></div>
  <div class="circle-710"></div>
  <div class="circle-711"></div>
  <div class="circle-712"></div>
  <div class="circle-713"></div>
  <div class="circle-714"></div>
  <div class="circle-715"></div>
  <div class="circle-716"></div>
  <div class="circle-717"></div>
  <div class="circle-718"></div>
  <div class="circle-719"></div>
  <div class="circle-720"></div>
  <div class="circle-721"></div>
  <div class="circle-722"></div>
  <div class="circle-723"></div>
  <div class="circle-724"></div>
  <div class="circle-725"></div>
  <div class="circle-726"></div>
  <div class="circle-727"></div>
  <div class="circle-728"></div>
  <div class="circle-729"></div>
  <div class="circle-730"></div>
  <div class="circle-731"></div>
  <div class="circle-732"></div>
  <div class="circle-733"></div>
  <div class="circle-734"></div>
  <div class="circle-735"></div>
  <div class="circle-736"></div>
  <div class="circle-737"></div>
  <div class="circle-738"></div>
  <div class="circle-739"></div>
  <div class="circle-740"></div>
  <div class="circle-741"></div>
  <div class="circle-742"></div>
  <div class="circle-743"></div>
  <div class="circle-744"></div>
  <div class="circle-745"></div>
  <div class="circle-746"></div>
  <div class="circle-747"></div>
  <div class="circle-748"></div>
  <div class="circle-749"></div>
  <div class="circle-750"></div>
  <div class="circle-751"></div>
  <div class="circle-752"></div>
  <div class="circle-753"></div>
  <div class="circle-754"></div>
  <div class="circle-755"></div>
  <div class="circle-756"></div>
  <div class="circle-757"></div>
  <div class="circle-758"></div>
  <div class="circle-759"></div>
  <div class="circle-760"></div>
  <div class="circle-761"></div>
  <div class="circle-762"></div>
  <div class="circle-763"></div>
  <div class="circle-764"></div>
  <div class="circle-765"></div>
  <div class="circle-766"></div>
  <div class="circle-767"></div>
  <div class="circle-768"></div>
  <div class="circle-769"></div>
  <div class="circle-770"></div>
  <div class="circle-771"></div>
  <div class="circle-772"></div>
  <div class="circle-773"></div>
  <div class="circle-774"></div>
  <div class="circle-775"></div>
  <div class="circle-776"></div>
  <div class="circle-777"></div>
  <div class="circle-778"></div>
  <div class="circle-779"></div>
  <div class="circle-780"></div>
  <div class="circle-781"></div>
  <div class="circle-782"></div>
  <div class="circle-783"></div>
  <div class="circle-784"></div>
  <div class="circle-785"></div>
  <div class="circle-786"></div>
  <div class="circle-787"></div>
  <div class="circle-788"></div>
  <div class="circle-789"></div>
  <div class="circle-790"></div>
  <div class="circle-791"></div>
  <div class="circle-792"></div>
  <div class="circle-793"></div>
  <div class="circle-794"></div>
  <div class="circle-795"></div>
  <div class="circle-796"></div>
  <div class="circle-797"></div>
  <div class="circle-798"></div>
  <div class="circle-799"></div>
  <div class="circle-800"></div>
  <div class="circle-801"></div>
  <div class="circle-802"></div>
  <div class="circle-803"></div>
  <div class="circle-804"></div>
  <div class="circle-805"></div>
  <div class="circle-806"></div>
  <div class="circle-807"></div>
  <div class="circle-808"></div>
  <div class="circle-809"></div>
  <div class="circle-810"></div>
  <div class="circle-811"></div>
  <div class="circle-812"></div>
  <div class="circle-813"></div>
  <div class="circle-814"></div>
  <div class="circle-815"></div>
  <div class="circle-816"></div>
  <div class="circle-817"></div>
  <div class="circle-818"></div>
  <div class="circle-819"></div>
  <div class="circle-820"></div>
  <div class="circle-821"></div>
  <div class="circle-822"></div>
  <div class="circle-823"></div>
  <div class="circle-824"></div>
  <div class="circle-825"></div>
  <div class="circle-826"></div>
  <div class="circle-827"></div>
  <div class="circle-828"></div>
  <div class="circle-829"></div>
  <div class="circle-830"></div>
  <div class="circle-831"></div>
  <div class="circle-832"></div>
  <div class="circle-833"></div>
  <div class="circle-834"></div>
  <div class="circle-835"></div>
  <div class="circle-836"></div>
  <div class="circle-837"></div>
  <div class="circle-838"></div>
  <div class="circle-839"></div>
  <div class="circle-840"></div>
  <div class="circle-841"></div>
  <div class="circle-842"></div>
  <div class="circle-843"></div>
  <div class="circle-844"></div>
  <div class="circle-845"></div>
  <div class="circle-846"></div>
  <div class="circle-847"></div>
  <div class="circle-848"></div>
  <div class="circle-849"></div>
  <div class="circle-850"></div>
  <div class="circle-851"></div>
  <div class="circle-852"></div>
  <div class="circle-853"></div>
  <div class="circle-854"></div>
  <div class="circle-855"></div>
  <div class="circle-856"></div>
  <div class="circle-857"></div>
  <div class="circle-858"></div>
  <div class="circle-859"></div>
  <div class="circle-860"></div>
  <div class="circle-861"></div>
  <div class="circle-862"></div>
  <div class="circle-863"></div>
  <div class="circle-864"></div>
  <div class="circle-865"></div>
  <div class="circle-866"></div>
  <div class="circle-867"></div>
  <div class="circle-868"></div>
  <div class="circle-869"></div>
  <div class="circle-870"></div>
  <div class="circle-871"></div>
  <div class="circle-872"></div>
  <div class="circle-873"></div>
  <div class="circle-874"></div>
  <div class="circle-875"></div>
  <div class="circle-876"></div>
  <div class="circle-877"></div>
  <div class="circle-878"></div>
  <div class="circle-879"></div>
  <div class="circle-880"></div>
  <div class="circle-881"></div>
  <div class="circle-882"></div>
  <div class="circle-883"></div>
  <div class="circle-884"></div>
  <div class="circle-885"></div>
  <div class="circle-886"></div>
  <div class="circle-887"></div>
  <div class="circle-888"></div>
  <div class="circle-889"></div>
  <div class="circle-890"></div>
  <div class="circle-891"></div>
  <div class="circle-892"></div>
  <div class="circle-893"></div>
  <div class="circle-894"></div>
  <div class="circle-895"></div>
  <div class="circle-896"></div>
  <div class="circle-897"></div>
  <div class="circle-898"></div>
  <div class="circle-899"></div>
  <div class="circle-900"></div>
  <div class="circle-901"></div>
  <div class="circle-902"></div>
  <div class="circle-903"></div>
  <div class="circle-904"></div>
  <div class="circle-905"></div>
  <div class="circle-906"></div>
  <div class="circle-907"></div>
  <div class="circle-908"></div>
  <div class="circle-909"></div>
  <div class="circle-910"></div>
  <div class="circle-911"></div>
  <div class="circle-912"></div>
  <div class="circle-913"></div>
  <div class="circle-914"></div>
  <div class="circle-915"></div>
  <div class="circle-916"></div>
  <div class="circle-917"></div>
  <div class="circle-918"></div>
  <div class="circle-919"></div>
  <div class="circle-920"></div>
  <div class="circle-921"></div>
  <div class="circle-922"></div>
  <div class="circle-923"></div>
  <div class="circle-924"></div>
  <div class="circle-925"></div>
  <div class="circle-926"></div>
  <div class="circle-927"></div>
  <div class="circle-928"></div>
  <div class="circle-929"></div>
  <div class="circle-930"></div>
  <div class="circle-931"></div>
  <div class="circle-932"></div>
  <div class="circle-933"></div>
  <div class="circle-934"></div>
  <div class="circle-935"></div>
  <div class="circle-936"></div>
  <div class="circle-937"></div>
  <div class="circle-938"></div>
  <div class="circle-939"></div>
  <div class="circle-940"></div>
  <div class="circle-941"></div>
  <div class="circle-942"></div>
  <div class="circle-943"></div>
  <div class="circle-944"></div>
  <div class="circle-945"></div>
  <div class="circle-946"></div>
  <div class="circle-947"></div>
  <div class="circle-948"></div>
  <div class="circle-949"></div>
  <div class="circle-950"></div>
  <div class="circle-951"></div>
  <div class="circle-952"></div>
  <div class="circle-953"></div>
  <div class="circle-954"></div>
  <div class="circle-955"></div>
  <div class="circle-956"></div>
  <div class="circle-957"></div>
  <div class="circle-958"></div>
  <div class="circle-959"></div>
  <div class="circle-960"></div>
  <div class="circle-961"></div>
  <div class="circle-962"></div>
  <div class="circle-963"></div>
  <div class="circle-964"></div>
  <div class="circle-965"></div>
  <div class="circle-966"></div>
  <div class="circle-967"></div>
  <div class="circle-968"></div>
  <div class="circle-969"></div>
  <div class="circle-970"></div>
  <div class="circle-971"></div>
  <div class="circle-972"></div>
  <div class="circle-973"></div>
  <div class="circle-974"></div>
  <div class="circle-975"></div>
  <div class="circle-976"></div>
  <div class="circle-977"></div>
  <div class="circle-978"></div>
  <div class="circle-979"></div>
  <div class="circle-980"></div>
  <div class="circle-981"></div>
  <div class="circle-982"></div>
  <div class="circle-983"></div>
  <div class="circle-984"></div>
  <div class="circle-985"></div>
  <div class="circle-986"></div>
  <div class="circle-987"></div>
  <div class="circle-988"></div>
  <div class="circle-989"></div>
  <div class="circle-990"></div>
  <div class="circle-991"></div>
  <div class="circle-992"></div>
  <div class="circle-993"></div>
  <div class="circle-994"></div>
  <div class="circle-995"></div>
  <div class="circle-996"></div>
  <div class="circle-997"></div>
  <div class="circle-998"></div>
  <div class="circle-999"></div>
  <div class="circle-1000"></div>
</div>

style.scss

@import "compass";
$base: #00fffc;
$width: 400px;
$height: 20px;
$num: 1000;
$smallHeight: 8px;
$smallWidth: 10px;

html,body{
  background: black; 
  height: 100%;
}


/*.container {
  position: relative;
  width: $width; 
  height: $height;
  top: calc(50% - #{$height} / 2);
  left: calc(50% - #{$width} / 2);
  background: rgba(255,255,255,.1);
}*/

[class^="circle-"] { 
  //background: silver;
  
  height: 1px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0%  50%;
  &:after{
    animation-name: rainbow;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    
    content: ' ';
    position: absolute;
    height: $smallHeight;
    width: $smallWidth;
    left: calc(100% - #{$smallWidth} / 2);
    top: -($smallHeight / 2);
    border-radius: 0 100% 0 100%;
  }
}

@for $i from 1 through $num {
  $temp: $i / 2 + 0px;

  .circle-#{$i} {  
    width: $temp;
    
    transform: rotate($i*137.5deg);
    &:after{
      animation-duration: 10s;
      animation-delay: 0.01s * $i;
    }
  }
  /*@if $i == $num {
    @if $temp > $width {
    
      .container{
        left: calc(50% - #{$temp});
      }
    }
  }*/
}

@keyframes rainbow {
  @for $i from 0 through 10 {
    #{$i* 10%}  {
      background: rgba(adjust-hue($base, $i *36deg), 0.5);
    }
  }
}