D3: svg, canvas, path, style: SVG Triangle with Outline

nick3499
1 min readFeb 25, 2017

--

path_tri_outline.html

<svg width="400" height="400" sets (400,400) canvas. path d="M 10 10 L 380 10 L 190 380 Z" indicates SVG’s path mini-language where M 10 10 moves starting point to (x=10, y=10). L 380 10 draws line from (10, 10) to (380,10). L 190 380 draws line from (380,10) to (190,380). Z closes path to complete triangle outline. style="fill:mediumblue;stroke:darkred;stroke-width:10" applies styling to triangle and outline. stroke:darkred applies darkred outline. fill:mediumblue sets the blue inner field to HTML’s mediumblue.

--

--

nick3499
nick3499

Written by nick3499

coder of JavaScript and Python

No responses yet