Search
With Just 0.0004% of Bitcoin’s Hashpower, Solo Miner’s 2 PH/S Effort Secures Block Reward
27.11.2023
On November 26, 2023, a stroke of remarkable luck befell a solo miner when they discovered block 818,588, verifying a total of 4,193 transactions. This achievement garnered the miner a total of 6.887 BTC, inclusive of the 6.25 BTC subsidy and transaction fees. Solo Miner’s Slim Odds Pay Off:...
How stroke-dasharray Patterns Work
15.7.2022
Say you have a line in SVG:
<svg<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" /</svg
You can use the stroke-dasharray property in CSS to make dashes:
line {
stroke-dasharray: 5;
}
That 5 value is a relative unit based …
How stroke-dasharray Patterns...
Mastering SVG’s stroke-miterlimit Attribute
24.5.2022
So, SVG has this stroke-miterlimit presentation attribute. You’ve probably seen it when exporting an SVG from a graphic editor program, or perhaps you find out you could remove it without noticing any change to the visual appearance.
After a good …
Mastering SVG’s stroke-miterlimit...
Libraries for SVG Drawing Animations
11.11.2020
In 2013, Jake Archibald introduced this cool trick of animating an SVG path to look like it’s drawing itself. It’s 2020 now, and the trick is still popular. I’ve seen it on a lot of websites I’ve visited recently. I, too, feature an animated SVG loader on my website using one of the libraries I’ll...
How to Get Handwriting Animation With Irregular SVG Strokes
11.9.2020
I wanted to do a handwriting animation for calligraphy fonts — the kind where the words animate like they are being written by an invisible pen. Because calligraphy fonts have uneven stroke widths (they actually aren’t even strokes in terms of SVG), it was near impossible to do this sort of thing...
Stroke Text CSS: The Definitive Guide
4.9.2020
Whenever I think of stroked text on the web I think: nope.
There is -webkit-text-stroke in CSS for it, but it places that stroke in the middle of the vector outline of the characters, absolutely ensuring that the character doesn’t look right. Just look at this in Chrome or Safari. Gross....
Line-Animated Hamburger Menu
26.6.2020
This kind of SVG + CSS animation trickery is catnip to me. Mikael Ainalem shares how to draw a hamburger icon (the “three lines” thing you’re well familiar with), but then animate it in a way that is surprising and fun by controlling the SVG properties in CSS.
CodePen Embed...
Creating a Pencil Effect in SVG
28.3.2020
Scott Turner, who has an entire blog "Exploring procedural generation and display of fantasy maps", gets into why vector graphics seems on these surface why it would be bad for the look of a pencil stroke:
Something like this pencil stroke would require many tens of thousands of different...
A Trick That Makes Drawing SVG Lines Way Easier
14.1.2020
When drawing lines with SVG, you often have a <path> element with a stroke. You set a stroke-dasharray that is as long as the path itself, as well as a stroke-offset that extends so far that you that it's initially hidden. Then you animate the stroke-offset back to 0 so you can watch...
A CSS Tribute to SVG
31.12.2019
This demo from Jérémie Patonnier is incredible. Make sure to look at it in Firefox because some Chrome bug apparently prevents the entire thing from working.
The big idea is that the entire demo is one <rect> element. That's it. It is duplicated with <use> elements when needed,...
Dark Mode Favicons
4.12.2019
Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. <link rel="icon" href="/icon.svg">). And you can embed CSS within an SVG with a <style> element. That CSS can use a perfers-color-sceme media query, and as a result, a favicon that supports...
iconsvg.xyz
25.2.2019
There is a lot to like about Gaddafi Rusli's ICONSVG.
It provides inline <svg>, which is the most generically useful way to deliver them, and probably how they should be used anyway. Each icon is a tiny amount of SVG and I'd bet they were all hand-golfed.
They are all stroke-based, so they...
Animate Calligraphy with SVG
22.6.2018
From time to time at Stackoverflow, the question pops up whether there is an equivalent to the stroke-dashoffset technique for animating the SVG stroke that works for the fill attribute. But upon closer inspection, what the questions are really trying to ask is something like this:
I have something...