{"id":18064769,"url":"https://github.com/franciscop/vector-graph","last_synced_at":"2025-06-20T01:04:59.934Z","repository":{"id":57391304,"uuid":"381105021","full_name":"franciscop/vector-graph","owner":"franciscop","description":"Generate high-quality geometry and vector graphs with HTML","archived":false,"fork":false,"pushed_at":"2024-10-10T17:36:55.000Z","size":3564,"stargazers_count":22,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-20T01:04:29.508Z","etag":null,"topics":["draw","euclidean","graph","javascript","plane","vector","visualization"],"latest_commit_sha":null,"homepage":"https://vector-graph.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/franciscop.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-06-28T17:02:56.000Z","updated_at":"2024-10-10T17:36:59.000Z","dependencies_parsed_at":"2025-04-11T18:20:45.378Z","dependency_job_id":null,"html_url":"https://github.com/franciscop/vector-graph","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/franciscop/vector-graph","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/franciscop%2Fvector-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/franciscop%2Fvector-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/franciscop%2Fvector-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/franciscop%2Fvector-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/franciscop","download_url":"https://codeload.github.com/franciscop/vector-graph/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/franciscop%2Fvector-graph/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260857364,"owners_count":23073435,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["draw","euclidean","graph","javascript","plane","vector","visualization"],"created_at":"2024-10-31T06:07:31.363Z","updated_at":"2025-06-20T01:04:54.897Z","avatar_url":"https://github.com/franciscop.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vector Graph [![gzip size](https://img.badgesize.io/franciscop/vector-graph/master/index.js.svg?compression=gzip)](https://github.com/franciscop/vector-graph/blob/master/index.js)\n\n\u003e ⚠️ This library is experimental [until 1.0.0 in npm](https://www.npmjs.com/vector-graph). For updates [follow me](https://twitter.com/fpresencia)!\n\nGenerate high-quality geometry and vector graphs with HTML:\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cimg width=\"300px\" src=\"./examples/basics.svg\" /\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cimg width=\"300px\" src=\"./examples/triangle.svg\" /\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cimg width=\"300px\" src=\"./examples/complete.svg\" /\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003eBasic building blocks\u003c/td\u003e\n      \u003ctd align=\"center\"\u003eGeometry and angles\u003c/td\u003e\n      \u003ctd align=\"center\"\u003eCrank it up a notch\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n```html\n\u003cvector-graph id=\"basics\" units\u003e\n  \u003cline label=\"line\" from=\"1,8\" to=\"6,5\"\u003e\u003c/line\u003e\n  \u003cpoint label=\"point\" x=\"7\" y=\"7\"\u003e\u003c/point\u003e\n  \u003cvector label=\"vector\" to=\"8,4\" axis\u003e\u003c/vector\u003e\n\u003c/vector-graph\u003e\n\n\u003cvector-graph id=\"triangle\" x=\"3\" y=\"3\" axis=\"false\"\u003e\n  \u003cpolygon points=\"0,0;1,3;3,1\" sides=\"a,b,c\" angles=\"α,β,γ\"\u003e\u003c/polygon\u003e\n\u003c/vector-graph\u003e\n\n\u003cvector-graph id=\"complete\" x=\"4.9\" y=\"4.9\"\u003e\n  \u003cvector label=\"b\" color=\"blue\" from=\"3,4\" to=\"4,2\" axis\u003e\u003c/vector\u003e\n  \u003cvector label=\"a\" color=\"red\" from=\"0,0\" to=\"3,4\" axis\u003e\u003c/vector\u003e\n  \u003cvector label=\"c\" from=\"0,0\" to=\"4,2\"\u003e\u003c/vector\u003e\n\u003c/vector-graph\u003e\n```\n\n\u003e Note: none of the `id`s are necessary, but we add them because it's nice\n\n## Getting started\n\nTo use this library as usual you'll need three things. First, import it from a CDN; put this line anywhere in your HTML:\n\n```\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vector-graph\"\u003e\u003c/script\u003e\n```\n\nNow let's draw a graph anywhere within your HTML:\n\n![Plain Graph](./examples/plain.svg)\n\n```html\n\u003cvector-graph grid id=\"plain\"\u003e\n  \u003cvector label=\"u\" to=\"8,4\"\u003e\u003c/vector\u003e\n  \u003cvector label=\"v\" to=\"4,8\"\u003e\u003c/vector\u003e\n\u003c/vector-graph\u003e\n```\n\nFinally, please take a minute to understand the license of vector-graph. We are [dual-licensed](#license), GNU AGPL free license and a commercial license available:\n\n\u003ca href=\"https://franciscop.lemonsqueezy.com/checkout/buy/2db23884-26e2-4c97-833f-4dd266e48bfb?name=0\u0026discount=0\"\u003e\u003cbutton\u003e\\$19 BUY A LICENSE\u003c/button\u003e\u003c/a\u003e · \u003ca href=\"https://github.com/franciscop/vector-graph/blob/master/LICENSE\"\u003e\u003cbutton\u003eAGPL LICENSE\u003c/button\u003e\u003c/a\u003e\n\n## Documentation\n\nThe way you build images is with a parent `\u003cvector-graph\u003e` that draws the image and few top-level configuration (like the axis, grid, etc) and then add elements inside.\n\nUnless specified otherwise all units should be local units. So for example, the default plane axis sizes are defined as x=[0,10] and y=[0,10]. This means that if you want to put a point in 2,2, then you'd use those coordinates, never pixel values:\n\n![Basic of units](./examples/basic-units.svg?1)\n\n```html\n\u003cvector-graph id=\"basic-units\"\u003e\n  \u003cpoint x=\"2\" y=\"2\" label=\"2,2\"\u003e\u003c/point\u003e\n\u003c/vector-graph\u003e\n```\n\nThe same applies to positioning of all other elements. There are some exceptions, like the `width` and `height` of `\u003cvector-graph\u003e`, or the `width` for the `\u003cline width=\"3\"\u003e` which is also in pixels.\n\n### \\\u003cvector-graph\u003e\n\nCreate a vector graph image. It controls the display of grids, axis, numbers, etc.\n\n| attribute | default | description                                            |\n| --------- | ------- | ------------------------------------------------------ |\n| `width`   | `200`   | The width of the containing SVG element (pixels)       |\n| `height`  | `200`   | The height of the containing SVG element (pixels)      |\n| `x`       | `0,10`  | The x-coordinates of the graph to fit into the SVG     |\n| `y`       | `0,10`  | The y-coordinates of the graph to fit into the SVG     |\n| `units`   | `false` | Show the numbers on each of the axis                   |\n| `grid`    | `1`     | The size of the grid, or `false` to hide it            |\n| `axis`    | `x,y`   | The X and Y axis labels, or `false` to hide the axis   |\n| `dark`    | _auto_  | Dark theme (true), light theme (false) or auto (undef) |\n| `pad`     | `30`    | The space around the content to avoid SVG clipping     |\n\nControl the grid size and position with `x`, `y` and `grid`:\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cimg width=\"300px\" src=\"./examples/default-grid.svg\" /\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cimg width=\"300px\" src=\"./examples/shifted-grid.svg?1\" /\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cimg width=\"300px\" src=\"./examples/nogrid.svg\" /\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003eDefault grid 10x10\u003c/td\u003e\n      \u003ctd align=\"center\"\u003eShifted and scaled\u003c/td\u003e\n      \u003ctd align=\"center\"\u003eNo grid at all\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n```html\n\u003cvector-graph id=\"default-grid\" units\u003e\n  \u003cpoint label=\"0,0\" x=\"0\" y=\"0\"\u003e\u003c/point\u003e\n\u003c/vector-graph\u003e\n\n\u003cvector-graph id=\"shifted-grid\" x=\"-0.3,3\" y=\"-0.3,3\" units\u003e\n  \u003cpoint label=\"0,0\" x=\"0\" y=\"0\"\u003e\u003c/point\u003e\n\u003c/vector-graph\u003e\n\n\u003cvector-graph id=\"center-grid\" x=\"-2.8,2.8\" y=\"-2.8,2.8\" units\u003e\n  \u003cpoint label=\"0,0\" x=\"0\" y=\"0\"\u003e\u003c/point\u003e\n\u003c/vector-graph\u003e\n```\n\nYou can also hide the different parts of the grid; let's change the size, remove the `units` and disable the `axis` and `grid`:\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cimg width=\"300px\" src=\"./examples/small-grid.svg\" /\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cimg width=\"300px\" src=\"./examples/no-grid.svg\" /\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cimg width=\"300px\" src=\"./examples/no-axis.svg\" /\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e1x1 grid of 0.2 steps\u003c/td\u003e\n      \u003ctd align=\"center\"\u003eHide the grid\u003c/td\u003e\n      \u003ctd align=\"center\"\u003eHide grid and axis\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n```html\n\u003cvector-graph id=\"small-grid\" x=\"0,1\" y=\"0,1\" grid=\"0.2\" units\u003e\n  \u003cpoint label=\"0,0\" x=\"0\" y=\"0\"\u003e\u003c/point\u003e\n\u003c/vector-graph\u003e\n\n\u003cvector-graph id=\"no-grid\" grid=\"false\"\u003e\n  \u003cpoint label=\"0,0\" x=\"0\" y=\"0\"\u003e\u003c/point\u003e\n\u003c/vector-graph\u003e\n\n\u003cvector-graph id=\"no-axis\" grid=\"false\" axis=\"false\"\u003e\n  \u003cpoint label=\"0,0\" x=\"0\" y=\"0\"\u003e\u003c/point\u003e\n\u003c/vector-graph\u003e\n```\n\n### \\\u003cpoint\u003e\n\nDraws a small circle in the graph that represents a point in space:\n\n![Point example](./examples/point.svg?20)\n\n```html\n\u003cvector-graph id=\"point\"\u003e\n  \u003cpoint label=\"a\"\u003e\u003c/point\u003e\n  \u003cpoint x=\"2\" y=\"1\"\u003e\u003c/point\u003e\n  \u003cpoint x=\"4\" y=\"2\" label=\"c\" color=\"blue\"\u003e\u003c/point\u003e\n  \u003cpoint x=\"6\" y=\"5\" label=\"d\" axis\u003e\u003c/point\u003e\n  \u003cpoint x=\"8\" y=\"8\" label=\"e\" color=\"red\" axis\u003e\u003c/point\u003e\n\u003c/vector-graph\u003e\n```\n\n| attribute | default | description                                       |\n| --------- | ------- | ------------------------------------------------- |\n| `x`       | `0`     | The horizontal coordinate where to draw the point |\n| `y`       | `0`     | The vertical coordinate where to draw the point   |\n| `label`   | _none_  | The text to draw on top of the point              |\n| `color`   | `black` | The color of the point, it can be a name or hexa  |\n| `axis`    | `false` | Draw the horizontal and vertical coordinate lines |\n\n### \\\u003cline\u003e\n\nDraws a segment between two given points:\n\n![Line example](./examples/line.svg?17)\n\n```html\n\u003cvector-graph id=\"line\"\u003e\n  \u003cline label=\"a\" to=\"6,6\"\u003e\u003c/line\u003e\n  \u003cline label=\"b\" from=\"2,8\" to=\"8,8\"\u003e\u003c/line\u003e\n  \u003cline label=\"c\" from=\"6,1\" to=\"6,5\" color=\"red\" width=\"1\"\u003e\u003c/line\u003e\n  \u003cline label=\"d\" from=\"8,1\" to=\"8,7\" color=\"blue\" width=\"3\" dashed\u003e\u003c/line\u003e\n\u003c/vector-graph\u003e\n```\n\n| attribute | default | description                                      |\n| --------- | ------- | ------------------------------------------------ |\n| `to`      | _none_  | The point where the line/segment ends            |\n| `from`    | `0,0`   | The point where the line/segment starts          |\n| `label`   | _none_  | Text to draw on the middle of the line           |\n| `color`   | `black` | The color of the line, it can be a name or hexa  |\n| `width`   | `1.75`  | The stroke width of the line to draw             |\n| `dashed`  | `false` | Show as dashes (true) or as a solid line (false) |\n\n### \\\u003ccircle\u003e\n\nDraw a hollow circle around the specified center:\n\n![Circle example](./examples/circle.svg?26)\n\n```html\n\u003cvector-graph id=\"circle\" x=\"-1,6\" y=\"-1,6\"\u003e\n  \u003ccircle label=\"a\"\u003e\u003c/circle\u003e\n  \u003ccircle label=\"b\" x=\"2\" y=\"2\" radius=\"1.5\"\u003e\u003c/circle\u003e\n  \u003ccircle label=\"c\" x=\"2\" y=\"5\" color=\"red\"\u003e\u003c/circle\u003e\n  \u003ccircle label=\"d\" x=\"5\" y=\"2\" width=\"1\"\u003e\u003c/circle\u003e\n  \u003ccircle label=\"e\" x=\"5\" y=\"5\" color=\"blue\" width=\"3\"\u003e\u003c/circle\u003e\n\u003c/vector-graph\u003e\n```\n\n| attribute | default | description                                      |\n| --------- | ------- | ------------------------------------------------ |\n| `x`       | `0`     | The horizontal coordinate of the circle's center |\n| `y`       | `0`     | The vertical coordinate of the circle's center   |\n| `radius`  | `1`     | The circle's radius, in coordinates size         |\n| `label`   | _none_  | Text to draw on the middle of the line           |\n| `color`   | `black` | The color of the line, it can be a name or hexa  |\n| `width`   | `1.75`  | The stroke width of the line to draw             |\n\n### \\\u003cvector\u003e\n\n| attribute | default | description                                       |\n| --------- | ------- | ------------------------------------------------- |\n| `to`      | _none_  | The point where the vector ends with an arrow     |\n| `from`    | `0,0`   | The point where the vector starts                 |\n| `label`   | _none_  | Text to draw on the middle of the line            |\n| `color`   | `black` | The color of the line, it can be a name or hexa   |\n| `axis`    | `false` | Draw the horizontal and vertical coordinate lines |\n\n### \\\u003cpolygon\u003e\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cimg width=\"300px\" src=\"./examples/regular-polygon.svg\" /\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cimg width=\"300px\" src=\"./examples/complex-polygons.svg\" /\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cimg width=\"300px\" src=\"./examples/angles-polygon.svg\" /\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003eSimple polygon\u003c/td\u003e\n      \u003ctd align=\"center\"\u003eDifferent shapes\u003c/td\u003e\n      \u003ctd align=\"center\"\u003eWith angles and sides\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n```html\n\u003cvector-graph id=\"regular-polygon\"\u003e\n  \u003cpolygon points=\"2,2;6,2;6,6;2,6\"\u003e\u003c/polygon\u003e\n\u003c/vector-graph\u003e\n\n\u003cvector-graph id=\"complex-polygons\" axis=\"false\" x=\"6\" y=\"6\"\u003e\n  \u003cpolygon points=\"1,1;6,0;2,2;4,4;0,6\" color=\"red\"\u003e\u003c/polygon\u003e\n\u003c/vector-graph\u003e\n\n\u003cvector-graph id=\"angles-polygon\" axis=\"false\"\u003e\n  \u003cpolygon points=\"1,1;7,1;9,9;1,7\" sides=\"a,b,c,d\" angles=\"α,β,γ,δ\"\u003e\u003c/polygon\u003e\n\u003c/vector-graph\u003e\n```\n\n| attribute | default | description                                     |\n| --------- | ------- | ----------------------------------------------- |\n| `points`  | _none_  | All of the points of the domain                 |\n| `color`   | `black` | The color of the line, it can be a name or hexa |\n| `angles`  | `false` | Draw the angles in the internal vertices        |\n\n### \\\u003cangle\u003e\n\nDraws an arc representing the angle between two existing lines (the lines must be drawn separately).\n\n![Angle example](./examples/angle.svg)\n\n```html\n\u003cvector-graph id=\"angle\"\u003e\n  \u003cangle to=\"90\" radius=\"3\"\u003e\u003c/angle\u003e\n  \u003cangle label=\"a\" to=\"45\" radius=\"4\"\u003e\u003c/angle\u003e\n  \u003cangle label=\"b\" from=\"45\" to=\"90\" radius=\"5\" color=\"red\"\u003e\u003c/angle\u003e\n  \u003cangle label=\"c\" to=\"45\" radius=\"5\" color=\"blue\" dashed=\"false\"\u003e\u003c/angle\u003e\n  \u003cangle label=\"d\" x=\"7\" radius=\"2\" from=\"0\" to=\"180\"\u003e\u003c/angle\u003e\n\u003c/vector-graph\u003e\n```\n\n| attribute | default  | description                                      |\n| --------- | -------- | ------------------------------------------------ |\n| `x`       | `0`      | The horizontal coordinate of the angle's center  |\n| `y`       | `0`      | The vertical coordinate of the angle's center    |\n| `from`    | `0`      | The angle (in degrees) to start drawing the arc  |\n| `to`      | _none_   | The angle (in degrees) to finish drawing the arc |\n| `radius`  | `1`      | The angle's arc radius, in coordinates size      |\n| `label`   | _none_   | Text to draw on the middle of the line           |\n| `color`   | `black`  | The color of the line, it can be a name or hexa  |\n| `size`    | `normal` | The label's size                                 |\n| `dashed`  | `true`   | Draw dashes instead of a solid line              |\n\n### \\\u003ctext\u003e\n\n| attribute | default  | description                                          |\n| --------- | -------- | ---------------------------------------------------- |\n| `text`    | _none_   | The content that goes inside the label               |\n| `x`       | _none_   | The horizontal coordinate where to draw the label    |\n| `y`       | _none_   | The vertical coordinate where to draw the label      |\n| `color`   | `black`  | Color of text and border, it can be a name or hexa   |\n| `size`    | `normal` | Define how big it is: \"tiny, small, normal or large\" |\n| `width`   | _auto_   | The width of the label, leave it empty               |\n\n### \\\u003clabel\u003e\n\n| attribute | default  | description                                          |\n| --------- | -------- | ---------------------------------------------------- |\n| `text`    | _none_   | The content that goes inside the label               |\n| `x`       | _none_   | The horizontal coordinate where to draw the label    |\n| `y`       | _none_   | The vertical coordinate where to draw the label      |\n| `color`   | `black`  | Color of text and border, it can be a name or hexa   |\n| `size`    | `normal` | Define how big it is: \"tiny, small, normal or large\" |\n| `width`   | _auto_   | The width of the label, tip: leave it empty          |\n| `height`  | _auto_   | The height of the label, tip: leave it empty         |\n\n### \\\u003cplot\u003e\n\n![Simple Complex numbers](./examples/custom-function.svg?46)\n\n| attribute | default | description                                     |\n| --------- | ------- | ----------------------------------------------- |\n| `fn`      | string  | The function to draw (in Javascript)            |\n| `color`   | `black` | Color of plotted line, it can be a name or hexa |\n| `width`   | _auto_  | The width of the line to draw                   |\n\n```html\n\u003cvector-graph id=\"custom-function\" x=\"-5,5\" y=\"-2,2\"\u003e\n  \u003cplot fn=\"Math.tan(x)\" color=\"red\" width=\"1\"\u003e\u003c/plot\u003e\n  \u003cplot fn=\"Math.sin(x)\" color=\"green\"\u003e\u003c/plot\u003e\n  \u003cplot fn=\"Math.cos(x)\" color=\"blue\"\u003e\u003c/plot\u003e\n\u003c/vector-graph\u003e\n```\n\n## Examples\n\n![Simple Complex numbers](./examples/imaginary.svg)\n\n```html\n\u003cvector-graph id=\"imaginary\"\u003e\n  \u003cvector to=\"6,6\" axis=\"a,b\"\u003e\u003c/vector\u003e\n  \u003cpoint label=\"a+bi\" x=\"6\" y=\"6\" color=\"red\"\u003e\u003c/point\u003e\n\u003c/vector-graph\u003e\n```\n\n### Custom function\n\n![Simple Complex numbers](./examples/custom-function.svg?46)\n\n```html\n\u003cvector-graph id=\"custom-function\" x=\"-5,5\" y=\"-2, 2\"\u003e\n  \u003cplot fn=\"Math.tan(x)\" color=\"red\" width=\"1\"\u003e\u003c/plot\u003e\n  \u003cplot fn=\"Math.sin(x)\" color=\"green\"\u003e\u003c/plot\u003e\n  \u003cplot fn=\"Math.cos(x)\" color=\"blue\"\u003e\u003c/plot\u003e\n\u003c/vector-graph\u003e\n```\n\n### Full XY Plane\n\n![Electromagnetism](./examples/electromagnetism.svg)\n\n```html\n\u003cvector-graph width=\"400\" height=\"400\" x=\"-5,5\" y=\"-5,5\" id=\"electromagnetism\"\u003e\n  \u003cpoint x=\"0\" y=\"0\"\u003e\u003c/point\u003e\n\n  \u003ctext text=\"Electric Field\" x=\"-2.7\" y=\"2.4\" color=\"red\"\u003e\u003c/text\u003e\n  \u003clabel text=\"Right Hand Rule\" x=\"2.5\" y=\"-4\"\u003e\u003c/label\u003e\n\n  \u003cvector color=\"red\" from=\"-0.5,-1\" to=\"0.5,-1\"\u003e\u003c/vector\u003e\n  \u003cvector color=\"red\" from=\"0.5,1\" to=\"-0.5,1\"\u003e\u003c/vector\u003e\n  \u003cvector color=\"red\" from=\"1,-0.5\" to=\"1,0.5\"\u003e\u003c/vector\u003e\n  \u003cvector color=\"red\" from=\"-1,0.5\" to=\"-1,-0.5\"\u003e\u003c/vector\u003e\n\n  \u003cvector color=\"red\" from=\"-1,-2\" to=\"1,-2\"\u003e\u003c/vector\u003e\n  \u003cvector color=\"red\" from=\"1,2\" to=\"-1,2\"\u003e\u003c/vector\u003e\n  \u003cvector color=\"red\" from=\"2,-1\" to=\"2,1\"\u003e\u003c/vector\u003e\n  \u003cvector color=\"red\" from=\"-2,1\" to=\"-2,-1\"\u003e\u003c/vector\u003e\n\n  \u003cvector color=\"red\" from=\"-1.5,-3\" to=\"1.5,-3\"\u003e\u003c/vector\u003e\n  \u003cvector color=\"red\" from=\"1.5,3\" to=\"-1.5,3\"\u003e\u003c/vector\u003e\n  \u003cvector color=\"red\" from=\"3,-1.5\" to=\"3,1.5\"\u003e\u003c/vector\u003e\n  \u003cvector color=\"red\" from=\"-3,1.5\" to=\"-3,-1.5\"\u003e\u003c/vector\u003e\n\u003c/vector-graph\u003e\n```\n\n## Environments\n\n### Javascript\n\nFollow the [Getting Started](#getting-started) guide and it'll all work great. You can include the script at the beginning or at the end of your HTML, it doesn't matter.\n\n### React\n\n### Vue\n\n### Wordpress\n\n### Node.js\n\nYou can run this on the Node.js side to generate static SVGs as well. To do so, you'll need to install `jsdom` on your own and then use it like this:\n\n```js\nimport { JSDOM } from \"jsdom\";\nimport graph from \"vector-graph\";\n\n// Make some of these variable accessible from anywhere\nconst dom = new JSDOM();\nglobal.window = dom.window;\nglobal.document = window.document;\nglobal.DOMParser = window.DOMParser;\n\n// Render the HTML to SVG\nconst svg = graph(`\n  \u003cvector-graph\u003e\n    \u003cpoint label=\"point\" x=\"7\" y=\"7\"\u003e\u003c/point\u003e\n    \u003cline label=\"line\" from=\"0,0\" to=\"4,8\"\u003e\u003c/line\u003e\n    \u003cvector label=\"vector\" to=\"8,4\"\u003e\u003c/vector\u003e\n  \u003c/vector-graph\u003e\n`);\n\nconsole.log(svg);\n// \u003csvg width=\"200\" height=\"200\" viewBox=\"...\"\u003e...\u003c/svg\u003e\n```\n\n## About Vector Graph\n\nI love Katex and I've written several tutorials in the past about mathematics, but I've felt that we are lacking on a way of describing mathematic vectors and equations easily on the web.\n\nThere is one project that does a similar thing, but it's way too large (680kb of JS!) and overly complex in my opinion. Instead, I just wanted a way of easily define a simple graph with plain HTML, something like this:\n\n![About example](./examples/about.svg)\n\n```html\n\u003cvector-graph id=\"about\"\u003e\n  \u003cvector to=\"6,8\"\u003e\u003c/vector\u003e\n\u003c/vector-graph\u003e\n```\n\nSo after some experimenting and seeing it was possible, I decided to create this library. I'm using SVG since it is scalable and its API is not terrible to work with. It's also not awesome to work with, hence a non-trivial part of the library internals are dedicated to work around some SVG issues.\n\nNow, I've spent _a lot_ of hours creating this and I'm releasing it for everyone to use for free. My ask is that if you want to use my work, you either also release your work for others to use, or compensate me so I can keep building amazing things!\n\n## License\n\nThis library is dual-licensed:\n\n- **GNU Affero GPL** (AGPL) is the default license. This might be too strict and relaxed to _GPL_ or _LGPL_ on the release date, we'll see. I pick this for now since it's better to start strict and then relax the license than the other way around.\n- **Commercial License** for \\$19 [buy in here](https://franciscop.lemonsqueezy.com/checkout/buy/2db23884-26e2-4c97-833f-4dd266e48bfb?name=0\u0026discount=0), which allows you to use in any proprietary codebase without following the AGPL. Ideal for business, education, etc.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffranciscop%2Fvector-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffranciscop%2Fvector-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffranciscop%2Fvector-graph/lists"}