I am trying to put a word search game on my web page. I see here is a beautiful example:

you will notice it shows some updates.

You can use same SVG methodology. Or Another way is to use an absolute positioned div and update top, left css values based on mousedown, width based on mousemove event.

CodePudding user response：

I have seen "what" they have done.

They have created an svg element. This svg sits exactly above and covers the entire table that contains the grid with letters. When the user clicks any letter and starts drag, they add a rectangle to the svg. Depending on how the cursor will move they do the angle transform to the rectangle. If the word is selected correctly, the rectangle survives; else, it is removed.

I need to find out now, "how" part of it.

Thanks to all for a very quick response.