<svg viewBox="0 0 100 100" width="50" height="50">
    <g transform="translate(50 50)">
        <circle fill="currentColor" r="50" />
        <!-- translate the path describing the greater than sign (>) to the right -->
        <path transform="translate(20 0)" id="bracket" fill="none" stroke="hsl(0, 0%, 100%)" stroke-width="6"
            stroke-linecap="round" stroke-linejoin="round" d="M -12 -12 l 12 12 -12 12" />
        <!-- mirror the greater than sign (>) by scaling the path element with a negative x value
        the transform occurs around the origin provided by the wrapping group element (50, 50)
        -->
        <use href="#bracket" transform="scale(-1 1)" />
    </g>
</svg>

<!-- describe an input of type range where the maximum value matches the default translation of the path element -->
<input type="range" min="0" max="20" step="1" value="20" />

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
}
svg {
    display: block;
    width: 75px;
    height: 75px;
    color: hsl(270, 50%, 40%);
    margin: 1.5rem 0;
}

// target the input of type range and following the input event update the translation of the path element, to match the input's value
const input = document.querySelector('input[type="range"]');

function handleInput() {
  const { value } = this;
  const bracket = document.querySelector('#bracket');
  bracket.setAttribute('transform', `translate(${value} 0)`);
}

input.addEventListener('input', handleInput);