Skip to main content
  1. AI Related Tools/

SVG Tracer

230 words·2 mins·

I needed to create paths, with coordinates on a given SVG so I could have another tool create animations from them. This is the result of what I needed to create. The animated background image you see is an SVG created with the help of this tool. I used this tool to trace the paths of the pulses.

Load Your File
#

  • You can manually paste an SVG into “Render” if you wish or
  • Load BG SVG File sample: Download DC Logo

Get your paths:
#

  • Adjust the big black window below (scroll down)
  • Hold Space Bar and Drag if you need to move image
  • Click the Path you want to Trace Coorindates
  • Click “Copy” to save that Path
  • Click “Clear” to make new Path
  • Repeat

What’s Next?
#

Use the cooridinates, along with your LLM of choice, to animate pulses by giving it your base image and the path like this:

Use this SVG file (attached) and these cooridinates (paste your cooridinates), to create an animated SVG file with a blue pulse along this line.

The LLM will know the code of your SVG, and the code of your path and can easily animate pulses. Keep modifying it with the design you are creating using this method.

📝 Path String
🖼️ BG SVG
X: 0, Y: 0
Author
James Fraze
25 yrs cybersecurity. 31 certs. I build AI that works.