Design a board using HTML and CSS

Hi there,

First of all, Thank you freecodecamp for providing such great platform to learn.

I have a question. How can I design a board similar to image below using HTML & CSS

The lines in the board suppose to be static. However circles can be dynamic, means It can move to any position where two or more lines intersect using some JavaScript.

Should I use canvas or SVG or something else ? Any thoughts / suggestions?

The simplest solution I can think of is an SVG. You can use it for both the lines and the circles, and re-position the circles with JavaScript when they move.

1 Like