SVG Maker Tools


Makers are creators. #SVGMakers are creators of SVG images.

Basic SVG images using standard shapes is easy. Circles, ellipses, and rectangles only require understanding the basic properties of the shape.

Some shapes are more difficult and require more advanced mathematics, such as stars, spirals, polyskelions, etc. To make it easier, code (javascript) is used to generate the SVG code for these shapes.

Below are some code generating tools, using SVG and javascript. Move the sliders, click the check boxes, and look at other options by clicking on the menu icon, then click the link to get the code for the SVG design.

Copy the code, paste it into a text editor, save the file with a .svg extension, and open it in a browser. Boom!

The Star Maker makes star shapes. Set the number of points for the star and the depth between points. Add highlighting or shading by checking the box. Make a star with lines between its different points. Click on the menu icon to color the star and adjust the amount of highlighting or shading.

Click here to open the Star Maker tool

The Spiral Maker makes spiral shapes. Choose Archimedian or Fibonacci spirals and set the number of segments (90 degrees per segment). Set the number of times to repeat the spiral, which rotates copies to make interesting designs. Check the Overlay box to flip the spiral and overlay it on top of the spiral design. Click the menu to set the color and optionally rotate the design.

Click here to create some Archimedean and Fibonacci spirals

The Polyskelion Maker makes linked spirals that form polygon shapes. Set the number of spirals and the number of turns in each spiral. Check boxes set spiral direction, highlighting, and shading, as well as a box to watch it draw the polyskelion. Click on the menu icon to color the polyskelion.

Click here to open the Polyskelion Maker tool

The Wave Maker makes wavey lines that that can be rotated, arranged horizontally, or vertically. Sliders allow easy adjustment of the number of cycles to the wave, the wave height, and the number of waves to display. Checkboxes allow highlighting the waves by stroking them black and/or adding black waves between the colored waves for different effects.

Click here to open the Wave Maker tool

The Pattern Maker makes patterns using images. Set the number of images per row. Adjust the aspect ratio of the image. Check boxes to help visualize the aspect ratio, to create a seamless pattern, and to offset the images. Click on the menu icon to select a container size for print or screen, set a background color, and set the image opacity.

The menu also allows selecting an image. From the menu, click on the image to search images. Click on "Search" to enter a search term, then click on the arrows to page through the images. Click on the desired image to select it for the pattern.

Click here to open the Pattern Maker tool

Learn how to add javascript to SVG images by doing the projects that follow.

SVG Maker Projects


Everyone likes instant gratification, immediately seeing the results of their efforts. Learning to code via tutorials is a great way to learn, but not as much fun as actually making something. This website provides simple projects that make something. It is for beginners and more advanced learners. Beginners may need to supplement the instruction here with beginning tutorials to fill in the gaps of things they don't understand. That's ok, that's the way it is done.

Programmers learn from hacking, fixing, improving other programmers code. The projects have complete code listings that can be copied and pasted, hacked, fixed, and improved. It is a great way to learn and provides instant gratification. There are numerous tutorials available to help learn and explain things that are not clear. This site does not attempt to improve on those tutorials, but rather provide projects that let the learner learn by hacking, fixing, improving the code. The code of these projects is meant to be simple and understandable.

SVG Maker Projects show how to code an SVG image and how code can change the SVG image. It is fun, practical, and relevant. Learning to code can be very confusing and time consuming just to decide where to start. Will you spend more time learning a programming environment that you won't ever use again? That is not the case here. Here you will learn standard web technology that works in any browser, nothing to install, and the cost is FREE, $0, Nothing.

SVG (Scalable Vector Graphics) is a web standard. Like HTML, it is a markup language - "SVG is HTML for Graphics". Don't be afraid of a markup language. Once you understand the basic syntax, it is quite easy. Just get started and your experiences will teach you as you go.

SVG is a great STEM and STEAM teaching tool. It is relevant to any career in graphic arts or web development. There are plenty of jobs for people skilled in these areas. It is fun to create art and be creative. It is a practical application of math skills. It teaches coding using Javascript. It has it all and is worth trying these projects to see for yourself.

The SVG Maker Projects below will build on each other, so start at the beginning if you are a beginner. Click on the title of a project and become an #SVGmaker.

This project will be an introduction to the more detailed and free eBook: STEAM <CODED> Tangrams.

In the meantime, please refer to the eBook. Available for free on the Apple iBookstore.

This project will be an introduction to the more detailed and free eBook: STEAM Coded String Art.

In the meantime, please refer to the eBook. Available for free on the Apple iBookstore.

This free reference is a good introduction to SVG teaching the basics of SVG interactively and showing the SVG syntax.

Available for free on the Apple iBookstore.

Also available as a free download from Catto Creations website

More free eBooks available from that site as well, most illustrated in SVG. Some illustrations will be come future SVG Maker Projects.

SVG Maker Projects - coding SVG images - at