Dynamic border radius experiment

Hi Sam,

Thank you for sharing your experimental code. I’m not quite at that level yet, but I can appreciate the effort you've put into it. I’ll see if I can find any use cases for it.

I’ve also been experimenting with dynamically adding border-radius and came up with something similar. However, instead of relying on data-acc-text, I added a text inside a shape where the first line of text at the top reads "br-50". I then used that text as a class name to target elements containing it. Additionally, I experimented with manipulating SVG and path elements to simplify the code while achieving the desired effect. Since modifying paths can be tricky, I opted to hide the paths and apply the styling directly to the SVG elements instead. Does this approach make sense?

Example:

var shapes = document.querySelectorAll('[data-model-id]');  

shapes.forEach(function(shape) {
    var text = shape.querySelector('text');
    var svg = shape.querySelector('svg');
    var path = shape.querySelector('path');
    
    if (text && text.textContent === "br-50") {
        text.classList.add(text.textContent); 
        svg.classList.add(text.textContent);
        path.classList.add('hidden');
        
        svg.style.pointerEvents = 'all';
    }
});

var shapesWithClass = document.getElementsByClassName('.br-50');
console.log(shapesWithClass);

and CSS

var sliderValue = getVar('Slider2') + "%";

var style = document.createElement('style');

style.textContent = `
  .br-50 {
    border-radius: ${sliderValue};
    background-color: purple; 
    border: 5px solid black;
    fill: transparent;
  }
`;

document.head.appendChild(style);