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.
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 LICENSE touch README.md 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:
- 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
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.
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.
You can find an example based on this article here:
Using my drawing kit
In this article, I showed you how to code generate an SVG file without using any special packages. But I also have a few drawing packages that you could have used.
For an alternative way of creating Brownian motion using my drawing kit, see this demo repo: