ok

assets/main.css

@@ -45,14 +45,21 @@ body{
    flex-grow: 3;
 }
 .hole{
-    height: 10vh;
-    width: 12vw;
-    background-color: maroon;
-    display: flex;
-    flex-direction: column-reverse;
-    align-self: center;
+    height: 100px;
+    width: 200px;
+    background-color: darkgreen;
+   background: url("/assets/images/hole.png") no-repeat  0 100px ;
+    animation-name: testmove;
+    animation-duration: 1s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+}
+@keyframes testmove {
+    from{
+        background-position: 0 100px;
+    }
+    to{
+        background-position: 0 0;
+    }
+
 }
-.hole-line{
-    height: 1vh;
-    background-color: gray;
-}

js/index.js

@@ -1,20 +1,10 @@
-const holeHeight = 12;
-const holeWidth = 10;
-const holeLineShift = 0.2;
 const startButton = document.querySelector('.btn-start');
 startButton.addEventListener('click', (e) =>{
     let holeObject = document.querySelector('.hole');
     fillHole(holeObject);
 })
 function fillHole(holeObject) {
-    let lineWidth = holeWidth;
-    for (let i = holeHeight; i > 0; i--) {
-        const line = document.createElement('span');
-        line.setAttribute('class', 'hole-line');
-        line.setAttribute('style', `width: ${lineWidth}vw`);
-        lineWidth -= holeLineShift;
-        holeObject.appendChild(line);
-    }
+
 }
 
 function test() {

remembers.txt

@@ -0,0 +1,2 @@
+create new branch from current.
+git checkout -b name-new-branch