Search

Nalezeno "stroke": 23

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,...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace