Decoration 8

dvk-decoration-8 is a futuristic rotating HUD energy ring for dark data-screen scenes. It renders non-overlapping long-short outer arcs, a thinner offset trace ring that crosses them only during parallax motion, precision tick marks, dotted micro indicators, a ring of neon square energy blocks, and a dark hollow center. A default slot sits above the SVG so the decoration can frame a compact metric, icon, or status label.

<dvk-decoration-8></dvk-decoration-8>

98SYNC

<dvk-decoration-8 colors="#52f0b5,#2b7cff" dur="4">
  <strong>98</strong>
</dvk-decoration-8>

Props

Name	Type	Default	Notes
color	string	CSS variable fallback	Primary neon ring, tick, and energy block color. When set as a JavaScript property, a DataV-style color array is also accepted.
secondary-color	string	CSS variable fallback	Secondary arc, guide, and micro indicator color.
colors	string	empty	Comma-separated primary and secondary colors.
dur	number	5	Rotation duration in seconds.
animated	boolean	true	Enables SVG rotation animations.
paused	boolean	false	Stops rotation animations while keeping the static geometry visible.
raster-renderer	'video' | 'sprite'	'sprite'	Runtime raster output renderer. Defaults to transparent PNG atlas playback; use video for transparent WebM playback.

Events

Name	Detail
dvk-ready	{ tagName }
dvk-raster-error	{ message }

CSS Variables

Name	Meaning
--dvk-color-primary	Primary fallback color.
--dvk-color-secondary	Secondary fallback color.

Parts

Part	Description
graphic	Internal SVG or raster renderer.
raster	Runtime raster renderer used after SVG rasterization succeeds.
background	Dark radial HUD background wash.
halo	Soft concentric glow guides.
ring	Shared part for segmented light arcs.
outer-ring	Wide rotating outer arc segments with irregular long-short pairing.
outer-trace	Thin offset outer trace segments placed between the wide arcs for parallax motion.
inner-ring	Narrow counter-rotating inner arc segments.
outer-arcs	Group containing the outer rotating light bands.
outer-arc-band	Group containing the wide outer arc band.
outer-arc-trace	Group containing the thinner offset outer trace band.
segmented-track	Group containing the inner segmented track.
guide-ring	Shared part for the static dashed guide rings.
outer-guide	Outer dashed guide ring.
inner-guide	Inner dashed guide ring.
core-guide	Dashed guide around the hollow core.
ticks	Group containing precision tick marks.
tick	Individual tick mark.
energy-blocks	Group containing the rotating square energy blocks.
energy-block	Individual neon square energy block.
micro-lights	Group containing dotted micro indicators.
micro-light	Individual micro indicator.
core	Dark hollow center and core rim.
content	Centered slot content wrapper.