Note: This section of the site is under heavy construction, tread carefully.

Bookmarks tagged with “svg”

67 bookmarks by garrettc


Heazy SVG Creator

SVG creator with waves, bubbles, and other shapes.

Bookmarked on #


A complete guide to using CSS filters with SVGs

“In this post, we’re going to learn about a unique and powerful set of CSS tools, SVG filters, to improve visual aspects of a website.”

Bookmarked on #


SVG spinners

A collection of 24 x 24 dp SVG spinners.

Bookmarked on #


SVG Loaders

Loading icons and small animations built with pure SVG.

Bookmarked on #


SVG Icons Library

The Simple and Definitive hand-crafted SVG Icons Library.

Bookmarked on #


SVGcode

Convert raster images to SVG vector graphics

Bookmarked on #


Grainy Gradients | CSS-Tricks

"In this article, we’ll generate colorful noise to add texture to a gradient with only a small amount of CSS and SVG."

Bookmarked on #


Gradient, Pattern, and Dither Generator

"Tools for making the websites fast, accessible, expressive, and green."

Bookmarked on #


Avatar generator playground

Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.

Bookmarked on #


Free “do wtf you want with” pixel-perfect icons

Free, “do wtf you want with” pixel-perfect icons. New icons added every week.

Bookmarked on #


Swipey image grids.

SVG isn't just useful for illustrative animation. It's hella handy for UI too.

Bookmarked on #


Blobs - Generate beautiful blob shapes for web and flutter apps

Customizable blobs as SVG and Flutter Widget. Create random or fixed blobs, loop, animate, clip them with ease

Bookmarked on #


SVG Path Visualizer

What do the letters and numbers in a path mean.

Bookmarked on #



Create Customizable, Hi-Def, and Scalable Backgrounds

SVG Backgrounds hosts a collection of customizable SVG-based repeating patterns and backgrounds for websites and blogs.

Bookmarked on #




Scaling SVG Elements

Interactive demo of how viewbox works.

Bookmarked on #



SVG symbol viewer

An online, no-upload drag-and-drop SVG file symbol extractor and viewer.

Bookmarked on #


Accessible Icon Buttons

"There is a handful of ways that an icon button can be implemented accessibly. This article is an overview of them all."

Bookmarked on #


Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!

"Let’s have a look at how we can create a row of links that sorta run into each other with a chevron-like shape and notch on each block like you might see in a hierarchical breadcrumb navigation. You’ve probably seen this pattern a lot. It comes up often in things like multi-step forms and site breadcrumbs. For our purposes we’re going to call these “ribbons" so we know what we’re referring to as we go."

Bookmarked on #



SVG Tracer

A cool thing made with Glitch

Bookmarked on #


Cool Backgrounds

Explore a beautifully curated selection of cool backgrounds that you can add to blogs, websites, or as desktop and phone wallpapers.

Bookmarked on #


Trianglify.io

A tool for generating low poly triangle patterns that can be used as wallpapers and website assets.

Bookmarked on #


Hero Patterns

A collection of repeatable SVG background patterns for you to use on your web projects.

Bookmarked on #


Making Sense of Clip Path

"We can create many different shapes from circles, ellipsis, polygons. Creativity is the only limit."

Bookmarked on #


The Many Ways to Change an SVG Fill on Hover (and When to Use Them)

"SVG is a great format for icons. Vector formats look crisp and razor sharp, no matter the size or device — and we get tons of design control when using them inline. SVG also gives us another powerful feature: the ability to manipulate their properties with CSS. As a result, we can make quick and simple interactions where it used to take crafty CSS tricks or swapping out entire image files. Those interactions include changing color on hover states. It sounds like such a straightforward thing here in 2019, but there are actually a few totally valid ways to go about it — which only demonstrates the awesome powers of SVG more."

Bookmarked on #


SVG business logos

3,000+ corporate, open source, and other business logos.

Bookmarked on #


Accessible SVG Icons with Inline Sprites

"At a certain stage in a project, someone always says: ‘We need icons!' We need to ensure that people who can’t see or recognize these icons can understand their purpose."

Bookmarked on #


Dimensions.Guide | The Database of Sizes

A comprehensive reference database of dimensioned drawings documenting the standard measurements and sizes of the everyday objects and spaces that make up our built environment.

Bookmarked on #


Masking vs. Clipping: When to Use Each

"I was recently doing some client work where I used both <clipPath>s and <mask>s in SVG to hide and show content for animation. When I started this project, I thought I knew all of the reasons to use one over the other. But, as tends to happen, working closely with something reveals idiosyncrasies. In this post, we'll go over some of these details so that you can get productive as soon as possible."

Bookmarked on #


Clipping in CSS and SVG — The clip-path Property and <clipPath> Element

"CSS and SVG have a lot in common. A lot of the features that we have in CSS today were imported from SVG. One of these features is the Clipping operation. Both CSS and SVG allow us to "clip" elements into custom non-rectangular shapes. In this article we will go over the clipping techniques in both CSS and SVG, covering everything you need to know to get started."

Bookmarked on #


Image Vectorizer

Online Vectorizer: Online raster to vector converter. Convert your images (jpeg, jpg or png) into scalable and clear vector art (svg).

Bookmarked on #


Using CSS Clip Path to Create Interactive Effects

"Do you remember being a kid, cutting out pictures from magazines? Did you glue them onto paper to create your own collages? This post is about cutting out images on the web using the CSS property clip-path."

Bookmarked on #


Solved with CSS! Colorizing SVG Backgrounds | CSS-Tricks

This post is the first in a series about the power of CSS. Article Series: Colorizing SVG Backgrounds (this post) Dropdown Menus Logical Styling Based On

Bookmarked on #


Building a responsive image

Clever responsive logos using just SVG and CSS.

Bookmarked on #


Rough.js

"A light weight javascript library that lets you draw graphics with a hand-drawn, sketchy, appearance."

Bookmarked on #



Keeping aspect-ratio with HTML and no padding tricks

For a long time we’ve been told the only way to have a DOM element keep a fixed aspect ratio without Javascript is with the % padding trick. Like here: https://css-tricks.com/aspect-ratio-boxes/…

Bookmarked on #


Using SVG as placeholders — More Image Loading Techniques

"I’m passionate about image performance optimisation and making images load fast on the web. One of the most interesting areas of exploration is placeholders: what to show when the image hasn’t loaded yet. During the last days I have come across some loading techniques that use SVG, and I would like to describe them in this post."

Bookmarked on #


Svgbob Editor

Svgbob is a plain text based diagramming model

Bookmarked on #


A Complete Guide to SVG Fallbacks

The following is a guest post by Amelia Bellamy-Royds and me. Amelia and I recently presented at the same conference together. We both covered SVG, yet nei

Bookmarked on #


Using SVG

Good overview of techniques

Bookmarked on #



Snap.svg

"SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM."

Bookmarked on #


Hero Patterns

A collection of repeatable SVG background patterns for you to use on your digital projects.

Bookmarked on #


svgsus

"Svgsus is the perfect tool to organize, clean and transform svgs into code."

Bookmarked on #


Clippy — CSS clip-path maker

"The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source."

Bookmarked on #