{"id":19528580,"url":"https://github.com/swanie21/svg-shapes","last_synced_at":"2026-02-02T11:07:39.547Z","repository":{"id":132552028,"uuid":"85149973","full_name":"swanie21/svg-shapes","owner":"swanie21","description":"Making custom SVG shapes","archived":false,"fork":false,"pushed_at":"2017-03-30T19:34:42.000Z","size":8,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"gh-pages","last_synced_at":"2025-06-21T05:41:35.961Z","etag":null,"topics":["circle","ellipse","polygon","polyline","rectangle","svg"],"latest_commit_sha":null,"homepage":"http://kirstenswanson.io/svg-shapes/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/swanie21.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2017-03-16T03:47:55.000Z","updated_at":"2024-04-19T18:05:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"35de1ade-379a-480e-bb1c-60425e0cf460","html_url":"https://github.com/swanie21/svg-shapes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/swanie21/svg-shapes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swanie21%2Fsvg-shapes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swanie21%2Fsvg-shapes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swanie21%2Fsvg-shapes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swanie21%2Fsvg-shapes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/swanie21","download_url":"https://codeload.github.com/swanie21/svg-shapes/tar.gz/refs/heads/gh-pages","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swanie21%2Fsvg-shapes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29010755,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-02T10:37:29.253Z","status":"ssl_error","status_checked_at":"2026-02-02T10:37:28.644Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["circle","ellipse","polygon","polyline","rectangle","svg"],"created_at":"2024-11-11T01:19:20.509Z","updated_at":"2026-02-02T11:07:39.530Z","avatar_url":"https://github.com/swanie21.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SVG (Scalable Vector Graphics)\n\n[SVG Playground of Shapes](http://kirstenswanson.io/svg-shapes/)\n\n### SVG Background:\n* Developed in 1999  \n* XML Vector Graphics Format  \n* SVGs are scalable and customizable  \n* Can create and edit with any text editor  \n* Can be used with animation  \n* High quality resolution no matter what size\n\n### How to create your own SVGs\n\nStart with the `\u003csvg\u003e` element tags  \n\nThe `\u003csvg\u003e` element can be embedded right into the HTML\n\n```\n\u003cbody\u003e\n  \u003csvg width=\" \" height=\" \"\u003e\n    // element shape\n  \u003c/svg\u003e\n\u003c/body\u003e\n```\n\nHere is a list of elements that can be drawn inside the `\u003csvg\u003e` element:  \n* Circle  \n* Ellipse\n* Rectangle  \n* Line  \n* Polyline  \n* Polygon  \n* Path  \n* Text  \n\nWhen styling these elements you will use different properties than your typical CSS properties that you're used to  \n\nTo specify a background color you will use the property `fill`  \n\nTo specify a border color you will use the property `stroke`  \n\nTo specify the border width you will use the property `stroke-width`  \n\n```\nfill=\"#2882f9\" stroke=\"#000\" stroke-width=\"3\"\n```\n\nShorthand styling:\n```\nstyle=\"fill:#2882f9;stroke:#000;stroke-width:3\"\n```  \n\nAn important concept to understand with SVGs is the `viewport` and `viewBox`.  \n\nThe `viewport` is the rectangular region of the SVG canvas, which is the viewing area the user will see. It is set by specifying the `width` and `height` properties of the SVG, which in turn determines the area of the coordinate system. By default the unit length is in pixels, but you can also use: `em`, `mm`, `pc`, `in` and `%`. The coordinate system starts in the top-left corner (0,0). If you increase the x-coordinate, the object will move towards the right. If you increase the y-coordinate, the object will move downwards.   \n\n```\n\u003csvg width=\"100\" height=\"100\"\u003e  \n  //element\n\u003c/svg\u003e\n```  \n\nThe `viewBox` is initially placed on top of the `viewport`, but can be stretched or displaced to change the viewable region. The `viewBox` property takes four values: `min-x`, `min-y`, `width` and `height`.  \n\n```\n\u003csvg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"\u003e  \n  //element\n\u003c/svg\u003e\n```  \n\n## Create a Circle\n\n```\n\u003csvg width=\"110\" height=\"100\"\u003e\n  \u003ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"#2882f9\" stroke=\"#000\" stroke-width=\"3\" /\u003e\n\u003c/svg\u003e\n```  \n\n`cx` property defines the x-coordinate from the center of the circle  \n\n`cy` property defines the y-coordinate from the center of the circle\n\n`r` property defines the radius, which is the length of a line segment from the center to the perimeter  \n\n## Create an Ellipse\n\n```\n\u003csvg width=\"160\" height=\"120\"\u003e\n  \u003cellipse cx=\"70\" cy=\"60\" rx=\"65\" ry=\"50\" fill=\"#ff5e5e\" stroke=\"#000\" stroke-width=\"3\" /\u003e\n\u003c/svg\u003e\n```  \n\n`cx` and `cy` properties define the center of the ellipse  \n\n`rx` property defines the wideness of the ellipse  \n\n`ry` property defines the height of the ellipse\n\n## Create a Rectangle\n\n```\n\u003csvg width=\"140\" height=\"100\"\u003e\n  \u003crect x=\"5\" y=\"5\" width=\"110\" height=\"90\" fill=\"#36e1ff\" stroke=\"#000\" stroke-width=\"3\" /\u003e\n\u003c/svg\u003e\n```  \n\nIf you want to create rounded corners you will need to add `rx` and `ry` properties  \n\n## Create a Line\n\n```\n\u003csvg height=\"100\" width=\"100\" viewBox=\"0 0 100 100\"\u003e\n  \u003cline x1=\"5\" y1=\"5\" x2=\"50\" y2=\"90\" stroke=\"#000\" stroke-width=\"5\" /\u003e\n\u003c/svg\u003e\n```  \n\n`x1` (x-axis) and `y1` (y-axis) define the starting point of the line  \n\n`x2` (x-axis) and `y2` (y-axis) define the ending point of the line  \n\n## Create a Polyline\n\n```\n\u003csvg height=\"100\" width=\"100\" viewBox=\"0 0 100 100\"\u003e\n  \u003cline x1=\"5\" y1=\"5\" x2=\"50\" y2=\"90\" stroke=\"#000\" stroke-width=\"3\" /\u003e\n\u003c/svg\u003e\n```  \n\nUsing the x-axis and y-axis you can set coordinates to create shapes with lines\n\n## Create a Path\n\n```\n\u003csvg height=\"100\" width=\"100\"\u003e\n  \u003cpath d=\"M 10 40 C 90 -30 100 90 20 100 L 90 100 Z\" fill=\"none\" stroke=\"#000\" stroke-width=\"3\" /\u003e\n\u003c/svg\u003e\n```\n\n`\u003cpath\u003e` element is a custom shape with curves, lines and arcs; imagine drawing a shape with a virtual pen going from point to point  \n\nThe `\u003cpath\u003e` element can be grouped by wrapping the `\u003cpath\u003e` elements in `\u003cg\u003e` tags\n\n```\n\u003csvg height=\"100\" width=\"100\"\u003e\n  \u003cg\u003e\n    \u003cpath fill=\"none\" stroke=\"#000\" stroke-width=\"8\" d=\"m 5,20 90,0\" /\u003e\n    \u003cpath fill=\"none\" stroke=\"#000\" stroke-width=\"8\" d=\"m 5,45 90,0\" /\u003e\n    \u003cpath fill=\"none\" stroke=\"#000\" stroke-width=\"8\" d=\"m 5,70 90,0\" /\u003e\n  \u003c/g\u003e\n\u003c/svg\u003e\n```\n\nThe `\u003cpath\u003e` element takes specific commands with the `d` property, which you can think of the `d` representing the *path data*\n\n* M = move to  \n* L = line to\n* V = vertical line   \n* H = horizontal line\n* C = curve to  \n* S = smooth curve to  \n* Q = quadratic Bézier curve  \n* T = smooth quadratic Bézier curve\n* A = elliptical arc  \n* Z = close path  \n\n*Uppercase letters represent `absolute` coordinate positioning and lowercase letters represent `relative` coordinate positioning based on the previous coordinate*  \n\nSome helpful libraries to animate SVGs are [Snap.svg](http://snapsvg.io/) and [GreenSock](https://greensock.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswanie21%2Fsvg-shapes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fswanie21%2Fsvg-shapes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswanie21%2Fsvg-shapes/lists"}