<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.