The lsys function for setup, iter for l-sys commands, render for results.
var tg =svg.lsys(1024,1024).attr({stroke:"#000","stroke-width":.5,fill:"#fff"});
tg.iter("F", {F: "F<G<<G>F>>FF>G<", G: ">F<GG<<G<F>>F>G"},4,4,1/6);
//console.log(tg);
tg.render(1);
svg.lsys( width, height )
.iter( start, L-System rules, no. of iterations, length of forward, angle in radians)
.render( force )
Forward with pen down.
Forward with pen up.
Right turn.
Left turn.
Push turtle position.
Pop turtle position.
var tg =svg.lsys(1024,1024).attr({stroke:"#000","stroke-width":.5,fill:"#fff"});
tg.iter("F<G<G", {F: "F<G>F>G<F", G: "GG"},6,4,1/3);
//console.log(tg);
tg.render(1);
var tg =svg.lsys(1024,1024).attr({stroke:"#000","stroke-width":.5,fill:"#fff"});
tg.iter("XYXYXYX>XYXYXYX>XYXYXYX>XYXYXYX", {F: "", X: "FX>FX>FXFY<FY<",Y: ">FX>FXFY<FY<FY"},3,4,1/4);
//console.log(tg);
tg.render(1);
var tg =svg.lsys(1024,1024).attr({stroke:"#000","stroke-width":.5,fill:"#fff"});
tg.iter("FX", {F: "", X: "X<YF<",Y: ">FX>Y"},14,4,1/4);
//console.log(tg);
tg.render(1);
var tg =svg.lsys(1024,1024).attr({stroke:"#000","stroke-width":.5,fill:"#fff"});
tg.iter("F>>F>>F", {F: "F<F>>F<F", X: "FF"},5,4,1/6);
//console.log(tg);
tg.render(1);
var tg =svg.lsys(1024,1024).attr({stroke:"#000","stroke-width":.5,fill:"#fff"});
tg.iter("X", {Y: ">XF<YFY<FX>", X: "<YF>XFX>FY<"},6,4,1/4);
//console.log(tg);
tg.render(1);
tg.iter("<90F", {F: "F>F<F<F>F"},4,5,1/4);
tg.iter(">F", {F: ">G<F<G>", G:"<F>G>F<"},6,5,1/6);
// Moore curve https://en.wikipedia.org/wiki/Moore_curve
tg.iter("LFL>F>LFL", {L: "<RF>LFL>FR<", R: ">LF<RFR<FL>"},4,4,1/4);
tg.iter("F", {F: ">F<<F>"},10,4,1/8);
tg.iter("F", {F: "F<F>>F<F"},6,4,1/4.4);