Randomizing Puzzle Tiles

I have implemented a puzzle using snap.svg library everything works but however my algorithm which allows me to shuffle the Puzzle Tiles is a little faulty, during the generation of the puzzle , I want the Tiles to disperse everywhere without sticking together like on this image :

my code javascript :

 public shuffle(groups: any, itemHeight: number) {
        const vw = $(window).width() as number;
        const vh = $(window).height() as number;
        const left = 192 + itemHeight;
        const right = vw - (itemHeight * 2);
        const runner = $('.controls-center') as any;
        const runnerOffset = runner.offset() as IOffset;
        const top = runnerOffset.top + runner.height() as number;
        const bottom = vh - (itemHeight);
        _.each(groups, (tile: any) => {
            let x = this.getRandomInt(left, right);
            let y = this.getRandomInt(top, bottom);
            // console.log(x, y);
            if (this.game.shape.type === ShapeType.Jigsaw) {
                const child = tile.select('g').node;
                const offset = $(child).offset() as Offset;
                x -= offset.left;
                y -= offset.top;
            }
            tile.transform('T' + x + ' ' + y);
        });
    }

i want just see tiles where there are Red Square , i mean tiles with a lot of space between them