Dancing Rectangles

DancingRect.qml

import QtQuick 2.0

Rectangle {
    width: 40
    height: 40
    color: 'transparent'
    property real distance: 1    
    Rectangle {
        anchors.centerIn: parent
        property real size: 32 - parent.distance * 0.2;
        width: size
        height: size
        color: 'white'
    }
}

main.qml

import QtQuick 2.8
import QtQuick.Window 2.2

Window {
    id:mainWindow
    visible: true
    width: 640
    height: 480
    title: qsTr('Distance 2D')

    color: 'black'

    Grid {
        spacing: 5
        rows: mainWindow.width / 45
        columns: mainWindow.height / 45
        Repeater {
            id: rectangleRepeater
            model: parent.rows * parent.columns
            DancingRect {}
        }
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true

        function calcDist(x1, y1, x2, y2) {
            var a = x1 - x2;
            var b = y1 - y2;
            var d = Math.sqrt(a*a + b*b);
            return d;
        }

        // Is there a way to do this more declarative?
        onPositionChanged: {
            for (var i = 0; i < rectangleRepeater.model; ++i) {
                var child = rectangleRepeater.itemAt(i);
                var x = child.x;
                var y = child.y;
                child.distance = calcDist(mouseX, mouseY, x, y);
            }
        }
    }
}