Skip to content

Instantly share code, notes, and snippets.

@mizchi
Last active August 25, 2021 07:05
Show Gist options
  • Save mizchi/9305548 to your computer and use it in GitHub Desktop.
Save mizchi/9305548 to your computer and use it in GitHub Desktop.
//- templated by jade
svg(width=640 height=480 style="background-color:grey;")
circle(
cx=30 cy=30
r=25
stroke="grey" stroke-width=1
fill="wheat")
rect(
width=50 height=50
x=60 y=10
style="fill:red;stroke:black;stroke-width:5;opacity:0.5")
ellipse(
cx=170 cy=50
rx=40 ry=50
style="fill:yellow;stroke:purple;stroke-width:2")
line(
x1=0 y1=100
x2=200 y2=120
style="stroke:rgb(255,0,0);stroke-width:2")
polyline(
points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3")
polygon(
points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1")
//- text
text(x="0" y="205" fill="green") DVD! DVD!
//- multiline text
text(x="0" y="0" fill="green")
tspan(x="10" y="45") uhe
tspan(x="10" y="65") aha
//- embed html
foreignObject(class="node" x="300" y="22" width="200" height="300")
body
//- document.querySelector(query) is reachable here!
div.inner-svg innner div
//- group
g(style="-webkit-transform: matrix(1,-0.2,0,1,0,0);")
circle(cx=190 cy=80 r=25 stroke="black" fill="wheat")
circle(cx=220 cy=80 r=25 stroke="black" fill="wheat")
//- nested svg node
svg(x=200 y=200)
rect(
x=0 y=0
width=200 height=200
style="fill:red;stroke:black;stroke-width:1;opacity:0.5")
//- M = moveto
//- L = lineto
//- H = horizontal lineto
//- V = vertical lineto
//- C = curveto
//- S = smooth curveto
//- Q = quadratic Bézier curve
//- T = smooth quadratic Bézier curveto
//- A = elliptical Arc
//- Z = closepath
path(
d="M250 0 L255 100 L265 100 Z"
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment