How can I fit a randomly generated number to a custom "bell curve" distribution?

I designed the values to fit to an off-center bell-curve. Trial runs seem to give desirable results, but is there anything I am missing?

What I have discovered

I found a question that thought would help, but they are using standard deviation.

JavaScript Math.random Normal distribution (Gaussian bell curve)?

From the question above:

• Q: Is Math.random already normally-distributed?
• A: No

What I have

const ranks = [
  ['X'   , 0.01, 0.01],
  ['SSS' , 0.03, 0.04],
  ['SS'  , 0.06, 0.10],
  ['S'   , 0.08, 0.18],
  ['A'   , 0.11, 0.29],
  ['B'   , 0.14, 0.43],
  ['C'   , 0.21, 0.64],
  ['D'   , 0.17, 0.81],
  ['E'   , 0.12, 0.93],
  ['F'   , 0.07, 1.00]
];

log('Total:', ranks.reduce((a, b) => a + b[1], 0).toFixed(2));
for (let i = 0; i < 10; i++) {
  generate();
}

/* Public */
function generate() {
  let percent = Math.random();
  log(percent.toFixed(4), getRank(percent));
}

/* Protected */
function getRank(percent) {
  return ranks.filter((rank, index) => {
    let min = index > 0 ? ranks[index - 1][2] : -1;
    return percent > min && percent <= rank[2];
  })[0][0];
}

/* Private */
function log() {
  let el = document.createElement('DIV');
  el.innerHTML = [].slice.call(arguments).join(' ');
  el.className = 'log-line';
  document.body.appendChild(el);
}

body {
  background: #666;
}

.log-line {
  font-family: monospace;
  background: #AAA;
  margin: 0.5em 0.25em;
  padding: 0.25em;
}

.log-line::before {
  content: '>>> ';
}