)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

Ellipse Path SVG

  1. const ellipse = (cx, cy, rx, ry) => { 
  2.   if (ry == null) ry = rx;
  3.   return `
  4.     M${cx-rx} ${cy}a${rx} ${ry} 
  5.     0 1 0 ${rx*2} 0a${rx},${ry} 
  6.     0 1 0 -${rx*2},0`
  7. }
  8.  
  9. const svg = `
  10. <svg style="overflow:hidden;stroke:black;fill:none">
  11.   <path d="${ellipse(80, 50, 30)}" />
  12.   <path d="${ellipse(80, 120, 60, 20)}" />
  13.   <path d="${ellipse(150, 60, 20, 40)}" />
  14. </svg>`
  15.  
  16. document.body.innerHTML = svg;

Draw an ellipse inside an svg path. I saw this method over on this stackoverflow thread at some point and tweaked it a little bit. Very nice simple solution from user yogi

// javascript // strings // svg // tricks

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}