Карандашный набросок, который заливается акварелью: разбираю эффект на SVG без библиотек
Делал интерактивную открытку на день рождения и хотел, чтобы картинка не просто появлялась, а «рисовалась»: сначала карандашные линии, пот…
Latest Web news from Tech News
All topics
AI
agents
ai
api
architecture
automation
backend
beginners
career
database
devchallenge
devops
discuss
javascript
linux
llm
machinelearning
mcp
opensource
performance
productivity
programming
python
react
security
showdev
testing
tutorial
typescript
webdev
How do you draw vector graphics? By hand, or by an AI that places real paths
A vector graphic is a list of points and curves, not a grid of pixels. To draw one you place anchor points with a pen tool, drag out Bezier handles…
How do you give an AI real design taste?
An AI needs a design process it can use and inspect: a product brief, visual guidance, drawing tools and a review loop. SVG Lab (svglab.app)'s Desig…
Трон для самого звёздного: я сделал игру, которая живёт внутри GitHub‑репозитория
Помните Million Dollar Homepage? В 2005 году студент продал миллион пикселей по доллару за штуку и заработал миллион. Никакой пользы…
Готовый рецепт интерактивного обучающего курса в одном файле
Внутреннее обучение без бюджета, без серверов и без "запишитесь на вебинар". Один html-файл на ~118 Кб, который открывается двойным кликом, работает…
The Price Tag Is Not the License
Downloading an icon is easy. Understanding what you are allowed to do with it six months later is much harder. A developer finds an SVG, downloads i…
Building an interactive marina slip map in React with plain SVG
Most dashboard templates give you a revenue chart and a user table. When I built a dashboard for marinas and boat charter companies, the thing a doc…
330,000 free icons for video, and every one of them can draw itself on
AtomCut now ships an Icons panel: Lucide, Tabler, Phosphor, Material Symbols, Simple Icons, the emoji sets, the flag sets, 208 open-source icon sets…
FFMPEG to the rescue, again
LinkedIn is going to be one of my direct integrations, if it's possible, so that I can write an article once and publish it on my own platform and d…
Why Confluence Cloud turns your SVG into a flat image
Short answer. An SVG file is not only a picture: it can carry links, scripts and references to outside resources. Rendering one live inside a page w…
CSS задачи на 200 IQ
У вас бывает такое чувство, когда вы при выполнении работы упёрлись в какую-то проблему и что-то внутри подсказывает, что не может такого быть, чтоб…
How to View an SVG File in the Browser
You can open any SVG file directly in Chrome, Firefox, Edge, or Safari by dragging it onto the browser window or using File > Open. Modern browse…
What Changes When Converting SVG to React Components (JSX & TSX)
TL;DR SVG attributes like stroke-width become strokeWidth in JSX. class → className . Numeric values become {expressions} . Inline styles become obj…
Dynamic Handwriting Effect on the Web: A Solution Without Static Webfonts
Introduction to strokes.js In the quest for more expressive and personalized web typography, strokes.js emerges as a groundbreaking solution. Tradit…
Why Your SVG to PDF Export Rasterizes (and How to Stop It)
Print the SVG to PDF from a browser, or run it through a vector toolchain. Either way, the output can stay fully vector, because SVG and PDF are bot…
Converting SVG strokes to fills in the browser: the geometry problem nobody warns you about
A while back I was building an icon font with IcoMoon. I dragged in my SVGs, hit generate, and about half the icons came out wrong — hollow outlines…
The SVG Color Cascade Nobody Explains (fill, stroke, currentColor, and why img src breaks it)
Change an SVG's color by editing fill and stroke , either as attributes or through CSS. Simple in theory. In practice there are three places a color…
The SVG Path Data Format, Explained (M, L, C, Q, A, Z)
If you've opened a <path d="..."> string and had no idea what you were looking at, here's the short version: it's a tiny drawing language. A p…
How SVG-to-PNG Conversion Actually Works in the Browser
If you've ever tried to convert an SVG to a PNG entirely in the browser (no server round-trip, no ImageMagick, just JavaScript), you've probably hit…
How I Built a Free SVG to PNG Converter in 1 Hour
I needed a quick way to convert SVG icons to PNG for a project. Every online converter I found required uploading files to a server — slow, privacy-…
Bidirectional Sync Between Radar Chart Vertex Dragging and Sliders
📝 Originally published (in Japanese) at forge.workstyle.tech . Introduction to Interactive Radar Charts In a UI for adjusting multi-dimensional para…
How to Use SVG Icons in React, Next.js, and Tailwind CSS
There are exactly three sensible ways to get an SVG icon into a React codebase: paste it inline as a component, import the file through a build tran…
I built a vector topographic contour map generator for designers (SVG export)
Hey everyone! 👋 As a designer, I constantly needed high-quality vector topographic contour lines and generative patterns for branding, UI hero backg…
How to make Telegram animated stickers from an SVG (no After Effects)
Telegram animated stickers and custom emoji use a format called TGS — compressed Lottie animation data. The "official" way to make one is a Lottie /…
Canvas или SVG для карты офиса: как мы выбрали и справились с неочевидными граблями
Если к вам придут с задачей внедрения интерактивной карты офиса, какой рендер вы выберете? Canvas или SVG? Верхнеуровневый обзор скажет, что Canvas…
Django-кнопка «Наверх»: подключить за минуту вместо очередного велосипеда
Кнопка «Наверх» — вещь настолько простая, что обычно её делают прямо в проекте: ссылка, немного CSS, пара строк JavaScript — готово. Для одной стран…
Algorithmic Logo Design: Building Numerical Integration into the CyArm SVG
When we approach logo design as a form of systemizing, we move beyond the limitations of manual vector tools and embrace the beauty of repeatable, a…
SVG Icon Accessibility: Decorative vs Meaningful Icons
SVG icons are everywhere in modern interfaces: buttons, menus, alerts, dashboards, empty states, navigation bars, and product UIs. They look small.…
SVG Icon Systems in 2025 — Everything You Need to Know
Every web app needs icons. How you manage them at scale — that's where most teams make mistakes. This is the complete guide to building an SVG icon…
Interactive Floor Plans for Real Estate Developers — Why Static PDFs Are Dead
Every real estate developer has the same problem. A buyer visits the website, downloads a PDF floor plan, squints at tiny unit labels, and calls the…