[{"data":1,"prerenderedAt":542},["ShallowReactive",2],{"project-33518845":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":35,"aspects":36,"strip":48,"post_text":50,"what":51,"said":99,"maker_in_thread":182,"shape":192,"grid":196,"attempts":502,"same_week":503,"maker_shows":33,"maker_hidden":534,"reader_version":535,"card":536},"33518845","Svija Vibe","All-SVG websites with complex animation","title","Show HN: All-SVG websites with complex animation","https:\u002F\u002Fsvija.love\u002Fvibe","svija.love","AndrewSwift",1667915103,2022,188,121,311,2570,13,"notable","dev_tools","svg animation tooling","web_app",[24,25,26,27],"svg animation","gsap","adobe illustrator","svg websites","roasted",-0.367,{"positive":31,"neutral":32,"mixed":33,"critical":34},4,15,2,29,50,{"idea":37,"design":40,"execution":43,"docs":45,"performance":47},{"positive":38,"critical":39},0,7,{"positive":41,"critical":42},3,9,{"positive":38,"critical":44},6,{"positive":38,"critical":46},1,{"positive":38,"critical":46},[41,46,38,38,41,46,46,41,46,46,46,33,46,38,46,38,46,46,46,38,38,41,49,46,41,41,46,49,46,46,46,46,46,46,46,46,38,46,46,46],5,"I created a system for building SVG-only websites called Svija.  But, though the content was nice, the sites felt too static — a bit flat and lifeless. Even a basic HTML website has mouseover effects, but SVG doesn't have them for free the way HTML does.\n\nI wanted to find an easy way to recreate mouseover functionality in SVG. For my first try, I labeled objects in Adobe Illustrator:\n\n\n```\n  • linkSomeName: an invisible link \u003Crect> (over the link text)\n  • mouseoverSomeName: a \u003Cg> mouseover decoration (usually bold or colored text, or an underline), initially hidden\n\n```\n\nThe two objects are c",{"problem":52,"audience":58,"pricing":64,"motivation":68,"time_to_build":72,"stack":73,"openness":96,"stage":97,"team_size":98},{"value":53,"source":54,"evidence":55},"SVG-only websites lack mouseover and complex animation effects","maker",[56],{"id":57},"post",{"value":59,"source":54,"evidence":60},"Designers building SVG-based websites",[61],{"id":62,"by":11,"text":63},"33528457","Our plan is not to do responsive design — Svija is really meant for designers, and for any content that requires real design, there will need to be separate versions for mobile…",{"value":65,"source":54,"evidence":66},"Free, requires an account (Mac only for now)",[67],{"id":57},{"value":69,"source":54,"evidence":70},"Make SVG pages feel less static by adding mouseover and animation",[71],{"id":57},null,[74,78,82,86,92],{"value":75,"source":54,"evidence":76},"SVG",[77],{"id":57},{"value":79,"source":54,"evidence":80},"GSAP",[81],{"id":57},{"value":83,"source":54,"evidence":84},"Adobe Illustrator",[85],{"id":57},{"value":87,"source":54,"evidence":88},"Django",[89],{"id":90,"by":11,"text":91},"33524355","I would love to add interactivity, and there are also a lot of SVG effects that we haven't even touched. I need to clean up the animation programming and make it more…",{"value":93,"source":54,"evidence":94},"NginX",[95],{"id":90,"by":11,"text":91},"free","beta","unknown",{"praise":100,"objections":108,"requests":147,"questions":161,"alternatives":168},[101],{"value":102,"source":103,"evidence":104},"Interesting idea for animation via named objects","commenter",[105],{"id":106,"by":11,"text":107},"33521338","Thank you. I really poured my heart and soul into this project, and I think that the idea of creating animation by naming objects in a graphical interface has a lot of potential.…",[109,120,128,137],{"value":110,"source":103,"evidence":111},"Not accessible to screen reader users",[112,116],{"id":113,"by":114,"text":115},"33520369","warent","There's no way this is accessible right? Imagine someone with a screen reader opening this website and seeing nothing",{"id":117,"by":118,"text":119},"33522378","teddyh","I’d honestly prefer an inline PDF. At least then I would probably be able to print it. This thing has all the drawbacks of a Flash-only site, except instead of just requiring a…",{"value":121,"source":103,"evidence":122},"Requires Chrome or JavaScript; breaks in other browsers and without JS",[123,124],{"id":117,"by":118,"text":119},{"id":125,"by":126,"text":127},"33520389","zagrebian","That web page looks… interesting without JavaScript https:\u002F\u002Fimgur.com\u002FISKnuhT",{"value":129,"source":103,"evidence":130},"Not responsive; zoom and mobile bugs",[131,134],{"id":132,"by":11,"text":133},"33532977","(OP here) The user can support whatever screen\u002Fwindow sizes they want, and set increments as they wish. I just do mobile and desktop because I'm mainly doing dev work and want to…",{"id":135,"by":11,"text":136},"33533158","Are you on Android or iPhone? Which model? Which browser? I assume you are using the phone in portrait mode. This seems like an actual bug and I would like to try to reproduce it…",{"value":138,"source":103,"evidence":139},"Text not searchable or semantic as SVG",[140,144],{"id":141,"by":142,"text":143},"33525410","Ptchd","The text is not SVG...",{"id":145,"by":11,"text":146},"33543685","If it was JPG or PNG, you could not select the text, embed links, or reuse parts of the page. And nobody could copy the source code to make the web a better place. When someone…",[148,155],{"value":149,"source":103,"evidence":150},"Accessibility support",[151,152],{"id":113,"by":114,"text":115},{"id":153,"by":11,"text":154},"33521230","See my reply to whylo: I agree wholeheartedly that accessibility is important, but I can't devote engineering resources to it until I have a product that's compelling in its own…",{"value":156,"source":103,"evidence":157},"Print support",[158],{"id":159,"by":11,"text":160},"33533432","If you can be specific about what is broken in Firefox, I would be grateful. I have tested it on both the Windows and Mac versions of Firefox and didn't see any bugs. I did…",[162],{"value":163,"source":103,"evidence":164},"Does it support lighting effects?",[165],{"id":166,"by":167,"text":163},"33524302","thebeastie",[169,176],{"value":170,"source":103,"evidence":171},"Flash",[172],{"id":173,"by":174,"text":175},"33520425","nashashmi","This is like the successor to flash.",{"value":177,"source":54,"evidence":178},"Inkscape",[179],{"id":180,"by":11,"text":181},"33528359","We would love that. The problem is that only Illustrator leaves text as text and images as images — all the others except Inkscape convert text and images into data that's no…",{"comments":183,"answered":42,"key":184},40,[185,188,189],{"id":186,"text":187},"33521214","One of the things I like about SVG is that it's the same everywhere. You can look at our site on any major browser and it's exactly the same down to the pixel. Sure there are…",{"id":62,"text":63},{"id":190,"text":191},"33528470","Svija SVG's are embedded in HTML — it's necessary to get the page to resize correctly. We would like to integrate HTML elements wherever possible to display text. This would…",{"commenters":193,"max_depth":44,"maker_replies":183,"first_comment_mins":194,"lifespan_hours":195},53,123,215,[197,201,203,207,211,213,217,220,223,225,227,230,231,235,238,241,244,246,249,253,257,261,264,267,270,273,275,278,281,283,285,287,289,291,294,296,300,303,305,307,309,311,312,315,318,320,322,324,325,327,329,332,335,337,340,343,345,348,351,354,356,359,362,364,367,369,373,374,378,380,384,385,389,391,394,397,399,401,404,405,407,412,413,416,418,421,424,427,429,431,432,434,436,439,441,443,445,447,448,450,452,454,457,459,461,463,466,468,471,473,475,477,479,481,485,487,488,492,496,498,500],[198,38,41,199,200,38],"33520693","project\u002Fmixed\u002Fidea","ericmcer",[186,38,38,202,11,46],"maker\u002Fneutral\u002Fnone",[204,38,38,205,206,38],"33521542","commenter\u002Fneutral\u002Fexecution","xtian",[208,38,46,209,210,38],"33526636","project\u002Fcritical\u002Fdesign","danielheath",[62,38,38,212,11,46],"project\u002Fneutral\u002Fdesign",[214,38,38,215,216,38],"33521806","commenter\u002Fneutral\u002Fnone","eithed",[218,38,38,215,219,38],"33524027","pcthrowaway",[221,38,38,215,222,38],"33524124","itslennysfault",[224,38,38,215,219,38],"33524318",[226,38,38,215,216,38],"33637933",[228,38,38,215,229,38],"33526796","Sephr",[190,38,38,212,11,46],[232,46,49,233,234,38],"33522720","project\u002Fpositive\u002Fdesign","mNovak",[236,46,38,237,11,46],"33528422","maker\u002Fpositive\u002Fnone",[239,33,46,209,240,38],"33526873","markisus",[242,33,46,209,243,38],"33526916","chii",[245,33,38,212,11,46],"33528414",[247,33,46,209,248,38],"33528648","ChymeraXYZ",[250,41,46,251,252,38],"33520343","project\u002Fcritical\u002Fexecution","kevmo314",[254,41,38,255,256,38],"33520622","other\u002Fneutral\u002Fnone","danielvaughn",[258,41,41,259,260,38],"33520903","project\u002Fneutral\u002Fexecution","jancsika",[262,41,41,259,263,38],"33525126","mhink",[265,41,38,205,266,38],"33526751","gernb",[268,41,38,215,269,38],"33527053","iudqnolq",[271,41,41,259,272,38],"33520965","planede",[274,41,38,215,260,38],"33524817",[276,31,46,209,277,38],"33523628","genezeta",[279,31,38,280,11,46],"33524404","maker\u002Fneutral\u002Fdesign",[282,31,46,209,277,38],"33524494",[284,31,38,212,11,46],"33528400",[286,31,46,209,277,38],"33528890",[288,31,38,259,11,46],"33532283",[290,31,38,212,11,46],"33532799",[292,31,41,212,293,38],"33524537","esperent",[113,49,46,295,114,38],"project\u002Fcritical\u002Fnone",[297,49,41,298,299,38],"33520680","project\u002Fneutral\u002Fnone","Tagbert",[301,49,46,295,302,38],"33520714","whylo",[304,49,41,298,299,38],"33542275",[306,49,38,259,11,46],"33543602",[308,49,38,215,299,38],"33575420",[310,49,38,237,11,46],"33587460",[153,49,38,202,11,46],[313,44,46,209,314,38],"33520709","nulld3v",[316,44,38,215,317,38],"33526050","marginalia_nu",[319,44,41,212,314,38],"33526411",[321,44,38,215,314,38],"33527138",[323,44,38,212,11,46],"33533075",[132,44,38,259,11,46],[326,39,46,295,302,38],"33520364",[328,39,38,202,11,46],"33521161",[330,39,46,331,302,38],"33521677","project\u002Fcritical\u002Fdocs",[333,39,38,215,334,38],"33523014","blooalien",[336,39,38,202,11,46],"33524324",[338,39,46,295,339,38],"33522900","kalensh",[341,39,46,295,342,38],"33524486","Lorin",[173,344,41,298,174,38],8,[346,344,38,255,347,38],"33520644","excitednumber",[349,344,38,255,350,38],"33520675","sandreas",[352,344,38,255,353,38],"33527891","1attice",[355,344,38,298,11,46],"33528385",[357,344,38,358,11,46],"33521316","project\u002Fpositive\u002Fidea",[360,344,38,215,361,38],"33521582","adamredwoods",[363,344,38,215,11,46],"33521690",[365,42,49,233,366,38],"33529505","dusted",[368,42,38,215,11,46],"33533102",[370,371,46,251,372,38],"33522240",10,"ouija",[135,371,38,202,11,46],[375,376,49,233,377,38],"33527219",11,"markmiro",[379,376,38,215,11,46],"33528387",[381,382,41,298,383,38],"33524383",12,"webmobdev",[180,382,38,298,11,46],[386,18,46,387,388,38],"33526981","project\u002Fcritical\u002Fperformance","mixmastamyk",[390,18,38,202,11,46],"33533224",[392,18,41,393,388,38],"33534357","project\u002Fneutral\u002Fperformance",[395,18,38,215,396,38],"33536597","ChuckNorris89",[398,18,38,215,11,46],"33538004",[166,400,41,212,167,38],14,[402,400,38,403,11,46],"33528383","project\u002Fneutral\u002Fidea",[141,32,46,251,142,38],[406,32,38,259,11,46],"33528367",[408,409,38,410,411,38],"33521244",16,"other\u002Fpositive\u002Fnone","airstrike",[106,409,38,358,11,46],[414,409,49,237,415,38],"33521562","ghostbrainalpha",[417,409,38,255,11,46],"33521706",[419,409,38,255,420,38],"33521653","pvg",[422,409,41,423,314,38],"33521711","project\u002Fmixed\u002Fdesign",[117,425,46,426,118,38],17,"project\u002Fcritical\u002Fidea",[428,425,38,215,174,38],"33523392",[430,425,46,426,118,38],"33529425",[145,425,38,403,11,46],[433,425,38,215,118,38],"33576162",[435,425,38,215,11,46],"33587514",[437,425,46,251,438,38],"33531405","extra88",[440,425,46,251,118,38],"33531919",[442,425,38,215,438,38],"33532372",[444,425,41,212,118,38],"33540499",[446,425,38,212,11,46],"33543699",[159,425,38,298,11,46],[449,425,46,426,118,38],"33540491",[451,425,38,215,11,46],"33543636",[453,425,46,426,118,38],"33545384",[455,425,38,456,11,46],"33547843","commenter\u002Fpositive\u002Fnone",[458,425,38,215,11,46],"33543657",[460,425,46,426,118,38],"33545351",[125,462,41,212,126,38],18,[464,462,46,209,465,38],"33520612","sibit",[467,462,38,255,420,38],"33521587",[469,462,38,215,470,38],"33522313","nr2x",[472,462,38,255,420,38],"33522510",[474,462,38,255,126,38],"33524835",[476,462,38,255,420,38],"33525108",[478,462,38,255,470,38],"33522298",[480,462,38,259,11,46],"33533453",[482,483,46,426,484,38],"33524133",19,"ruuda",[486,483,41,403,484,38],"33524221",[90,483,38,403,11,46],[489,490,46,426,491,38],"33522630",20,"tylerfoster",[493,494,46,251,495,38],"33520256",21,"Springtime",[497,494,38,202,11,46],"33520366",[499,494,41,259,495,38],"33520605",[501,494,38,280,11,46],"33521263",[],[504,509,514,519,524,529],{"id":505,"name":506,"points":507,"category":508},"33518320","Cozo",425,"data",{"id":510,"name":511,"points":512,"category":513},"33451148","Sprig",274,"games",{"id":515,"name":516,"points":517,"category":518},"33501177","textshader.com",260,"creative",{"id":520,"name":521,"points":522,"category":523},"33464492","purplehoisin.com",197,"hardware",{"id":525,"name":526,"points":527,"category":528},"33494221","Feep! search",182,"web_saas",{"id":530,"name":531,"points":532,"category":533},"33475391","Reveddit.com",180,"infrastructure",false,"v2",{"id":537,"name":5,"line":6,"ai":534,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":538,"top":18,"kw":539,"maker":11,"domain":10,"tier":19,"attempts":38,"strip":540,"url":9,"mix":541,"praise":102,"objection":110,"sub":21},33518845,-0.37,[24,25,26,27],"3100311311121010111003513315111111110111",[31,32,33,34],1793991054438]