# Code Generate an SVG File (Scalable Vector Graphics, Mac)

In this article, I will show you how to code generate an SVG (Scalable Vector Graphics) file. The example will use Brownian motion to simulate the random path of a particle in a fluid using NodeJS.

In this article, I will show you how to code generate an SVG (Scalable Vector Graphics) file. The example will use Brownian motion to simulate the random path of a particle in a fluid using NodeJS.

These instructions were written on a Mac.

## Step 1. Define what to generate

For this article, I will show you how to generate a path for a particle using Brownian motion.

First, a path string will be code-generated that looks something like this (trimmed for brevity):

``"M517 283 561 291 579 269 ..."``

Then it will be embedded into an SVG path tag like this:

``<path fill="none" stroke="#000000" stroke-width="2" d="M517 283 561 291 579 269 ..." />``

Think of the path string (d) as instructions for an x/y plotter.  An M, followed by two numbers is the "Move To" command.  It usually implies that the plotter should first lift up the pen (pen up) and then move to the new x/y location.

If the next two tokens in the string are numbers, that implies a "Line To" command. That command would tell the plotter to put the pen down, then draw a line to the new x/y location.

So using the example above, the instructions would be:

``````Move To 517, 283
Line To 561, 291
Line To 579, 269``````

But instead of drawing a line with a plotter, the line is drawn on the screen.

### Brownian Motion

To simulate Brownian motion an initial point on the screen will be set with a Move To command.  Then every subsequent Line To would be calculated based on the previous coordinate, applying a random angle and distance to travel to.

## Step 2. Set up your project

To set up your project, open up a terminal window and do the following:

``````mkdir brownian-svg
cd brownian-svg
npm init -y
echo .DS_Store >> .gitignore
touch index.js``````

## Step 3. Paste the code into the editor

• Open index.js in your favorite code editor
• Paste in this code and save it:

The code does the following:

### Defines a function

• Declares a generate function that takes one argument (limit)

### Declares variables within the function

• Declares width and height for the SVG file
• Declares a margin for the drawing to stay within
• Declares maxMove - the maximum distance the simulated particle should move along its path with each step
• Declares the initial x and y coordinates
• Declares the decimal precision for rounding the x and y values
• Declares the initial path string to be: "M" - which means "move to" - where to start the path
• Declares a background color for the image

### Generates the path

• Using the limit argument passed to the function, creates a loop to run up to the limit
• Calculates a random distance value up to maxMove - to simulate particle movement along a path
• Calculates a random angle to simulate the particle direction
• Uses the distance and angle to calculate a new target coordinate (tx and ty) for the particle path to move to
• If tx and ty are within the margins of the drawing area, the code assigns the values to x and y, applies the decimal precision, and appends them to the path

### Generates the SVG markup

• Declares a variable (fd) to hold the SVG markup
• Inits fd with the opening svg tag, using the width and height values to define the viewBox and the size of the image
• Appends to fd a rect tag set to the size of the image to use as a background – otherwise the SVG file background will be transparent - not necessarily a bad thing
• Appends to the fd a path tag, using the path string for the d (data) property
• Then finally appends to fd the closing svg tag

### Writes the file

• Defines the filename
• Creates a write stream (stream) using the filename
• Writes the generated markup (fd) to the stream (file)
• Ends the stream
• Echos to the console the name of the newly generated file

### Calls the function

• Calls the generate function passing in a limit value as an argument

## Step 4. Generate an SVG file

• To generate the SVG file, do the following:
``node index.js``
• Verify that the new file was generated:
``ls -ls *.svg``

## Step 5. View the file

Most drawing programs and browsers can open a *.svg file.

• Open the *.svg file in a drawing program or browser
``open brownian.svg``

If that doesn't work, try opening the file in a browser.

Note that some drawing programs don't watch for changes to a file.  So if you generate a new file, you may need to close it and reopen it again to see the changes.

## Conclusion

In this article, you learned how to code generate an SVG file.

Below is a link to an example.  There is also a link to an alternative way of creating an SVG that uses one of my free open-source drawing packages.