трансформация svg объектов с помощью скрола мыши

[docshark]

Добрый день!
Очень нужна помощь в данной проблемке - "Нужно трансформировать svg объект из круга в прямоугольник с помощью скролла мыши"
вот таким образом - http://prntscr.com/3b2wdz
И при этом эти объекты должны появляться бесконечное количество раз

Может кто-то сталкивался с подобной задачей? или подкинете идею как это можно реализовать?
а еще лучше примерчик если видели в сети?

Всем заранее спасибо за помощь!!!

[nerv_]

<svg style="width: 200px; height: 200px;">
    <rect id="rect" width="100" height="100" fill="lightsalmon"></rect>
</svg>

<script>
    var factor = 50;

    var id = setInterval(function() {
        rect.setAttribute('rx', factor);
        rect.setAttribute('ry', factor);
        factor--;
        if (!factor) clearInterval(id);
    }, 100);
</script>

[nerv_]

<h3>Scroll down / up</h3>

<svg style="width: 200px; height: 200px; background-color: lavenderblush;">
    <rect id="rect" width="100" height="100" fill="lightsalmon"></rect>
</svg>

<script>
    var app = {
        _rect: rect,
        _factor: 0,
        get factor() {
            return this._factor;
        },
        set factor(v) {
            this._factor = v;
            this._factor = Math.max(0, this._factor);
            this._factor = Math.min(50, this._factor);
        },
        refresh: function() {
            this._rect.setAttribute('rx', this.factor);
            this._rect.setAttribute('ry', this.factor);
        }
    };

    document.onwheel = function(event) {
        app.factor += Math.sign(event.deltaY);
        app.refresh();
        return false;
    };

    // ----------------

    Math.sign = function(v) {
        return v/Math.abs(v);
    };
</script>

[docshark]

nerv_, Спасибо огромное за подсказки!
Буду пробовать что из выше написанного помогло - отпишусь обязательно!!