4 ms·
Multi-stroke text effect in CSS
- nicbou 5mo agoNeat! It's unfortunate that the rendering is so different between browsers. Have you tried the same thing with shadows? They can also be stacked, I believe.
- LoganDark 5mo agoShadows have to be spread in a circle to achieve an outline, so the general shape will converge to roughly a circle, barely following the shape of the text.
- shutterkiller 5mo ago[flagged]
- AlecSchueler 5mo agoWhat's up with the bot accounts that just vaguely describe the article? Is it for karma farming accounts to sell on? I'm not opposed to bot accounts inherently but the stuff they so often post is just mind numbing to encounter, it feels like a little bit of my life has been stolen every time I get to the end of such a paragraph.
- junofan 5mo agoLook up “generative engine optimization”
- svpernatvral 5mo agoWhy are you not opposed to bot accounts? It is a terrible thing. People come here to read other people.
- HughParry 5mo agoI wonder why the firefox CSS rendering engine prefers to smooth out. Looks like a dramatically different implementation, but maybe that's just because it's an edge case of rendering
- voidUpdate 5mo agofirefox looks like an SDF (shortest distance to the object), I'm not sure what the chrome one is...
- danbruc 5mo agoI would assume they are just drawing the outline, not performing any distance calculations, and the differences are just a result of different linejoin choices. [1] [1] https://www.w3.org/TR/fill-stroke-3/#stroke-linejoin https://www.w3.org/TR/fill-stroke-3/#stroke-linejoin
- voidUpdate 5mo agoI'd imagine that at some point during the text rendering process, they have to generate an SDF of the text they want to render (it's what I did when I wanted to manually render text anyway). If they do, then they can generate the extra text-width lines basically for free, just fill everything with distance less than the property. I may be entirely wrong though, I don't know in detail how browsers render stuff
- zokier 5mo agoWhile I don't entirely love the rounding effect of firefox, I feel Chrome interpretation is just wrong in creating spurious spikes. Intuitively for the asterisk shape I'd expect the outline to go towards a plain hexagon, something that neither browser accomplishes.
- npodbielski 5mo agoLook at V in Love. It looks like bug in Chrome.
- 5mo ago
- assimpleaspossi 5mo agoPeople should quit trying to make CSS a drawing tool--it is not--and start learning how to use SVG instead or images.
- deleted 5mo ago[deleted]
- echoangle 5mo agoThis could actually be cool for display text like a headline. I don’t think that’s only for images.
- cafebabbe 5mo 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 5mo 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 5mo agoArt is often made from clever use of things that were not intended to make art. Let them have fun.
- emaro 5mo agoToo late: https://codepen.io/jaysalvat/pen/kazzOj https://codepen.io/jaysalvat/pen/kazzOj
- cdaringe 5mo agoA robust rebuttal. It’s how i prefer all of my images
- deleted 5mo ago[deleted]
- tiffanyh 5mo agoOT: really love the design of this blog. Simple, clear and content first.
- big_toast 5mo agoYa! So many posts with clear presentations of css/svg/canvas. The Daily Sketch series or 'CSS Animation with offset-path' are equally fun.
- vjay15 5mo agoThis is so freaking cool
- jacktu 5mo ago[flagged]
- spankalee 5mo agoThis is made with (and by the author of) <css-doodle>, a web component that lets you put the CSS variant used in this blog inline into your HTML, like so: <script src="https://esm.sh/css-doodle/css-doodle.min.js?raw"></script> <css-doodle> @grid: 15 / 90%; border-radius: 50%; background: hsl(@t(/20), 70%, 60%); scale: sin(@atan2(@dx, @dy) + @ts); </css-doodle> No JS needed except for loading the definition of the <css-doodle> component. Works in plain HTML, Markdown, frameworks, etc. https://css-doodle.com/ https://css-doodle.com/
- port11 5mo agoThanks for the explanation. I’ve moved away from frontend work in 2018, and I really have no idea what CSS can do anymore! So much of the CSS in this page looks cryptic to me. Kudos to the author for posting something cool and new in the age of standardised styles.
- spankalee 5mo agocss-doodle's syntax has a lot of non-standard-CSS stuff in it. All the @ things are extensions.
- deleted 5mo ago[deleted]
- joeframbach 5mo agoWhen I modified your fiddle to use the Apple logo and colors, the first ring is eating part of the apple. The top of the apple is cut off. Any idea why that is? --c: #5EBD3E,#FFB900,#F78200,#E23838,#973999,#009CDF; @content: '';
- coneonthefloor 5mo agoFirst thing I thought to do was add an emoji to the content. But it just shows the unknown char rectangle. I was hoping for magic, I guess.
- asibahi 5mo agoIt works if you use Noto Emoji as the font.
- herpdyderp 5mo agoAn emoji rendered for me but not any of the outline stuff, just a bare emoji.
- eptityri 5mo agoI just found out about https://css-doodle.com https://css-doodle.com after reading that. A few months back, I was doing similar things with the HTML Canvas API. I didn’t know I could do these kinds of fun little things with CSS as well. Love that.
- nntwozz 5mo agoEat your heart out Adobe Flash.
- Velocifyer 5mo agoI wonder what is the best way to do double stroked text without using fancy Unicode characters while still displaying what the font recommends. I currently use fancy characters on [my blog](https://blog.velocifyer.com/ https://blog.velocifyer.com/), but that harms search results. I am in the processes of migrating my blog to 11ty (from manual HTML) and I want to improve my blog at the same time. PS: Please give me comments on the current design of the blog.