Define an array of SVG path commands const commands M L H V C S Q T A Z Define a function to generate a random number within a given range function getRandomNumber min max return Math floor Math random max min 1 min Define a function to generate a random SVG path function generateRandomPath let path Generate a random number of commands between 5 and 20 const numCommands getRandomNumber 5 20 Add each command to the path string for let i 0 i numCommands i Select a random command from the commands array const command commands getRandomNumber 0 commands length 1 Generate random coordinates for the command const x1 getRandomNumber 0 500 const y1 getRandomNumber 0 500 const x2 getRandomNumber 0 500 const y2 getRandomNumber 0 500 const x3 getRandomNumber 0 500 const y3 getRandomNumber 0 500 Add the command and coordinates to the path string path command x1 y1 x2 y2 x3 y3 Return the completed path string return path Generate and log a random SVG path console log generateRandomPath document createElement style border 1px solid blue style script Create an SVG element const svg document createElementNS http www w3 org 2000 svg svg Set the width and height attributes of the SVG element svg setAttribute width 500 svg setAttribute height 500 Create an SVG path element const path document createElementNS http www w3 org 2000 svg path Set the d attribute of the path element to a random SVG path const commands M L H V C S Q T A Z const commands M C let pathString M 0 0 for let i 0 i 10 i const command commands Math floor Math random commands length const x1 Math floor Math random 500 const y1 Math floor Math random 500 const x2 Math floor Math random 500 const y2 Math floor Math random 500 const x3 Math floor Math random 500 const y3 Math floor Math random 500 pathString command x1 y1 x2 y2 x3 y3 pathString M100 200 C 100 110 180 30 270 30 C 360 30 440 110 440 200 C 440 290 360 370 270 370 C 180 370 100 290 100 200 path setAttribute d pathString Set the stroke color and width of the path element path setAttribute stroke blue path setAttribute stroke width 5 Append the path element to the SVG element svg appendChild path Append the SVG element to the document body document body appendChild svg console log finished script
svg Set the width and height attributes of the SVG element svg setAttribute width 500 svg setAttribute height 500 Create an SVG path element const path document createElementNS http www w3 org 2000 svg path Set the d attribute of the path element to a random SVG path const commands M L H V C S Q T A Z const commands M C let pathString M 0 0 for let i 0 i 10 i const command commands Math floor Math random commands length const x1 Math floor Math random 500 const y1 Math floor Math random 500 const x2 Math floor Math random 500 const y2 Math floor Math random 500 const x3 Math floor Math random 500 const y3 Math floor Math random 500 pathString command x1 y1 x2 y2 x3 y3 pathString M100 200 C 100 110 180 30 270 30 C 360 30 440 110 440 200 C 440 290 360 370 270 370 C 180 370 100 290 100 200 path setAttribute d pathString Set the stroke color and width of the path element path setAttribute stroke blue path setAttribute stroke width 5 Append the path element to the SVG element svg appendChild path Append the SVG element to the document body document body appendChild svg console log finished script