JSFiddle - React, Tailwind, and code Playground

HTML

<code>
  
</code>

CSS

code {
  white-space: pre;
}

JavaScript

function plotStr(coord) {
  const str = ''
  //plot everything as X except idx as O
  const lines = []
  for(let i = 0; i < 5; ++i) {
    line = Array(9).fill(' ')
    for(let j = 0; j < 5-i; ++j) {
      if (coord.i === i && coord.j === j) {
        line[i+j*2] = 'W'
      } else {
        line[i+j*2] = 'X'
      }
    }
    lines.push(line)
  }
  return lines.map(line => line.join('')).reverse().join('\n')
}
function u(k) {
  return 6*k - k*(k+1)/2  
}
function getCoord(x) {
  const k = Math.floor(-Math.sqrt(121/4 - 2*x) + 11/2)
  return {
    i: k,
    j: x-u(k)
  }
}
const code = document.querySelector('code')
for(let i = 0; i< 15; ++i){
  code.innerHTML += plotStr(getCoord(i))+'\n'
}