How to implement image change depending on the data entered into the form?

Question

css

Suppose there is a form on the site in which a number from 1 to 10 is entered. And there is an image - a quadrangle. Depending on the entered number, one of the faces changes its length. How can this be implemented?
PS Maybe you can somehow generate an image on the server?

Answer 1

You don't need a server, it's best to use JS + SVG. In SVG, we draw the initial quad (you just need to specify the coordinates of the corners of the quad), and JS changes these coordinates depending on the value entered in the field. For a rectangle, I can throw a simple script right here, literally 6 lines in jQuery, a quadrilateral is a little more complicated.