4 ms·
People should quit trying to make CSS a drawing tool--it is not--and start learning how to use SVG instead or images.
by assimpleaspossi 6mo ago
People should quit trying to make CSS a drawing tool--it is not--and start learning how to use SVG instead or images.
- deleted 6mo ago[deleted]
- echoangle 6mo agoThis could actually be cool for display text like a headline. I don’t think that’s only for images.
- cafebabbe 6mo agoIf you have a lot of "images" with such effects to generate from dynamic text, using SVG makes no sense, is vastly more complex and less flexible than the solution here.
- zarzavat 6mo agoYou don't generate images, you just embed SVG nodes in the DOM. From the browser's perspective SVG and HTML elements are just two different types of element. SVG is not great for text - HTML has more features - but for display text it's OK.
- wbobeirne 6mo agoArt is often made from clever use of things that were not intended to make art. Let them have fun.
- emaro 6mo agoToo late: https://codepen.io/jaysalvat/pen/kazzOj https://codepen.io/jaysalvat/pen/kazzOj
- cdaringe 6mo agoA robust rebuttal. It’s how i prefer all of my images
- assimpleaspossi 6mo agoThe HTML is invalid. <div id="monalisa" />
- afavour 6mo agoThe article literally says "it's not well-suited for production usage" so I don't really see the reason for the objection here. It's an experiment.
- mpalmer 6mo agoI would think that quite a few powerful new ideas have come purely from abusing and bashing around older ideas.
- gblargg 6mo agoProbably writing itself was originally a hack.
- dylan604 6mo agoIt is pretty much the entire hacker ethos. "I have this thing that does something but not what I need, but with some tinkering it now does what I need" or even "I have this thing, but I'm just going to see what else I can make it do whether it is useful or not but solely because I can"
- voidUpdate 6mo agoI'd send you the link to the person who made a 3d renderer in pure CSS, with a very slow render of lara croft, but Cohost shut down
- spartanatreyu 6mo agoI would rather have both working together: My example: https://codepen.io/spartanatreyu/pen/xggjWz https://codepen.io/spartanatreyu/pen/xggjWz ------------------------------------------------ Overall, CSS tends to be the better tool for the job. SVG has better paths and more interesting filters, but it's held back by a few critical issues. 1. A small amount of filters are not hardware accelerated in firefox/servo's webrender engine, which causes them to fallback to software rendering. Usually it just freezes the web page for a second or two while the image software renders before returning to normal performance, but if you try to animate any of the values it locks up the entire page. That basically animated SVGs with filters a no-go. 2. Safari doesn't draw SVGs properly, it has a built-in "performance budget" where it just stops drawing the rest of the SVG if it isn't finished within a split second. Which is fine for something like an icon, but terrible for things like the main feature graphic / background of a page. Meanwhile CSS keeps getting better. Its filters are improving (filter, mix-blend-mode, backdrop-filter), and its animations are improving too (keyframes + animation, transition, offset, custom-properties + @property's syntax, scroll-timeline, cross-document view transitions). The two things that CSS is worse at than SVG are: 1. Paths (in which case, you can just put SVG paths into your page and style them with CSS for anything more complex than a static stroke/fill anyway) 2. Generating textures (which you can't guarantee look consistent thanks to Safari, so you're usually better off sending a hand optimized texture over the wire anyway)