recentpopularlog in

garrettc : svg   48

SVG symbol viewer
An online, no-upload drag-and-drop SVG file symbol extractor and viewer.
webdevelopment  webdesign  svg  images  graphics  tool 
11 weeks ago by garrettc
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."
accessibility  svg  icon  webdesign  webdevelopment 
may 2019 by garrettc
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."
css  navigation  webdesign  webdevelopment  userinterface  svg  grid 
may 2019 by garrettc
SVG Tracer
A cool thing made with Glitch
art  crafts  svg  tracer  tool 
march 2019 by garrettc
Cool Backgrounds
Explore a beautifully curated selection of cool backgrounds that you can add to blogs, websites, or as desktop and phone wallpapers.
background  design  svg  webdesign  patterns 
february 2019 by garrettc
Trianglify.io
A tool for generating low poly triangle patterns that can be used as wallpapers and website assets.
background  design  svg  webdesign  patterns  wallpaper  generator 
february 2019 by garrettc
Hero Patterns
A collection of repeatable SVG background patterns for you to use on your web projects.
background  design  svg  webdesign  patterns 
february 2019 by garrettc
Making Sense of Clip Path
"We can create many different shapes from circles, ellipsis, polygons. Creativity is the only limit."
css  clippath  svg  webdesign  webdevelopment  mathematics 
february 2019 by garrettc
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."
animation  css  svg  webdevelopment  webdesign 
january 2019 by garrettc
SVG business logos
3,000+ corporate, open source, and other business logos.
design  logo  vector  svg 
january 2019 by garrettc
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."
accessibility  svg  userinterface  userexperience  webdevelopment 
december 2018 by garrettc
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.
design  architecture  reference  measurement  svg  size  dimensions 
december 2018 by garrettc
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."
css  svg  webdevelopment  webdesign 
december 2018 by garrettc
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."
webdesign  webdevelopment  svg  design  css  userinterface 
december 2018 by garrettc
Image Vectorizer
Online Vectorizer: Online raster to vector converter. Convert your images (jpeg, jpg or png) into scalable and clear vector art (svg).
editor  svg  vector  bitmap  tool 
september 2018 by garrettc
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."
css  svg  webdesign  inspiration 
august 2018 by garrettc
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
svg  css  webdesign  webdevelopment 
august 2018 by garrettc
Building a responsive image
Clever responsive logos using just SVG and CSS.
css  svg  webdesign 
may 2018 by garrettc
Rough.js
"A light weight javascript library that lets you draw graphics with a hand-drawn, sketchy, appearance."
javascript  canvas  drawing  svg  sketch  library  art  design 
may 2018 by garrettc
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/…
css  svg  webdesign  layout  ratio  video 
january 2018 by garrettc
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."
progressiveenhancement  responsivedesign  webdesign  webdevelopment  performance  svg 
november 2017 by garrettc
Svgbob Editor
Svgbob is a plain text based diagramming model
text  svg  editor  diagram 
july 2017 by garrettc
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
svg  css  html  imagery  webdesign  webdevelopment 
february 2017 by garrettc
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."
javascript  library  svg  webdesign  webdevelopment 
february 2017 by garrettc
Hero Patterns
A collection of repeatable SVG background patterns for you to use on your digital projects.
background  css  patterns  svg  webdesign  webdevelopment 
january 2017 by garrettc
svgsus
"Svgsus is the perfect tool to organize, clean and transform svgs into code."
design  svg  osx  mac  vector  tool 
august 2016 by garrettc
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."
webdevelopment  webdesign  reference  css  svg  inspiration 
july 2016 by garrettc
Accessible SVGs | CSS-Tricks
Scalable Vector Graphic (SVG) is emerging as the preferred graphic format to use on the web today. Are you abandoning the icon font or replacing old pg, gi
svg  accessibility 
july 2016 by garrettc
Chartist - Simple responsive charts
Create responsive, scalable and good looking charts with chartist.js.
javascript  svg  responsive  data  graphs  webdevelopment 
april 2016 by garrettc
Tight Fitting SVG Shapes, the Present and Future
"Ana tackles an interesting problem here: what happens when the stroke of an element grows it such that it appears cut off? Getting it to fit tightly again may seem like an exercise in guessing, checking, and magic numbers. But if you know Ana's work, you'll know she is uniquely qualified to teach us the math behind getting to the correct solution."
svg  design  webdesign  vector  tutorial  maths  mathematics 
august 2015 by garrettc
How To Create SVG Arrowheads and Polymarkers — The marker Element
The marker element is an easy way to create arrowhead and other polymarkers in SVG images.
design  graphics  webdesign  svg  vector 
may 2015 by garrettc
Textures.js
SVG patterns for Data Visualization
javascript  svg  d3  data  visualisation 
march 2015 by garrettc
Animation
It’s about time. In this article we’ll take on the challenge of creating and animating a clock, using simple CSS animations as well as JavaScript...
javascript  animation  clock  css  css3  svg 
march 2015 by garrettc
SVG Path Strings
How to decode the M, L, C and A commands in SVG.
javascript  tutorial  svg  d3  webdevelopment  development  programming  vector 
march 2015 by garrettc
How to Create (Animated) Text Fills
A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG.
animation  css  svg  userinterface  webdevelopment  webdesign 
february 2015 by garrettc
Subtle Click Feedback Effects
A set of subtle effects for click or touch interactions inspired by the visualization of screen taps in mobile app showcases.
animation  css  webdesign  svg  userinterface  feedback 
february 2015 by garrettc
ProgressBar.js
Beautiful and responsive progress bars with animated SVG paths.
javascript  animation  library  svg  development  webdevelopment  userinterface 
october 2014 by garrettc
morris.js Graphing tool
Pretty time-series line graphs using jquery and Raphael.
javascript  svg  graphs  data  visualisation  library 
april 2014 by garrettc
D3.js - Data-Driven Documents
Javascript library for manipulating documents based on data.
data  graphs  visualisation  javascript  svg  webdevelopment 
august 2013 by garrettc
Kartograph
A new framework for building interactive map applications without Google Maps or any other mapping service. Early days but looks promising.
javascript  mapping  maps  python  svg  geodata 
march 2012 by garrettc

Copy this bookmark:





to read