D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
aaizemberg
Full window
Github gist
SVG lines with transform/rotate
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SVG lines with transform/rotate</title> </head> <body> <svg width="200" height="200"> <rect x="1" y="1" width="199" height="199" fill="none" stroke="grey" stroke-width="1" /> <g stroke="steelblue" stroke-width="12" stroke-linecap="round"> <line x1="100" y1="100" x2="150" y2="100" transform="rotate(0 100 100)" /> <line x1="100" y1="100" x2="150" y2="100" transform="rotate(180 100 100)" /> <line x1="100" y1="100" x2="150" y2="100" transform="rotate(45 100 100)" /> <line x1="100" y1="100" x2="150" y2="100" transform="rotate(-45 100 100)" /> <line x1="100" y1="100" x2="150" y2="100" transform="rotate(90 100 100)" /> <line x1="100" y1="100" x2="150" y2="100" transform="rotate(-90 100 100)" /> <line x1="100" y1="100" x2="150" y2="100" transform="rotate(135 100 100)" /> <line x1="100" y1="100" x2="150" y2="100" transform="rotate(-135 100 100)" /> </g> </svg> </body> </html>