[{"data":1,"prerenderedAt":244},["ShallowReactive",2],{"project-10384653":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":34,"aspects":35,"strip":41,"post_text":43,"what":44,"said":76,"maker_in_thread":160,"shape":169,"grid":173,"attempts":206,"same_week":207,"maker_shows":37,"maker_hidden":236,"reader_version":237,"card":238},"10384653","Rune.js","Graphic design systems with SVG in the browser or Node.js","title","Show HN: Rune.js – Graphic design systems with SVG in the browser or Node.js","http:\u002F\u002Frunemadsen.github.io\u002Frune.js\u002F","runemadsen.github.io","runemadsen",1444789095,2015,92,17,281,2565,11,"notable","languages","graphics library","library",[24,21,25,26,27],"svg","javascript","node.js","generative design","mixed",-0.043,{"positive":31,"neutral":32,"mixed":33,"critical":32},2,4,0,10,{"design":36,"idea":38,"execution":40},{"positive":33,"critical":37},1,{"positive":33,"critical":39},3,{"positive":37,"critical":33},[37,33,39,33,39,39,37,33,37,33,33,33,37,33,39,42,42],5,null,{"problem":45,"audience":55,"pricing":43,"motivation":60,"time_to_build":43,"stack":64,"openness":73,"stage":74,"team_size":75},{"value":46,"source":47,"evidence":48},"Lets designers and programmers build graphics with SVG using a higher-level API instead of manipulating the DOM directly","maker",[49,52],{"id":50,"by":11,"text":51},"10386060","If you read the about page, I have a very detailed explanation of why I created this project. First of all, I'm using this library as a basis for teaching my class on…",{"id":53,"by":11,"text":54},"10405814","I have to disagree with you on most of the above. You cannot expect students who want to learn how to code to also learn about the DOM and write things like path DOM nodes by…",{"value":56,"source":47,"evidence":57},"Design students and programmers, including the maker's graphic design class",[58,59],{"id":50,"by":11,"text":51},{"id":53,"by":11,"text":54},{"value":61,"source":47,"evidence":62},"Teaching algorithmic graphic design; abstracts away DOM and SVG for students, adds color, scene graph and grid tools",[63],{"id":50,"by":11,"text":51},[65],{"value":66,"source":67,"evidence":68},"JavaScript","commenter",[69],{"id":70,"by":71,"text":72},"10388075","jacobolus","I wasn’t and still am not trying to be rude – it looks like a neat class, the pages at http:\u002F\u002Fprintingcode.runemadsen.com\u002Flecture-intro\u002F are filled with lovely examples, it’s…","open_source","beta","unknown",{"praise":77,"objections":93,"requests":116,"questions":129,"alternatives":144},[78],{"value":79,"source":67,"evidence":80},"Impressive, well-documented open source work",[81,85,89],{"id":82,"by":83,"text":84},"10385381","unfortunateface","The author actually goes into detail about why they created this project on the about page: https:\u002F\u002Frunemadsen.github.io\u002Frune.js\u002Fabout.html On a side note, regardless of the…",{"id":86,"by":87,"text":88},"10385496","kyriakos","great work there.",{"id":90,"by":91,"text":92},"10385845","hundunpao","I love it!",[94,101,105],{"value":95,"source":67,"evidence":96},"Unclear what it adds beyond plain SVG or D3",[97,100],{"id":98,"by":71,"text":99},"10385313","The examples are horribly broken in Safari. Anyway, echoing andrewray, what’s the point of this? It seems no easier than just working with SVG directly. It’s considerably less…",{"id":70,"by":71,"text":72},{"value":102,"source":67,"evidence":103},"Examples broken in Safari",[104],{"id":98,"by":71,"text":99},{"value":106,"source":67,"evidence":107},"No boolean path operations",[108,112],{"id":109,"by":110,"text":111},"10385819","amelius","I want an API where I can intersect or combine paths, and be able to read out the resulting paths.",{"id":113,"by":114,"text":115},"10386436","beardicus","You might be interested in paper.js: http:\u002F\u002Fpaperjs.org\u002F which is an evolution of Scriptographer. It has full support for the usual add, subtract, difference sort of boolean…",[117,122],{"value":118,"source":67,"evidence":119},"Boolean shape operations on paths",[120,121],{"id":109,"by":110,"text":111},{"id":113,"by":114,"text":115},{"value":123,"source":67,"evidence":124},"Text line wrapping",[125],{"id":126,"by":127,"text":128},"10385477","linqables","This looks really interesting. Are you planning to do text as well? Specifically, text with line wrapping?",[130,137],{"value":131,"source":67,"evidence":132},"How to modify existing SVG shapes with the library",[133],{"id":134,"by":135,"text":136},"10385280","andrewray","This seems to take the declarative nature of SVG and make it more imperative, like HTML5 Canvas, even though it ironically uses a virtual DOM implementation under the hood. For…",{"value":138,"source":67,"evidence":139},"Whether other libraries do server-side SVG rendering",[140],{"id":141,"by":142,"text":143},"10385723","bigethan","The server side rendering looks really interesting (I've been getting into SVG for mobile web graphics). Are there other SVG libs that do server side rendering, or is this unique…",[145,149,156],{"value":146,"source":67,"evidence":147},"paper.js",[148],{"id":113,"by":114,"text":115},{"value":150,"source":67,"evidence":151},"React ART",[152],{"id":153,"by":154,"text":155},"10385422","talldan","It's a shame React Art isn't mentioned more (https:\u002F\u002Fgithub.com\u002Freactjs\u002Freact-art). I'm pretty happy with the results from it, and it's a bonus that it works on iOS as well as…",{"value":157,"source":67,"evidence":158},"D3",[159],{"id":98,"by":71,"text":99},{"comments":32,"answered":39,"key":161},[162,165,168],{"id":163,"text":164},"10386052","I have basic text support for now, and will release a Rune.Font plugin next week that supports webfont loading and access to the font vectors. Line wrapping is also on the TODO…",{"id":166,"text":167},"10386065","Thank you!",{"id":50,"text":51},{"commenters":170,"max_depth":32,"maker_replies":32,"first_comment_mins":171,"lifespan_hours":172},12,249,90,[174,176,178,180,181,182,183,185,187,188,190,192,193,194,196,200,203],[134,33,37,175,135,33],"project\u002Fcritical\u002Fdesign",[153,33,33,177,154,33],"other\u002Fneutral\u002Fnone",[126,37,39,179,127,33],"project\u002Fneutral\u002Fidea",[163,37,33,179,11,37],[141,31,39,179,142,33],[109,39,39,179,110,33],[113,39,37,184,114,33],"project\u002Fcritical\u002Fidea",[186,39,33,177,110,33],"10386889",[98,32,37,184,71,33],[82,32,33,189,83,33],"commenter\u002Fpositive\u002Fnone",[166,32,33,191,11,37],"commenter\u002Fneutral\u002Fnone",[50,32,33,179,11,37],[70,32,37,184,71,33],[53,32,33,195,11,37],"commenter\u002Fcritical\u002Fidea",[197,42,39,198,199,33],"10387208","project\u002Fneutral\u002Fnone","simple10",[86,201,42,202,87,33],6,"maker\u002Fpositive\u002Fexecution",[90,204,42,205,91,33],7,"project\u002Fpositive\u002Fnone",[],[208,213,217,221,226,231],{"id":209,"name":210,"points":211,"category":212},"10376468","Exposé",548,"dev_tools",{"id":214,"name":215,"points":216,"category":212},"10355030","Instant Music Downloader",321,{"id":218,"name":219,"points":220,"category":212},"10375154","ureq",146,{"id":222,"name":223,"points":224,"category":225},"10353285","Wriber",128,"productivity",{"id":227,"name":228,"points":229,"category":230},"10378023","Lexika",85,"ai",{"id":232,"name":233,"points":234,"category":235},"10352141","Pocketsquare",76,"web_saas",false,"v2",{"id":239,"name":5,"line":6,"ai":236,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":240,"top":18,"kw":241,"maker":11,"domain":10,"tier":19,"attempts":33,"strip":242,"url":9,"mix":243,"praise":79,"objection":95,"sub":21},10384653,-0.04,[24,21,25,26,27],"10303310100010355",[31,32,33,32],1794036536566]