@brnnbrn, Brenna O'Brien
Everything is relative to the viewBox. viewBox Rules Everything Around Me! (V.R.E.A.M!)
_Editorialized <text>
: allows you to have huge display type that's completely responsive.
Curved text: Create a path, and then curve type to that path.
: like SVG variables.
Fancy Fills: SVG has its own gradient syntax. Sweet! Add it to a <def>
, and literally anything you want can have a gradient. Same with having images as background colors!
: Turns any SVG element into a fill. Most fun with images, because you can fill anything with gifs.
: they need a width and height. If not they'll disappear :(
preserveAspectRatio
: It can fill fill shapes automatically if you get the values right.
Editorialized text + gradients = Gradient text for all the browsers!
Editorialize text + gif fill = Fill text with gifs! AGH! "I don't know what you would do with that on a production website, but I hope one of you finds a use case."
: like a cookie cutter.
clipPath
: stamps out with hard edges. With
s, you can fade out, like if you had a gradient.
Filter Effects: You can have blurred backgrounds with SVG filters.
SVG Instagram!: you can combine filters (feTurbulence
for noise, feComponentTransfer
for RGB channel adjustments, feGaussianBlur
) to get rad Instagram filters. Whoo!
SVGs that draw themselves: You can have beautiful line art that draw themselves, like Vox's playstation that drew itself: long stroke-dasharray
+ animated stroke-dashoffset
. That's gorgeous.
<animate>
with CSS & JS?Er, normally that's way better, BUT:
tweans! Morphing Quarters A path'sd attribute.
Relevant: PS4 Review from Polygon, XBox One Review