diff --git a/src/assets/balls.svg b/src/assets/balls.svg
new file mode 100644
index 0000000..b6261ea
--- /dev/null
+++ b/src/assets/balls.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-balls"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><g transform="rotate(0 50 50)">
+  <circle r="5" cx="30" cy="50">
+    <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;29.999999999999996 -17.320508075688775" keyTimes="0;1"/>
+    <animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite"  keyTimes="0;1" values="#514134;#e35839"/>
+  </circle>
+</g><g transform="rotate(120 50 50)">
+  <circle r="5" cx="30" cy="50">
+    <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;29.999999999999996 -17.320508075688775" keyTimes="0;1"/>
+    <animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite"  keyTimes="0;1" values="#e35839;#d28d4f"/>
+  </circle>
+</g><g transform="rotate(240 50 50)">
+  <circle r="5" cx="30" cy="50">
+    <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;29.999999999999996 -17.320508075688775" keyTimes="0;1"/>
+    <animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite"  keyTimes="0;1" values="#d28d4f;#514134"/>
+  </circle>
+</g></svg>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index c50353e..0e9ab17 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,45 +10,15 @@
 </head>
 <body>
   <pin-root>
-    <svg
+    <img
       style="
         position: absolute;
-        transform: translate(-2vw, 15vh);
+        transform: translate(0vw, 10vh);
         margin: 0 auto;
         top: 25vh;
-        left: 42vw;"
-      width='20vw'
-      height='20vh'
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 100 100"
-      preserveAspectRatio="xMidYMid"
-      class="uil-balls">
-      <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
-      <g transform="rotate(0 50 50)">
-        <circle r="5" cx="30" cy="50">
-          <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;19.999999999999996 -20" keyTimes="0;1"/>
-          <animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite"  keyTimes="0;1" values="#f29c98;#f5b697"/>
-        </circle>
-      </g>
-      <g transform="rotate(90 50 50)">
-        <circle r="5" cx="30" cy="50">
-          <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;19.999999999999996 -20" keyTimes="0;1"/>
-          <animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite"  keyTimes="0;1" values="#f5b697;#f5e797"/>
-        </circle>
-      </g>
-      <g transform="rotate(180 50 50)">
-        <circle r="5" cx="30" cy="50">
-          <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;19.999999999999996 -20" keyTimes="0;1"/>
-          <animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite"  keyTimes="0;1" values="#f5e797;#a2e4f5"/>
-        </circle>
-      </g>
-      <g transform="rotate(270 50 50)">
-        <circle r="5" cx="30" cy="50">
-          <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;19.999999999999996 -20" keyTimes="0;1"/>
-          <animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite"  keyTimes="0;1" values="#a2e4f5;#f29c98"/>
-        </circle>
-      </g>
-    </svg>
+        left: 42vw;
+        height: 30%;"
+      src='assets/balls.svg'>
   </pin-root>
 </body>
 <script type="text/javascript">
