Hacker News new | past | comments | ask | show | jobs | submit login

When I started learning React, I realised a dream of mine could finally come true: a proper Celtic Knotwork generator. Uses SVG and React together in harmony.


Pardon my ignorance, but aren't these patterns just composed of certain tiles in rows and columns? This is something you can do equally well with raster graphics, so what's the gain of using SVG here?

I tried that on an earlier version, but there's complications ;)

The "double corded" style paints one side of a cord red and the other blue. The problem comes when the pattern changes what side is which. You can play around with it to see - put in some breakpoints and you'll see the "sides" switch on some cells. This can't be done with tiles.

The tile manipulation is actually no simpler than drawing SVG, because the hard bit is calculating the entry and exit points for each tertiary cell. And SVG produces better results :)

I also plan on doing some more stuff with it someday - like deforming the grid by moving the corners. This is pretty simple with SVG but would be really hard with tiles.

Scalable vector output?

Awesome. Is the code for this open source? (I'm just afraid the world could lose this should you decide to take it down some day!)

Not yet - it's on github (the site runs off Github pages) but I need to prune the repo of private keys before I open-source it. Given the reaction here, I'll try and open it over the weekend :)

That's delightful, thank you for posting it!

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact