Goal is to Achieve vector formatted Perlin noise line art. Visual Examples of the desired effect:

Example 1

Example 2

It is possible to create a static Perlin noise effecting using only Adobe Illustrator or photoshop?

If not, could I create my desired effect with Javascript and CSS and utilize the SVG image in illustrator?

Any advice would be greatly appreciated.

  • Both Illustrator and Photoshop support Javascript, so in theory it is possible. However, if you check the mechanics behind this, you'll find that a vector based solution is unfeasible. Yes, rendering software can do this with millions of lines - and it takes them several days.
    – Jongware
    Jan 3, 2017 at 20:00
  • 2
    In my opinion, the images shown are not Perlin noise.
    – Rafael
    Jan 3, 2017 at 23:20
  • @Rafael Then what would you say it is?
    – Matt
    Jan 3, 2017 at 23:39
  • 1
    @Rafael Perhaps not as such but perturbed by perlin noise might be.
    – joojaa
    Jan 4, 2017 at 4:33
  • 1
    – Cai
    Jan 4, 2017 at 8:17

1 Answer 1


If you want to go the JS/CSS route:

One approach would be to use a technique similar to Dietrich Featherston's code found here: http://bl.ocks.org/d2fn/0d3789278f3d9816e0fd

In Featherston's code, actors are randomly placed on the canvas and then walked in the direction determined by the Perlin noise function. If each of these "walking" paths could be saved individually instead of collectively on the canvas, you could then approximate each of these paths with its own vector path using, say, the cubic bezier approach described here:


Of course, this would take a lot of memory and processing time, saving and using all the points in these walking paths individually, so you would probably have to adjust the interval at which you sample points on a path. For any given image size, you will have to find a "sweet spot" of interval sizes that balance the memory/processing required against the accuracy of the resulting vector path.

If the use of the D3 framework in Featherston's code is confusing you, here's a vanilla js implementation of (raster) perlin noise that you could probably reference as well: https://github.com/josephg/noisejs

Of course, if the only reason you want it in vector format is for higher resolution, then you could just run the above code on a really large canvas and save the result.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.