I need to make a web calculator with 5 numer inputs and the result should be as in the attached images. The red & blue area should change its size based on the input values. Ususing a static background wont work, it must scale on certain input values as in the second image.
What would you use? CSS&javascript? I tried to convert the image to a carnvas without luck, I get 4megabytes of code and converting it to svg didn’t worked either I only the get the red poligon.


You can use Javascript to draw this quite easily. The link below should help you get started.
How to draw polygons on an HTML5 canvas