SVG Maker Tools

#SVGmaker

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

SVG Maker Projects

#SVGmaker

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.

How to Make this
Day Calendar

Introduction to SVG and CSS with 11 lines of code, then adds Javascript to create a fully functional day calendar that can be used in any web page or with any other SVG image.

Project uses SVG rect, line, and text elements, CSS fill, stroke, stroke-width, font-size, font-family, and text-anchor properties, and Javascript events, functions, and introduces Document Object Model (DOM) function calls.

How to Make this
Clock

This project builds on the Day Calendar project by using the Javascript Date() object again to create a fully functional clock that keeps time.

Project uses SVG circle, g, use, path, and text elements, shows how the transform attribute is used to rotate objects, shows how to use CSS styles with class attributes, then adds Javascript reinforcing events, functions, and the Document Object Model (DOM) function calls.

How to Make this
Colorful Orb

This is a very simple project in that it requires very little code.

Project uses SVG circle, g, and use elements, shows how the transform attribute is used to rotate objects, and shows how to use CSS styles with class attributes.

This project does not use any Javascript. Instead, the project uses Synchronous Multimedia Integration Language (SMIL) for a much smoother rotation.

How to Make this
Month Calendar

This project details how to create an SVG month calendar using the Javascript Date() object functions (methods) to update the calendar to show the current month.

A bit more involved, but still simple, this project explains how to handle a 5 or 6 week calendar, more involved Javascript explaining logical AND, logical OR, modulus (remaindering) operations, and for loops.

The project also includes some challenges at the end, because hands on learning works best.

How to Make this
Beating Heart

This project shows two ways to animate a heart image without using any javascript. It will use another web standard called SMIL (Synchronous Multimedia Integration Language).

SVG images that use Javascript, work when embedded in the HTML, but not when displayed using the HTML <img> tag, which this page uses. That is why this image works (in some browsers), but the others don't work unless you view them in a separate page, i.e. click on them.

How to Make this
Flower to Color

This project makes a flower in SVG, which can be colored. It uses javascript to select an SVG element or group of SVG elements when clicked on and then opens a color selection panel. Clicking on a color in the color selection panel changes the color of the original element or group of elements to the color selected.

The project starts with the code for the flower, then the code for the color selection panel, and finally the javascript to color the flower.

How to Make this
Loop-de-Loop

This project makes an SVG Loop de Loop. The Loop de Loop is modeled after Anna Weltman's book, This is not a Math Book.

The project uses javascript to create the path commands that draw the loop de loop, adding line segments as defined by a number sequence. This SVG has 2 number sequences, but can easily be changed to more or just your favorite number sequence.

How to Make this
Santa Drawing

This project adds javascript to several openclipart.org images which draws them. Learn drawing techniques used by the artist. Awesome.

Click on this text to see a code listing and watch the other examples draw themselves using the same code. Apply the code to your favorite SVG image and watch it draw.

Original openclipart.org image

How to Make a
Polygon Maker

This project is will create a Polygon Maker that allows changing the number of sides in code and viewing the polygon. The SVG path command to create it can be copied. The image to the left was made by copying and pasting the path commands from the Polygon Maker.

The project will show how to use trigonometry (sine and cosine) functions in Javascript to find the coordinates of polygon points.

See trigonometry in action with these links
Regular Polygons: RegularPolygons.svg
SVG unit circle: UnitCircle.svg

Tangram Puzzle

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.

String Art

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.

Learn SVG

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 https://www.cattocreations.com/ePub3.html.

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