Skip to content

Instantly share code, notes, and snippets.

@chilijung

chilijung/README.md

Created April 21, 2014 07:50
Show Gist options
  • Save chilijung/11135448 to your computer and use it in GitHub Desktop.
Save chilijung/11135448 to your computer and use it in GitHub Desktop.
Download ZIP
Paths in svg.
Raw
README.md

Paths in svg.

Raw
index.html
<html>
<head>
<style>
svg {
height: 200px;
}
</style>
</head>
<body>
<!-- original http://tutorials.jenkov.com/svg/path-element.html -->
<h1> Set moving pen </h1>
<svg>
<!-- Moving pen set to 50, 50 -->
<path d="M50,50" style="stroke:#660000; fill:none;"/>
</svg>
<h1> Drawing a line using absolute x, y</h1>
<svg>
<path d="M50,50 L100,100" style="stroke:#660000; fill:none;"/>
</svg>
<h1> Drawing a line using relative x, y</h1>
<svg>
<path d="M50,50 l100,100" style="stroke:#660000; fill:none;"/>
</svg>
<h1> Drawing Arcs </h1>
<svg>
<!-- Pen start at 50, 50. Arcs's rx(radius in x-direction) and ry is 30, 50. x-arcs-rotation is 0. large-arc-flag and sweep-flag parameters is 0, 1 -->
<path d="M50,50 A30,50 0 0,1 100,100" style="stroke:#660000; fill:none;"/>
</svg>
<h1> Drawing Arcs and set large-arc-flag (0 smaller of the possible arcs will be drawn) and sweep-flag(0 is not mirrored) </h1>
<svg>
<path d="M40,20 A30,30 0 0,0 70,70"
style="stroke: #cccc00; stroke-width:2; fill:none;"/>
<path d="M40,20 A30,30 0 1,0 70,70"
style="stroke: #ff0000; stroke-width:2; fill:none;"/>
<path d="M40,20 A30,30 0 1,1 70,70"
style="stroke: #00ff00; stroke-width:2; fill:none;"/>
<path d="M40,20 A30,30 0 0,1 70,70"
style="stroke: #0000ff; stroke-width:2; fill:none;"/>
</svg>
<h1>Quadratic Bezier Curves</h1>
<svg>
<!-- Bezier curve from 50,50 to the point 100,100 with a control point at 50,200 -->
<path d="M50,50 Q50,100 100,100"
style="stroke: #006666; fill:none;"/>
</svg>
<h1>Cubic Bezier Curves</h1>
<svg>
<path d="M50,50 C75,80 125,20 150,50"
style="stroke: #006666; fill:none;"/>
</svg>
<h1>Closing</h1>
<svg>
<path d="M50,50 L100,50 L100,100 Z"
style="stroke: #006666; fill:none;"/>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment