#195: How to Draw a Line with CSS
Stupid simple, right? It is! But it’s fun to think about for a few minutes and count a bunch of different ways we could do it. And what do I mean by a line anyway? We’ll mostly talk about a …
Chris Coyier
on
Articles Tagged
SVG
195 Articles
ztext.js
Super cool project from Bennett Feely! It makes any web type into 3D lettering with a mouseover effect that moves the 3D objects in space. It’s reminiscent of Zdog, but for type. It works its magic by stacking a …
Shared by
Chris Coyier
on
Stroke Text CSS: The Definitive Guide
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 …
Shared by
Chris Coyier
on
SVG Title vs. HTML Title Attribute
You know the title attribute? I can do this:
<div title="The Title"I'm a div with a `title`
</divAnd now if I’m on a device with a mouse pointer and hover the cursor over that element, I get……
Chris Coyier
on
(Updated on )
Creating a Gauge in React
You should really look at everything Amelia does, but I get extra excited about her interactive blog posts. Her latest about creating a gauge with SVG in React is unreal. Just the stuff about understanding viewBox is amazing and that’s …
Chris Coyier
on
SVG, Favicons, and All the Fun Things We Can Do With Them
Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of …
Eric Bailey
on
Fake Code
Here’s a fun little idea from Knut Synstad. You give it the URL of a GitHub Gist and it converts the Gist into grayscale rounded blobs (SVG) that sorta look like code if you squint. Maybe fun for interesting dynamic …
Chris Coyier
on
Creating a Pencil Effect in SVG
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
Shared by
Chris Coyier
on
(Updated on )
Emojis as Favicons
Lea Verou had a dang genius idea to use an emoji as a favicon. The idea only recently possible as browsers have started supporting SVG for favicons. Chuck an emoji inside an SVG <text> element and use that as the …
Chris Coyier
on
(Updated on )
Tools for Optimizing SVG
This is our straight-to-the-point list of SVG optimizing tools across a number of categories. They are all largely based around SVGO, but how you use it depends. There are web apps, desktop apps, apis, and even design tool add-ons.
Chris Coyier
on
(Updated on )
How We Created a Static Site That Generates Tartan Patterns in SVG
Tartan is a patterned cloth that’s typically associated with Scotland, particularly their fashionable kilts. On tartanify.com, we gathered over 5,000 tartan patterns (as SVG and PNG files), taking care to filter out any that have explicit usage restrictions.
The …
Our Learning Partner
Frontend Masters
