Creating SVG Code Based on Number Selected

I’m working on an app that develops an SVG based on the information provided for several different rows.``

I have figured out how to dynamically generate all of the values for the “rows” (displayed as rectangles). Now I’m trying to figure out how to dynamically generate the code for the image as a whole.

For example, let’s say the code for each rectangle is <rect fill={color} width={width} height={row-height}>

I’m trying to figure out how to generate the exact number of rows that is entered. Right now my thought is to generate the svg code for a row, then use a backend workflow to create all the rows within the full image’s code.

Is this the best approach? If so, how can I go about adding on to the code using an API workflow loop? I understand the looping part of it fairly well, but haven’t figured out adding all of the content, in the right order, to the same field.

Thanks in advance, y’all are amazing!

Huh? Just do this in a plugin.

Which part, and which plugin or type of plugin?

All of it.

What type of plugin or specific plugin would be able to do this then? I have looked pretty closely at all plugins for the design aspect and couldn’t find anything that would meet my needs. What exactly would the plugin help with?