Unity UI horizontal fill with different shape

I have mouse drag game and the is different shapes. user must fill these like the shapes but I set to filled at image but I can't get true result. How can I make fill settings to shapes?


you can take a look the images

 

I can suggest 2 methods, but I'm sure there are others.

First method is to use 2 line renderers: one for the background and one for the filling. To "fill" the image, just give the "fill" line more points so it reaches farther towards the end.

The second method is to use a special shader and mask graphic. The mask graphic should have full alpha (alpha 1) on one end, and should fade in the direction you want the image to fill until you have full transparency (alpha 0) at the other end. Use a custom shader to set an alpha cutoff so that you only fill the image up to the alpha value representing how full you want the image. (half full = 0.5 alpha)

 

I found and asset called Data Renderer 2D. Now only left controlling with drag. How will I do it really I don't know. Because, this is not horizontal as you see. Slider does not work on it. Slider is horizontal only