https://github.com/this-oliver/point-and-plot
generate accurate coordinates for SVG elements in a quick and simple manner that saves you hours of trial and error.
https://github.com/this-oliver/point-and-plot
coordinates html interactive-visualizations javascript plotting svg web
Last synced: about 1 month ago
JSON representation
generate accurate coordinates for SVG elements in a quick and simple manner that saves you hours of trial and error.
- Host: GitHub
- URL: https://github.com/this-oliver/point-and-plot
- Owner: this-oliver
- License: mit
- Created: 2024-10-12T13:30:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-16T21:10:07.000Z (about 1 year ago)
- Last Synced: 2025-07-09T13:06:53.558Z (8 months ago)
- Topics: coordinates, html, interactive-visualizations, javascript, plotting, svg, web
- Language: JavaScript
- Homepage: https://point-and-plot.oliverrr.net/
- Size: 36.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# Point-and-plot
`Point-and-plot` is a tool that generates quick and accurate `x` and `y` coordinates for SVG elements to save you hours of trial and error. All you have to do is upload an image and click on the areas you want to get the coordinates for.
This tools is the result of a visual project that I once worked on which involved making an svg file interactive and I couldn't be bothered with mapping some interactible components by guessing coordinates for like 50+ components.
## Getting started
> [!TIP]
> For the best experience, visit the website [point-and-plot.oliverrr.net](https://point-and-plot.oliverrr.net) to skip the setup process.
1. Clone the repository - `git clone https://github.com/this-oliver/point-and-plot.git`.
2. Click on the `index.html` file and copy its path.
3. Paste the path in your browser.
```bash
# Clone the repository
git clone https://github.com/this-oliver/point-and-plot.git
# Change directory
cd point-and-plot
# Open the index.html file in your browser (MacOS)
open index.html
# Open the index.html file in your browser (Windows)
start index.html
```
## How to use
> [!NOTE]
> Uploaded SVG files are not stored on the server. They are only used to generate the coordinates.
1. Upload the SVG file you want to edit.
2. Point and click on an area of the image.
3. Accept or reject the coordinates/position.
4. Repeat step 2 and 3 until you have all the coordinates you need.
5. Download the coordinates as a JSON file or copy them to the clipboard (see the web console).