SVG Asset Management
Relevant source files
The following files were used as context for generating this wiki page:
- README.md
- index.html
- aether-style.css
- aether-script.js
- assets/aether-shapes/shape-1.svg (Referenced via directory structure)
SVG Asset Management in the AETHER portfolio project encompasses the organization, stylistic integration, and animation of geometric vector assets. These assets serve as the core visual identity of the "Supreme Geometric Minimalism" theme, providing a dynamic background and interactive UI elements.
The system relies on a decoupled architecture where assets are stored in a dedicated directory and rendered through a combination of HTML structural containers and CSS-driven motion paths.
Sources: README.md:1-26, index.html:1-12
Directory Structure and Asset Organization
The project maintains a strict hierarchical structure for vector assets to separate decorative geometry from content-specific images.
- Path:
assets/aether-shapes/ - Asset Types: Scalable Vector Graphics (.svg)
- Key Files:
shape-1.svg: Primary geometric element.shape-2.svg: Secondary floating element.shape-3.svg: Tertiary accent shape.
Sources: README.md:15-19
Implementation Architecture
The management of these assets is divided between structural placeholders in the DOM and visual definitions in the stylesheets.
Geometric Containers
The index.html file utilizes specific container classes to house geometric logic. These containers do not always load the SVGs directly via <img> tags but often act as hooks for CSS-generated content or background masks.
The diagram above shows the hierarchy of geometric elements defined in the project structure.
Sources: index.html:33-38, index.html:84-89
CSS Integration and Style Variables
Assets are styled using CSS variables to control their animation properties dynamically. The .shape class uses radial gradients and animation timing functions to simulate depth and motion.
| Property | Value | Description |
|---|---|---|
--delay | Time (s) | Offset for the start of the floating animation |
--duration | Time (s) | Total length of the animation cycle |
background | radial-gradient | Provides the "Aether" glow effect to shapes |
Sources: index.html:34, aether-style.css:102-105
Animation and Motion Logic
The "Floating Geometry Engine" mentioned in the project documentation is implemented primarily through keyframe animations.
Floating Mechanics
The project defines three distinct motion behaviors for assets:
- Ring Floating (
ringFloat): Used in the loader for rotating and scaling concentric circles. - General Floating (
float): Used for background shapes, involving vertical translation and 360-degree rotation. - Orbiting (
orbitRotate): Used in the Hero section for assets that revolve around a central point.
The sequence diagram illustrates the lifecycle of a floating asset's animation cycle.
Sources: aether-style.css:122-126, aether-style.css:216-218, aether-script.js:106-111
Hero Section Geometry
The complex geometry in the hero section uses layered orbits to create a sense of mechanical precision.
| Class | Animation | Transformation |
|---|---|---|
.geo-main | geoPulse | scale(1) to scale(1.05) |
.geo-orbit | orbitRotate | rotate(360deg) linear |
.geo-accent | accentFloat | translateY(-15px) |
Sources: aether-style.css:192-230
JavaScript Interaction
While the animations are CSS-heavy, aether-script.js manages the "engine" aspects, such as initializing tilt effects on containers that may house these assets and handling the loading state.
- Tilt Effect: The
initTilt()method applies a perspective-based rotation to elements with the[data-tilt]attribute, affecting how assets react to mouse movements. - Loading State: The
aether-loaderensures that the complex geometric background is only revealed after a 2000ms delay to ensure asset readiness.
Sources: aether-script.js:11-13, aether-script.js:84-98
Conclusion
SVG Asset Management in AETHER is a coordinated effort between organized file storage in assets/aether-shapes/ and a sophisticated CSS animation system. By utilizing structural containers like .geo-container and .floating-shapes, the project achieves a high-performance geometric UI that remains scalable and performant.