1 views collected around this technical thread.
This article explains how to combine PHP session management with SVG animation techniques—using server‑generated SVG, AJAX polling, or WebSocket communication—to create real‑time, personalized visual effects while addressing performance and security considerations.
The article explains Android’s VectorDrawable format for SVG‑like scalable graphics, details its XML schema, shows how to create static vectors, gradients, and clip‑paths, then examines the underlying source‑code flow, and finally describes AnimatedVectorDrawable’s property‑based animations, inflation process, and runtime execution.
This article explains how to create a reusable Vue custom directive that changes an SVG's fill color on hover, covering simple fill‑only SVGs, dynamic color parameters, and handling more complex SVGs by swapping SVG markup strings.
This article explains how to simplify SVG hover color changes in Vue by creating a reusable custom directive that dynamically modifies the fill attribute or swaps SVG markup, reducing duplicated markup and improving maintainability for both simple and complex SVG graphics.
This article explains how to design an artistic SVG signature, export it from Figma, and animate it using stroke‑dasharray, stroke‑dashoffset, and CSS keyframe animations to achieve a drawing effect on web pages.
This article explains the role of edges in LogicFlow diagrams, details the BaseEdge model and its properties and methods, describes built‑in straight, polyline and curve edges, and provides step‑by‑step code for creating custom animated edges with gradient and shadow effects.
This tutorial demonstrates how to create a Vue 3 component that animates a Kirby‑styled input field using GSAP, covering SVG drawing, component structure, animation timelines, regex‑based state handling, and integration of styles and interactions for a visually engaging form element.
This tutorial demonstrates how to enhance console.log messages with CSS colors, create ASCII art, embed base64‑encoded images, and render SVG or HTML content using the browser console, providing practical code examples and visual illustrations for developers.
The 2023 NetEase Cloud Music Annual Listening Report showcases a front‑end animation pipeline where the motion designer codes directly in React, using CSSTransition for page fades, CSS keyframes for text and particle effects, SVG masks for data visualisation, 3D perspective tricks, and extensive device testing to balance visual richness with performance.
This article presents a lightweight, UI‑framework‑free Vue3 admin template, detailing its visual style configuration, core layout, permission‑based routing, TypeScript‑based state handling, custom AJAX request wrapper, and an SVG icon bundler, along with code examples and package information.
This tutorial demonstrates how to use Three.js, TypeScript and Vite to load an SVG logo, extract its Bézier curve points, generate evenly spaced laser paths, animate multiple lasers with Line2, and finally separate the logo from a floor using shape holes, providing complete source code and visual results.
To create a tab interface with connected borders, recessed rounded corners, and smooth scrolling transitions, the article explains abandoning CSS due to background‑cover problems and instead using SVG paths that map the four corner vertices, employ arc commands for inner curves, dynamically update coordinates during scroll, and discusses the resulting performance and scalability trade‑offs.
This article documents a step‑by‑step exploration of four native HTML/CSS/JS approaches to create an animated circular dashboard gauge on an H5 page, discusses the challenges encountered, and presents a final SVG‑based solution with code examples.
This article walks through debugging html2canvas by examining its rendering pipeline, comparing foreignObject and pure canvas methods, analyzing stacking contexts, and presenting practical fixes for export bugs, including configuration tweaks and DOM manipulation techniques.
Font2svg converts large font glyphs into on‑demand SVG paths using Python’s freetype‑py and svgpathtools, dramatically shrinking download size, speeding page loads, and improving user experience, with CDN‑served SVGs, a lightweight front‑end injector, and graceful fallback, as demonstrated by a 98 % size reduction in a Bilibili case study.
This article explains the four primary browser rendering approaches—DOM (HTML+CSS), SVG, Canvas, and WebGL/WebGPU—detailing their principles, advantages, limitations, and practical examples to help developers understand the underlying mechanics of web‑based visualizations.
This article demonstrates how to convert Chinese characters into SVG paths using Batik, then creates a D3.js animation that morphs one character into another, addressing path length mismatches with a FIFO‑style point‑by‑point transition and adding a swing effect via setInterval.
This tutorial walks through creating a semi‑circular progress bar using both Canvas and SVG, covering preparation, drawing techniques, angle calculations, animation loops, anti‑aliasing optimizations, and dynamic updates, and compares the visual and performance differences between the two approaches.
This article describes the architecture, functional modules, technology choices, and detailed implementation techniques—including coordinate definition, collision detection, zoom/drag handling, object selection, batch operations, alignment, and indoor positioning—of a Vue‑based indoor space management platform that visualizes workstations, meeting rooms, and assets on an interactive map.
This article explains the fundamentals of computer fonts, compares bitmap, vector, and stroke fonts, discusses why SVG icons are preferred over font icons on the web, and provides a step‑by‑step guide to implementing a reusable SVG icon component using Vite, Ant Design Vue, and related tooling.