DEV Community: Jawhar Kodadi

Serpentine Plotter: A Free Web-Based SVG Generator for Beautiful Generative Art

Jawhar Kodadi — Wed, 02 Apr 2025 23:58:33 +0000

I'm excited to share a fun and versatile tool I've been working on, called Serpentine Plotter. It's a web-based SVG generator that allows you to effortlessly create intricate, serpentine line patterns perfect for pen plotting and digital art.

What is Serpentine Plotter?

Serpentine Plotter is an interactive tool built with p5.js and the Dat.GUI library, designed to generate fluid, noise-driven serpentine patterns. It provides numerous customizable parameters to help artists, designers, and hobbyists craft unique line-based art easily and intuitively.

Explore the tool here: Serpentine Plotter

Features and Customization

- Shape Selection: Generate patterns within Squares, Triangles, or Circles.

- Detailed Controls: Adjust parameters such as amplitude, noise frequency, smoothing factor, line thickness, and drawing size.

- Edit Mode: Interactively move shape control points to further customize your design.

- SVG Export: Quickly export your artwork as SVG files, ready for plotter printing or digital use.

- Randomization: Easily experiment with new designs using the randomize feature available in the advanced version.

Community Feedback and Enhancements

Since sharing Serpentine Plotter on Reddit, I've received amazing suggestions from the PlotterArt community, leading to some exciting improvements:

- 3D Capabilities: An experimental version now includes 3D noise-driven patterns with camera orbiting.

- Planned Features: G-code export for CNC and plotter machines, and occlusion handling to improve visual clarity.

Behind the Scenes

The inspiration for Serpentine Plotter came directly from my experiences designing a DIY pen plotter, blending art with technology. My journey in generative art, combined with hands-on maker experiences, has shaped tools like this to be accessible yet powerful.

Try It Out and Share Your Creations!

Whether you're an artist, developer, or hobbyist, I invite you to experiment with Serpentine Plotter, create your own patterns, and share your creations. Feedback and contributions are always welcome!

Plotter art by Lyanos777 On reddit

Plotter art by Barnplotter

Happy plotting!

Try Serpentine Plotter Now

Generative Art with Grasshopper: Moroccan Zellige Evo Series L

Jawhar Kodadi — Wed, 10 May 2023 20:34:48 +0000

Hello, my friends! In today's latest creation, part of my "Zellige EVO" collection, I am delving into the world of generative Zellige art using Grasshopper Rhino to create captivating and endlessly evolving patterns.

When it comes to generative art, I love exploring new paths and approaches. I had previously shared a Zellige pattern generator coded in P5.js on my blog. Creating generative art with JavaScript, Processing, or Python requires some knowledge of these programming languages. But fear not, it's not overly complicated! However, if you're not a fan of coding, there are several tools with visual interfaces to make the task easier. Grasshopper is one such tool.

Why did I choose Grasshopper?

As I mentioned earlier, one of the main advantages of Grasshopper is its visual interface. Unlike other programming languages such as JavaScript, Processing, or Python, Grasshopper does not require you to type lines of code. Instead, you can create algorithms visually by connecting graphical components to one another. This makes generative art creation much more accessible and, above all, much more intuitive.

Personally, I find that Grasshopper provides an incredible level of flexibility. With its numerous components and parameters, you can explore and experiment with various techniques and approaches to create generative art.

How I did it:

I started by creating a grid with vertical and horizontal lines, onto which I placed an 8-pointed star. Then, I used the 16 points of this star to warp the grid lines, thus creating parametric curves that change based on their distance from the star's points.

One of the most interesting aspects of this artwork is that I integrated several sliders in Grasshopper to adjust different parameters, such as the distance between points, the amplitude of the deformation, and the scale of the curves. This allows me to generate an infinite number of shapes and create unique variations each time.

Some examples:

As part of my "Zellige EVO" collection, this creation falls within my exploration of generative Zellige art, where I enjoy playing with shapes and parameters to create dynamic and evolving artworks.

Feel free to lose yourself in the twists and turns of the curves and appreciate the countless variations that emanate from this unique combination of constraints and freedoms. It's truly a fascinating experience, and I'm thrilled to share it with you!

Exploring Moroccan Zellige Patterns with a Generative Art Tool I Created

Jawhar Kodadi — Thu, 30 Mar 2023 02:21:01 +0000

Moroccan Zellige patterns have been captivating artists, designers, and architects for centuries. These intricate geometric designs are a symbol of the rich artistic heritage of Moroccan culture. I've always been fascinated by these patterns, and as a creative coder, I decided to build a Moroccan Zellige Pattern Generator using the p5.js library. In this article, I'll introduce you to the generator I've created, which allows users to explore the beauty of these patterns, customize them, and create their own unique designs.

Overview of the Generator:

I built the Moroccan Zellige Pattern Generator as a web-based tool that enables users to create stunning, customizable patterns using a simple graphical user interface (GUI). The tool offers various parameters to adjust, including the number of points, cell size, number of cells, shape size, rotation, and stroke width. Users can also toggle the grid display option to create a wide range of patterns.

My Inspirations:

My inspiration for creating this generator came from my love for Moroccan Zellige patterns and my passion for creative coding. I wanted to create a tool that would make it easy for users to explore these beautiful designs and have fun experimenting with different parameters to create unique patterns.

Using the Generator:

Visit the Moroccan Zellige Pattern Generator webpage.
Begin by adjusting the parameters in the GUI to create your desired pattern. Experiment with different values and settings to explore the full range of possibilities.
Toggle the grid display option to further customize your design.
Once you have created a pattern you are satisfied with, click the "Save as SVG" button to download the SVG file.
Use the exported SVG in your design projects, or share your generated patterns with others.

Screenshots :

How to make it better ?

I would appreciate feedback on the user experience and interface of the Moroccan Zellige Pattern Generator. Are the customization options intuitive and easy to use? Do you have any suggestions for additional features or improvements to the current parameters? Your insights will be valuable in refining the tool. Thank you!