JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bg-img">
    <div id="marker">Test</div>
</div>

CSS

#marker{
    position:relative;
    top:150px;
    left:100px;
    display:block;
    width:25px;
    height:25px;
    background-color:#000;
}

JavaScript

(function () {
    var INITIAL_X = 100,
        INITIAL_Y = 150;
    
    // f(v) -> {"x" : x, "y" : y}
    var calculatePosition = function (value) {
        var result = {};

        result.x = INITIAL_X -  value / 9;
        result.y = INITIAL_Y + 0.117  * value/ 9 ;


        return result;
    }

    var map = {
        marker : null,
        value : 0,

        setPosition : function (x, y) {
             marker.style.left = x + "px";
             marker.style.top  = y + "px";
        },

        init : function () {
            marker = document.getElementById("marker");
            map.setPosition(INITIAL_X, INITIAL_Y);
        },

        increment : function () {
            map.value++;
            var result = calculatePosition(map.value);
            map.setPosition(result.x, result.y);
        },
        
        decrement : function() {
            map.value--;
            var result = calculatePosition(map.value);
            map.setPosition(result.x, result.y);
        }
    };
 
    map.init();

    for (var i  = 0; i < 100; i++) {
        map.increment();
    }
})();