BestHub
Sign in
Tag

vector graphics

0 views collected around this technical thread.

Bilibili Tech
Bilibili Tech
Sep 13, 2022 · Frontend Development

Vector Animation Foundations: Path Class, Bézier Curves, and Rational Bézier Geometry

The article explains how Bilibili’s Chronos engine can support vector animation by defining a Path class that stores drawing verbs, points, and conic weights, and by detailing Bézier and rational Bézier curve mathematics, De Casteljau evaluation, subdivision, and flattening techniques needed for resolution‑independent, GPU‑friendly rendering.

Bézier curvesanimationgeometry
0 likes · 22 min read
Vector Animation Foundations: Path Class, Bézier Curves, and Rational Bézier Geometry
We-Design
We-Design
Jan 5, 2022 · Fundamentals

Mastering Icon Design: Tips, Tools, and Vector Techniques for Modern UI

This article explores how icons reduce comprehension effort and convey information efficiently, examines industry-leading examples like Apple’s SF Symbols, explains vector specifications, shares practical drawing methods, and offers guidance on balancing weight, color, localization, and tool workflows for high‑resolution screens.

SF SymbolsUI designdesign tools
0 likes · 11 min read
Mastering Icon Design: Tips, Tools, and Vector Techniques for Modern UI
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Jun 23, 2021 · Frontend Development

Complete Guide to SVG: Elements, Animations, and Practical Applications

This guide explains why SVG outperforms raster images, details core elements like the svg container and path commands along with basic shapes, and compares three animation methods—SMIL, CSS, and JavaScript—offering practical techniques such as line drawing, morphing, stroke effects, and motion‑path animation for responsive, scalable web graphics.

CSS animationPath MorphingSMIL
0 likes · 26 min read
Complete Guide to SVG: Elements, Animations, and Practical Applications
ByteDance Dali Intelligent Technology Team
ByteDance Dali Intelligent Technology Team
May 31, 2021 · Frontend Development

Optimized Chinese Character Stroke‑Order Animation: Glyph Extraction, Stroke Segmentation, Median Generation, and Order Determination

This article describes how to integrate and extend the open‑source HanziWriter library for Android, iOS and web, extracting TrueType glyph data, segmenting strokes with corner detection and neural‑network scoring, generating stroke medians via Voronoi diagrams, and determining correct stroke order using a Hungarian‑algorithm match.

HanziWriterNeural Networkglyph extraction
0 likes · 16 min read
Optimized Chinese Character Stroke‑Order Animation: Glyph Extraction, Stroke Segmentation, Median Generation, and Order Determination
Amap Tech
Amap Tech
Mar 6, 2020 · Frontend Development

Exploration and Practice of a Custom SVG‑Based Image Format (ASVG) for In‑Car Navigation UI

Gaode’s team created a proprietary ASVG format by extending and heavily optimizing SVG to address the growing diversity of in‑car screens, cutting UI package size by ~60%, speeding parsing to microseconds, and delivering smoother vector rendering, thereby improving navigation UI quality and maintenance efficiency.

ASVGIn-Car NavigationSVG
0 likes · 12 min read
Exploration and Practice of a Custom SVG‑Based Image Format (ASVG) for In‑Car Navigation UI