SVG

Myriam Frisano explores the basics of hand-coding SVGs with practical examples to demystify the inner workings of common SVG elements. In this guide, you’ll learn about asking the right questions to solve common positioning problems and how to leverage JavaScript so that, by the end, you can add “SVG coding” to your toolbox. You’ll also be able to declare proudly, “I know how to draw literal pictures with words!”

Ближайшая конференция: HolyJS 2023 Autumn, 2–3 ноября (online), 11–12 ноября (offline, Санкт-Петербург)Подробности и билеты: https://cutt.ly/Fwtp1eqJ— —Часто...

Enlightened library to convert HTML and CSS to SVG - vercel/satori: Enlightened library to convert HTML and CSS to SVG

It’s time to revisit the old SVG sprites trick and dig out a few alternative methods from the SVG spec and Internet archives.

Сегодня я расскажу о процессе, который я придумал для преобразования SVG-контура в векторный рисунок верёвки. Вы узнаете, как превратить показанный слева контур в верёвку справа: Эта задача возникла...

A visual & interactive SVG reference. Quickly look up how to define SVG shapes, transforms, masks, patterns, gradients, text and more.

Generate basic SVG shapes that are glowing and futuristic-looking to use in your web designs.

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.

Время идет, технологии меняются, набитые шишки копятся, настала пора обновить материалы по SVG-анимациям. Тем более, что тема для многих фронтендеров все еще остается странной и запутанной. В этой...

It’s no secret that SVGs are super powerful, and yet, they still manage to surprise. Have you ever considered using SVG’s internal coordinate system to create a responsive image grid, for example, or adding texture to an SVG? In this post, we’ll look into some magical SVG techniques that open up new possibilities.

Learn how to code creative animations with JavaScript using SVG paths and the getPointAtLength() function.

Learn how to use SVG and CSS to build UI components

Using two SVGs and `shape-outside` to wrap text inside a shape.

SVGcode is a Progressive Web App that lets you convert raster images like JPG, PNG, GIF, WebP, AVIF, etc. to vector graphics in SVG format.

When I started giving talks about SVG back in 2016, I'd occasionally hear a question I never had a great answer for: What if you have a lot of icons on a page?

Using JavaScript, SVGs, and CSS to procedurally generate unique solar systems.

A SVG/CSS trick to apply natural looking shadows to DOM elements.

I love shapes, especially colorful ones! Shapes on websites are in the same category of helpfulness as background colors, images, banners, section

This SVG stretchy navigation tutorial shows you how to move your target from one item to the next with an organic feeling, stretchy-style animation.

A post by Zach Leatherman (zachleat)

A look at how CSS and SVG can be used to implement the cut-out effect.

A simple thumbnail hover effect with a caption slide out animation and an SVG filter distortion on the image.

Why would we need to apply shadows to SVG? Shadows are a common design feature that can help elements, like icons, stand out. They could be persistent, or

Let’s say someone asks you to add a double border to some random geometric SVG shapes. For some reason, you can’t use any graphic editor — they need to be

...

A complete guide to SVG generators — for everything from SVG shapes and cropping tools to SVG filters, color matrix mixers and SVG to JSX generators.

Recently, I had to make a web page displaying a bunch of SVG graphs for an analytics dashboard. I used a bunch of , and

An interactive playground to generate svg waves for your design. Customize wave types, colours, and more.

Tuesday, November 17, 10:30 AM PST — Animated SVGs add a touch of interactive whimsy and polish to our websites. In this episode, Cassie Codes will teach us how to use Greensock to create fun, engaging experiences!