JSFiddle - React, Tailwind, and code Playground

HTML

<pre id="output"></pre>

JavaScript

function drawBorders(dim) {
    var output = ""
    var n = Math.floor(dim/2);
    var sym = ["%", "@"];
    for (var r=0; r<dim; r++) {
        var row = r < n ? r : dim - r - 1;
        for (var c=0; c<dim; c++) {
            var col = c < n ? c : dim - c - 1;
            var i = col < row ? col : row;
            output += sym[i%2];
        }
        output += "\n";
    }
    return output;
}

var $out = $('#output');
for (var i=0; i<=12; i++) {
    $out.append(i + "-layer border:\n");
    $out.append(drawBorders(i) + "\n");
}