05.svg 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1440 450">
  2. <style>
  3. @keyframes snake {
  4. 0%, 100% {transform: translate(0, 0);}
  5. 50% {transform: translate(-10%, 0);}
  6. }
  7. @keyframes rotate {
  8. 0% {transform: rotate(0deg);}
  9. 100% {transform: rotate(360deg);}
  10. }
  11. @keyframes rotate_reverse {
  12. 0% {transform: rotate(0deg);}
  13. 100% {transform: rotate(-360deg);}
  14. }
  15. @keyframes rotate_little {
  16. 0%, 100% {transform: rotate(0deg);}
  17. 50% {transform: rotate(45deg);}
  18. }
  19. .origin-center {
  20. transform-box: fill-box;
  21. transform-origin: center;
  22. }
  23. #snake {animation: snake 30s cubic-bezier(.445, .05, .55, .95) infinite;}
  24. #circle_1 {animation: rotate 180s linear infinite;}
  25. #circle_2,
  26. #circle_4 {animation: rotate 60s linear infinite;}
  27. #circle_3 {animation: rotate_reverse 60s linear infinite;}
  28. #circle_5 {animation: rotate_little 30s cubic-bezier(.445, .05, .55, .95) infinite;}
  29. </style>
  30. <defs>
  31. <g id="animations">
  32. <animateTransform xlink:href="#line_circles_1" attributeName="transform" attributeType="XML" type="translate" dur="5s" values="0 0;0 10;0 0" repeatCount="indefinite"/>
  33. <animateTransform xlink:href="#line_circles_2" attributeName="transform" attributeType="XML" type="translate" dur="5s" begin=".2s" values="0 0;0 10;0 0" repeatCount="indefinite"/>
  34. <animateTransform xlink:href="#line_circles_3" attributeName="transform" attributeType="XML" type="translate" dur="5s" begin=".4s" values="0 0;0 10;0 0" repeatCount="indefinite"/>
  35. <animateTransform xlink:href="#line_circles_4" attributeName="transform" attributeType="XML" type="translate" dur="5s" begin=".6s" values="0 0;0 10;0 0" repeatCount="indefinite"/>
  36. <animateTransform xlink:href="#line_circles_5" attributeName="transform" attributeType="XML" type="translate" dur="5s" begin=".8s" values="0 0;0 10;0 0" repeatCount="indefinite"/>
  37. <animateTransform xlink:href="#line_circles_6" attributeName="transform" attributeType="XML" type="translate" dur="5s" begin="1s" values="0 0;0 10;0 0" repeatCount="indefinite"/>
  38. <animateTransform xlink:href="#line_circles_7" attributeName="transform" attributeType="XML" type="translate" dur="5s" begin="1.2s" values="0 0;0 10;0 0" repeatCount="indefinite"/>
  39. <animateTransform xlink:href="#line_circles_8" attributeName="transform" attributeType="XML" type="translate" dur="5s" begin="1.4s" values="0 0;0 10;0 0" repeatCount="indefinite"/>
  40. <animateTransform xlink:href="#line_circles_9" attributeName="transform" attributeType="XML" type="translate" dur="5s" begin="1.6s" values="0 0;0 10;0 0" repeatCount="indefinite"/>
  41. </g>
  42. </defs>
  43. <path id="snake" d="M717,108.15c92.73,0,92.73,241.37,185.47,241.37s92.73-241.37,185.46-241.37,92.73,241.37,185.47,241.37,92.73-241.37,185.47-241.37,92.74,241.37,185.49,241.37,92.74-241.37,185.48-241.37" fill="none" stroke="#F6F6F6" stroke-linecap="round" stroke-miterlimit="10" stroke-width="68"/>
  44. <circle id="circle_1" class="origin-center" cx="282.66" cy="219.53" r="170.18" fill="none" stroke="#F6F6F6" stroke-linecap="round" stroke-miterlimit="10" stroke-width="11" stroke-dasharray="5 36"/>
  45. <circle id="circle_2" class="origin-center" cx="1254.38" cy="223" r="73.01" fill="none" stroke="#383E45" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" stroke-dasharray="5 14"/>
  46. <circle id="circle_3" class="origin-center" cx="1254.38" cy="223" r="54.06" fill="none" stroke="#383E45" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" stroke-dasharray="5 14"/>
  47. <circle id="circle_4" class="origin-center" cx="1254.38" cy="223" r="33.99" fill="none" stroke="#383E45" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" stroke-dasharray="5 14"/>
  48. <g id="line_circles_1">
  49. <circle cx="1144.47" cy="406.36" r="3.37" fill="#7C6576"/>
  50. <circle cx="1144.47" cy="383.2" r="3.37" fill="#7C6576"/>
  51. <circle cx="1144.47" cy="360.04" r="3.37" fill="#7C6576"/>
  52. <circle cx="1144.47" cy="336.89" r="3.37" fill="#7C6576"/>
  53. </g>
  54. <g id="line_circles_2">
  55. <circle cx="1171.95" cy="406.36" r="3.37" fill="#7C6576"/>
  56. <circle cx="1171.95" cy="383.2" r="3.37" fill="#7C6576"/>
  57. <circle cx="1171.95" cy="360.04" r="3.37" fill="#7C6576"/>
  58. <circle cx="1171.95" cy="336.89" r="3.37" fill="#7C6576"/>
  59. </g>
  60. <g id="line_circles_3">
  61. <circle cx="1199.43" cy="406.36" r="3.37" fill="#7C6576"/>
  62. <circle cx="1199.43" cy="383.2" r="3.37" fill="#7C6576"/>
  63. <circle cx="1199.43" cy="360.04" r="3.37" fill="#7C6576"/>
  64. <circle cx="1199.43" cy="336.89" r="3.37" fill="#7C6576"/>
  65. </g>
  66. <g id="line_circles_4">
  67. <circle cx="1226.9" cy="406.36" r="3.37" fill="#7C6576"/>
  68. <circle cx="1226.9" cy="383.2" r="3.37" fill="#7C6576"/>
  69. <circle cx="1226.9" cy="360.04" r="3.37" fill="#7C6576"/>
  70. <circle cx="1226.9" cy="336.89" r="3.37" fill="#7C6576"/>
  71. </g>
  72. <g id="line_circles_5">
  73. <circle cx="1254.38" cy="406.36" r="3.37" fill="#7C6576"/>
  74. <circle cx="1254.38" cy="383.2" r="3.37" fill="#7C6576"/>
  75. <circle cx="1254.38" cy="360.04" r="3.37" fill="#7C6576"/>
  76. <circle cx="1254.38" cy="336.89" r="3.37" fill="#7C6576"/>
  77. </g>
  78. <g id="line_circles_6">
  79. <circle cx="1281.86" cy="406.36" r="3.37" fill="#7C6576"/>
  80. <circle cx="1281.86" cy="383.2" r="3.37" fill="#7C6576"/>
  81. <circle cx="1281.86" cy="360.04" r="3.37" fill="#7C6576"/>
  82. <circle cx="1281.86" cy="336.89" r="3.37" fill="#7C6576"/>
  83. </g>
  84. <g id="line_circles_7">
  85. <circle cx="1309.34" cy="406.36" r="3.37" fill="#7C6576"/>
  86. <circle cx="1309.34" cy="383.2" r="3.37" fill="#7C6576"/>
  87. <circle cx="1309.34" cy="360.04" r="3.37" fill="#7C6576"/>
  88. <circle cx="1309.34" cy="336.89" r="3.37" fill="#7C6576"/>
  89. </g>
  90. <g id="line_circles_8">
  91. <circle cx="1336.82" cy="406.36" r="3.37" fill="#7C6576"/>
  92. <circle cx="1336.82" cy="383.2" r="3.37" fill="#7C6576"/>
  93. <circle cx="1336.82" cy="360.04" r="3.37" fill="#7C6576"/>
  94. <circle cx="1336.82" cy="336.89" r="3.37" fill="#7C6576"/>
  95. </g>
  96. <g id="line_circles_9">
  97. <circle cx="1364.29" cy="406.36" r="3.37" fill="#7C6576"/>
  98. <circle cx="1364.29" cy="383.2" r="3.37" fill="#7C6576"/>
  99. <circle cx="1364.29" cy="360.04" r="3.37" fill="#7C6576"/>
  100. <circle cx="1364.29" cy="336.89" r="3.37" fill="#7C6576"/>
  101. </g>
  102. <circle id="circle_5" cx="188.47" cy="158.41" r="55.42" fill="#3AADAA" opacity=".5"/>
  103. <circle cx="133.05" cy="102.99" r="74.45" fill="#3AADAA"/>
  104. <g>
  105. <circle cx="141.71" cy="109.65" r="4.53" fill="#F6F6F6"/>
  106. <circle cx="160.78" cy="109.65" r="4.53" fill="#F6F6F6"/>
  107. <circle cx="179.85" cy="109.65" r="4.53" fill="#F6F6F6"/>
  108. <circle cx="198.92" cy="109.65" r="4.53" fill="#F6F6F6"/>
  109. <circle cx="141.71" cy="128.72" r="4.53" fill="#F6F6F6"/>
  110. <circle cx="160.78" cy="128.72" r="4.53" fill="#F6F6F6"/>
  111. <circle cx="179.85" cy="128.72" r="4.53" fill="#F6F6F6"/>
  112. <circle cx="198.92" cy="128.72" r="4.53" fill="#F6F6F6"/>
  113. <circle cx="141.71" cy="147.79" r="4.53" fill="#F6F6F6"/>
  114. <circle cx="160.78" cy="147.79" r="4.53" fill="#F6F6F6"/>
  115. <circle cx="179.85" cy="147.79" r="4.53" fill="#F6F6F6"/>
  116. <circle cx="198.92" cy="147.79" r="4.53" fill="#F6F6F6"/>
  117. <circle cx="141.71" cy="166.86" r="4.53" fill="#F6F6F6"/>
  118. <circle cx="160.78" cy="166.86" r="4.53" fill="#F6F6F6"/>
  119. <circle cx="179.85" cy="166.86" r="4.53" fill="#F6F6F6"/>
  120. <circle cx="198.92" cy="166.86" r="4.53" fill="#F6F6F6"/>
  121. <circle cx="141.71" cy="185.93" r="4.53" fill="#F6F6F6"/>
  122. <circle cx="160.78" cy="185.93" r="4.53" fill="#F6F6F6"/>
  123. <circle cx="179.85" cy="185.93" r="4.53" fill="#F6F6F6"/>
  124. <circle cx="198.92" cy="185.93" r="4.53" fill="#F6F6F6"/>
  125. <circle cx="141.71" cy="205" r="4.53" fill="#F6F6F6"/>
  126. <circle cx="160.78" cy="205" r="4.53" fill="#F6F6F6"/>
  127. <circle cx="179.85" cy="205" r="4.53" fill="#F6F6F6"/>
  128. <circle cx="198.92" cy="205" r="4.53" fill="#F6F6F6"/>
  129. <circle cx="141.71" cy="224.07" r="4.53" fill="#F6F6F6"/>
  130. <circle cx="160.78" cy="224.07" r="4.53" fill="#F6F6F6"/>
  131. <circle cx="179.85" cy="224.07" r="4.53" fill="#F6F6F6"/>
  132. <circle cx="198.92" cy="224.07" r="4.53" fill="#F6F6F6"/>
  133. <circle cx="141.71" cy="243.14" r="4.53" fill="#F6F6F6"/>
  134. <circle cx="160.78" cy="243.14" r="4.53" fill="#F6F6F6"/>
  135. <circle cx="179.85" cy="243.14" r="4.53" fill="#F6F6F6"/>
  136. <circle cx="198.92" cy="243.14" r="4.53" fill="#F6F6F6"/>
  137. </g>
  138. </svg>