{"id":15696786,"url":"https://github.com/waldyrious/understand-svg-arcs","last_synced_at":"2026-01-11T02:52:28.801Z","repository":{"id":138965840,"uuid":"63152018","full_name":"waldyrious/understand-svg-arcs","owner":"waldyrious","description":"An explainer and diagram to help understand the syntax of the arc command of SVG paths.","archived":false,"fork":false,"pushed_at":"2022-07-11T10:05:25.000Z","size":34,"stargazers_count":8,"open_issues_count":4,"forks_count":1,"subscribers_count":3,"default_branch":"gh-pages","last_synced_at":"2025-02-05T15:40:55.217Z","etag":null,"topics":["explainer","svg","svg-path","svg-paths"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/waldyrious.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}},"created_at":"2016-07-12T11:20:53.000Z","updated_at":"2024-12-10T08:30:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"c4406a40-9bb0-46bc-a286-164665fe3091","html_url":"https://github.com/waldyrious/understand-svg-arcs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waldyrious%2Funderstand-svg-arcs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waldyrious%2Funderstand-svg-arcs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waldyrious%2Funderstand-svg-arcs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waldyrious%2Funderstand-svg-arcs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/waldyrious","download_url":"https://codeload.github.com/waldyrious/understand-svg-arcs/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246326600,"owners_count":20759436,"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":["explainer","svg","svg-path","svg-paths"],"created_at":"2024-10-03T19:09:57.119Z","updated_at":"2026-01-11T02:52:28.794Z","avatar_url":"https://github.com/waldyrious.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Understanding SVG arcs\n\n**[SVG paths](https://www.w3.org/TR/SVG/paths.html)** can be daunting at first,\nbut upon closer examination,\nmost of the commands can be understood pretty intuitively.\n\nThe syntax of the\n**[arc command](https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands)**,\nhowever, seems to be an exception.\nThis repo provides some resources that hopefully make its syntax clearer.\n\n## Explanation\n\nThe awkward\n[syntax of the arc command](https://www.w3.org/TR/SVG/implnote.html#ArcSyntax)\nis due to it being designed to match the structure of the other SVG path commands,\nall of which consist of one or more pairs of (x,y) coordinates,\nthe last one being the coordinates of the new \"current point\" of the \"pen\"\n(to follow the analogy of a [plotter](https://en.wikipedia.org/wiki/Plotter)).\n\nHowever, just like a circle is defined more intuitively\nby specifying the center and radius,\nan elliptical arc is also best understood\nif defined by its center, the minor and major radius,\nthe starting angle and the angular span it covers.\nThe fact that SVG requires a different way to specify an arc\nis what makes it weird and cumbersome to understand. \n\nThe best way to think of SVG's \"endpoint parametrization\"\nis as providing parameters to a\n**[constraint solver](https://en.wikipedia.org/wiki/Constraint_programming)**:\nthe arc has to follow an ellipse\nwith a given **width/height ratio** (x-radius vs. y-radius),\nwith a given **rotation**\u003csup\u003e†\u003c/sup\u003e, and that passes through the **start point**\ngiven at the end of the preceding path command, and the **end point**\ngiven at the end of the arc command.\n\n\u003e\u003csup\u003e†\u003c/sup\u003eNote that the rotation maintains the start and end points,\nwhereas a rotation with the transform attribute (outside the path description)\nwould cause the entire path, including the start and end points, to be rotated.\n\nThese restrictions (with a few\n[adjustments to prevent unsolvable constraints](https://www.w3.org/TR/SVG/implnote.html#ArcOutOfRangeParameters))\nresult in two possible ellipses,\nand four corresponding elliptical arcs\nconnecting the two endpoints.\nThe **large arc** and **sweep** flags (specified as 0 or 1)\nthen provide disambiguation between these four arc possibilities,\ngiving a unique, unambiguous (but highly unintuitive)\narc parametrization.\n\n## Practical example\n\nThe live **[demo page](http://waldyrious.github.io/understand-svg-arcs)** (screenshot below),\nshowcases a few variations of an arc command\nwith the same starting and ending point (100,200 and 250,150),\nalong with the ellipses that are used for their construction,\nas a practical example that may help understand the textual description above.\n\n![screenshot](https://cloud.githubusercontent.com/assets/478237/16767397/28df4988-4837-11e6-9f3b-b266d825bec1.png)\n\n## Resources\n\nThe demo above takes inspiration from the excellent diagram in the \n[OReilly Commons wiki](http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Paths#Elliptical_Arc).\n\nThe SVG implementation of this diagram was inspired by\n[Jakob Jenkov](https://github.com/jjenkov)'s excellent\n[svg paths tutorial](http://tutorials.jenkov.com/svg/path-element.html#arcs),\nwith some help from his\n[svg markers tutorial](http://tutorials.jenkov.com/svg/marker-element.html)\nfor the arrow heads. He also made a\n[video version of the svg paths tutorial](https://youtu.be/k6TWzfLGAKo?t=2m52s)\n(content about arcs starts at 2:52),\nwhich helps visualize the effects of the arc command parameters.\n\nAnother nice video explanation is\n[this one](https://youtu.be/Iyb3R_1NkEU?t=10m42s)\nby [Glenn Howes](https://github.com/grhowes)\n(content about arcs starts at 10:42).\n[The iOS app used in the video](https://itunes.apple.com/us/app/svg-paths/id690371196)\nseems to be an interesting way to experiment with arcs interactively.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaldyrious%2Funderstand-svg-arcs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwaldyrious%2Funderstand-svg-arcs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaldyrious%2Funderstand-svg-arcs/lists"}