Nice post! I did something pretty similar for one of my websites recently. Although instead of setting all the attributes in the js, I had them statically defined in my html template and bound certain values to angular variables. This allowed me to dynamically change the svg depending on user input.
The website is breadratiocalculator.com and it allows you to calculate bakers percentages and generate recipe cards (the recipe card preview is the dynamically updated svg)
I'm a selftaught (web) developer. On sunny days, you can find me hiking through the Teutoburg Forest, on rainy days coding or with a good fiction novel in hand.
Nice post! I did something pretty similar for one of my websites recently. Although instead of setting all the attributes in the js, I had them statically defined in my html template and bound certain values to angular variables. This allowed me to dynamically change the svg depending on user input.
The website is breadratiocalculator.com and it allows you to calculate bakers percentages and generate recipe cards (the recipe card preview is the dynamically updated svg)
Here's the github repo in case anyone would like to see the code
Cool idea. Like that you can even conditionally change the whole svg's appearance or dynamically bind styling