animate-vector 1.0.2

package/README.md

@@ -0,0 +1,73 @@
+# animate-vector
+
+A React component that animates SVG paths by drawing them sequentially. It supports loading SVGs from a string or a URL and allows for customizable animation timings.
+
+## Installation
+
+```bash
+npm install animate-vector
+```
+
+## Usage
+
+```jsx
+import React from 'react';
+import SVGPathAnimator from 'animate-vector';
+
+const App = () => {
+  return (
+    <div>
+      {/* Load from URL */}
+      <SVGPathAnimator 
+        src="/path/to/image.svg" 
+        duration={3000} 
+        stagger={100} 
+      />
+
+      {/* Or using an SVG string */}
+      <SVGPathAnimator 
+        svgString="<svg>...</svg>" 
+      />
+    </div>
+  );
+};
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `src` | `string` | - | URL to the SVG file. |
+| `svgString` | `string` | - | Raw SVG content string. |
+| `duration` | `number` | `2000` | Duration of the drawing animation per path (ms). |
+| `fillDelay` | `number` | `250` | Delay before the fill animation starts after drawing (ms). |
+| `reverseDuration` | `number` | `300` | Duration of the reverse (undraw) animation (ms). |
+| `stagger` | `number` | `0.25` | Delay between starting animation for each path (ms). |
+| `enableReverse` | `boolean` | `true` | Enables double-click/touch interaction to reverse the animation. |
+
+## SVG Data Attributes
+
+You can also embed configuration directly into your SVG file using `data-` attributes on the root `<svg>` element. These values override the props passed to the component.
+
+```xml
+<svg 
+  viewBox="0 0 100 100" 
+  data-duration="3000" 
+  data-stagger="100"
+  data-fill-delay="500"
+  data-enable-reverse="false"
+>
+  ...
+</svg>
+```
+
+## Features
+
+- **Automatic Path Detection**: Finds and animates all paths in the SVG.
+- **Interaction**: Double-click or touch to reverse and restart the animation (configurable).
+- **Reduced Motion**: Respects the user's `prefers-reduced-motion` setting.
+
+## Author
+
+**Oliver R. Fox**  
+[https://ofox.co.uk](https://ofox.co.uk)

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "animate-vector",
+  "version": "1.0.2",
+  "description": "A React component to animate SVG paths",
+  "main": "svg-animator.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react",
+    "svg",
+    "animation",
+    "path",
+    "drawing"
+  ],
+  "author": "Oliver R. Fox <https://ofox.co.uk>",
+  "homepage": "https://ofox.co.uk",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/svg-animator.js

@@ -0,0 +1,480 @@
+import React, {useRef, useEffect, useState} from 'react';
+import './landing.css';
+
+function getInheritedStyleOrAttribute(node, propertyName) {
+  let currentNode = node;
+  // Traverse up from the current node until the SVG root or the attribute/style is found
+  while (currentNode && currentNode.nodeName && currentNode.nodeName.toLowerCase() !== 'svg') {
+    if (typeof currentNode.getAttribute === 'function') { // Ensure it's an element node
+      // Check for direct attribute first
+      const directAttrValue = currentNode.getAttribute(propertyName);
+      if (directAttrValue !== null && directAttrValue.toLowerCase() !== 'inherit') {
+        return directAttrValue;
+      }
+
+      // Check for inline style attribute if direct attribute wasn't found or was 'inherit'
+      const styleAttr = currentNode.getAttribute('style');
+      if (styleAttr) {
+        // Simple parsing for the specific property
+        const declarations = styleAttr.split(';');
+        for (const declaration of declarations) {
+          // Split only on the first colon to handle values like data URIs or complex gradients
+          const parts = declaration.split(/:(.+)/);
+          if (parts.length === 3) { // Ensure we have a property and a value part
+            const prop = parts[0];
+            const value = parts[1]; // The rest of the string after the first colon
+            if (prop && value && prop.trim() === propertyName) {
+              const trimmedValue = value.trim();
+              if (trimmedValue.toLowerCase() !== 'inherit') {
+                return trimmedValue;
+              }
+              // If 'inherit' is found in style, break style parsing for this node and continue search upwards
+              break;
+            }
+          }
+        }
+      }
+    }
+    // Move to parent if not found or if 'inherit' was specified
+    if (!currentNode.parentNode) break;
+    currentNode = currentNode.parentNode;
+  }
+
+  // Check SVG root last (as a fallback) - handles attributes/styles set directly on the <svg> tag
+  if (currentNode && currentNode.nodeName && currentNode.nodeName.toLowerCase() === 'svg') {
+    if (typeof currentNode.getAttribute === 'function') {
+      // Check direct attribute on SVG root
+      const svgRootAttrValue = currentNode.getAttribute(propertyName);
+      if (svgRootAttrValue !== null && svgRootAttrValue.toLowerCase() !== 'inherit') {
+        return svgRootAttrValue;
+      }
+      // Check style attribute on SVG root
+      const svgRootStyleAttr = currentNode.getAttribute('style');
+      if (svgRootStyleAttr) {
+        const declarations = svgRootStyleAttr.split(';');
+        for (const declaration of declarations) {
+          const parts = declaration.split(/:(.+)/);
+          if (parts.length === 3) {
+            const prop = parts[0];
+            const value = parts[1];
+            if (prop && value && prop.trim() === propertyName) {
+              const trimmedValue = value.trim();
+              if (trimmedValue.toLowerCase() !== 'inherit') {
+                return trimmedValue;
+              }
+              break; // Stop checking styles on SVG root if 'inherit'
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return null; // Attribute/style not found in the hierarchy up to the SVG element
+}
+
+// Helper function to optimise path data by rounding numbers to one decimal place
+function optimizePathData(d) {
+  if (!d) return '';
+  // Regex to find commands (letters) and numbers (including decimals and negatives)
+  const parts = d.match(/[a-df-zA-DF-Z]|[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?/g);
+  if (!parts) return d; // Return original if parsing fails
+
+  let optimizedD = "";
+  let currentCommand = "";
+
+  for (const part of parts) {
+    if (/[a-zA-Z]/.test(part)) { // If it's a command letter
+      currentCommand = part;
+      optimizedD += currentCommand;
+    } else { // If it's a number (or part of a number sequence like "10,20")
+      const numbers = part.split(/[\s,]+/).filter(Boolean);
+      const roundedNumbers = numbers.map(numStr => {
+        const num = parseFloat(numStr);
+        if (!isNaN(num)) {
+          return (Math.round(num * 10) / 10).toString(); // Round to 1 decimal place
+        }
+        return numStr;
+      });
+      optimizedD += roundedNumbers.join(' ');
+      if (optimizedD.length > 0 && !/[a-zA-Z]$/.test(optimizedD.slice(-1))) {
+        optimizedD += " ";
+      }
+    }
+  }
+  return optimizedD.trim();
+}
+
+
+// Component to parse and animate SVG paths
+const SVGPathAnimator = ({ 
+  svgString, 
+  src, 
+  duration = 2000, 
+  fillDelay = 250, 
+  reverseDuration = 300, 
+  stagger = 0.25,
+  enableReverse = true
+}) => {
+  const [internalSvgString, setInternalSvgString] = useState(null);
+  const [pathsData, setPathsData] = useState([]);
+  const [svgAttributes, setSvgAttributes] = useState({});
+  const [animationKey, setAnimationKey] = useState(Date.now());
+  const [isReversing, setIsReversing] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+  
+  const lastTapTimeRef = useRef(0);
+  const lastTapTargetRef = useRef(null);
+  const reverseAnimationTimeoutRef = useRef(null);
+  const animationCompletionTimeoutRef = useRef(null);
+  
+  const configRef = useRef({
+    duration,
+    fillDelay,
+    reverseDuration,
+    stagger,
+    enableReverse
+  });
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handleChange = (event) => setPrefersReducedMotion(event.matches);
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      if (reverseAnimationTimeoutRef.current) clearTimeout(reverseAnimationTimeoutRef.current);
+      if (animationCompletionTimeoutRef.current) clearTimeout(animationCompletionTimeoutRef.current);
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (svgString) {
+      setInternalSvgString(svgString);
+    } else if (src) {
+      fetch(src)
+        .then(res => {
+            if (!res.ok) throw new Error("Failed to fetch SVG");
+            return res.text();
+        })
+        .then(text => setInternalSvgString(text))
+        .catch(err => {
+            console.error("Error loading SVG from src:", err);
+            setInternalSvgString(null);
+        });
+    } else {
+        setInternalSvgString(null);
+    }
+  }, [svgString, src]);
+
+  useEffect(() => {
+    if (!internalSvgString) {
+      setPathsData([]);
+      setSvgAttributes({});
+      setIsAnimating(false);
+      return;
+    }
+
+    if (reverseAnimationTimeoutRef.current) clearTimeout(reverseAnimationTimeoutRef.current);
+    if (animationCompletionTimeoutRef.current) clearTimeout(animationCompletionTimeoutRef.current);
+
+    setIsReversing(false);
+    setAnimationKey(Date.now());
+    setIsAnimating(true);
+
+    const parser = new DOMParser();
+    const svgDoc = parser.parseFromString(internalSvgString, "image/svg+xml");
+    const svgElement = svgDoc.documentElement;
+
+    if (!svgElement || svgElement.nodeName.toLowerCase() !== 'svg') {
+      console.error("Invalid SVG content or root element is not <svg>. Found:", svgElement ? svgElement.nodeName : "null");
+      const parserError = svgDoc.querySelector('parsererror');
+      if (parserError) console.error("SVG Parsing Error:", parserError.textContent);
+      setPathsData([]); setSvgAttributes({}); setIsAnimating(false); return;
+    }
+
+    const attrDuration = svgElement.getAttribute('data-duration');
+    const attrFillDelay = svgElement.getAttribute('data-fill-delay');
+    const attrReverseDuration = svgElement.getAttribute('data-reverse-duration');
+    const attrStagger = svgElement.getAttribute('data-stagger');
+    const attrEnableReverse = svgElement.getAttribute('data-enable-reverse');
+
+    const effectiveDuration = attrDuration ? parseFloat(attrDuration) : duration;
+    const effectiveFillDelay = attrFillDelay ? parseFloat(attrFillDelay) : fillDelay;
+    const effectiveReverseDuration = attrReverseDuration ? parseFloat(attrReverseDuration) : reverseDuration;
+    const effectiveStagger = attrStagger ? parseFloat(attrStagger) : stagger;
+    const effectiveEnableReverse = attrEnableReverse !== null ? attrEnableReverse === 'true' : enableReverse;
+
+    configRef.current = {
+        duration: effectiveDuration,
+        fillDelay: effectiveFillDelay,
+        reverseDuration: effectiveReverseDuration,
+        stagger: effectiveStagger,
+        enableReverse: effectiveEnableReverse
+    };
+
+    const attributes = {};
+    for (const attr of svgElement.attributes) {
+        if (!['data-duration', 'data-fill-delay', 'data-reverse-duration', 'data-stagger', 'data-enable-reverse'].includes(attr.name)) {
+            attributes[attr.name] = attr.value;
+        }
+    }
+
+    if (!attributes.width || attributes.width === "100%") attributes.width = "100%";
+    if (!attributes.height || attributes.height === "100%") attributes.height = attributes.viewBox ? "auto" : "300px";
+    setSvgAttributes(attributes);
+
+    const pathNodes = svgDoc.querySelectorAll('path');
+    const extractedPaths = [];
+    let maxTotalAnimationTimeMs = 0;
+
+    let tempMeasurementDiv = document.getElementById('temp-svg-path-measurement-div');
+    if (!tempMeasurementDiv) {
+      tempMeasurementDiv = document.createElement('div');
+      tempMeasurementDiv.id = 'temp-svg-path-measurement-div';
+      tempMeasurementDiv.style.cssText = 'visibility:hidden; position:absolute; width:0; height:0; top:-1000px; left:-1000px; overflow:hidden;';
+      document.body.appendChild(tempMeasurementDiv);
+    }
+    const tempMeasureSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    if (attributes.viewBox) tempMeasureSvg.setAttribute('viewBox', attributes.viewBox);
+    tempMeasurementDiv.appendChild(tempMeasureSvg);
+
+    pathNodes.forEach((pathNode, index) => {
+      const originalD = pathNode.getAttribute('d');
+      if (!originalD) return;
+
+      const optimizedD = optimizePathData(originalD);
+
+      const pathFillAttr = getInheritedStyleOrAttribute(pathNode, 'fill');
+      const pathStrokeAttr = getInheritedStyleOrAttribute(pathNode, 'stroke');
+      const pathStrokeWidthAttr = getInheritedStyleOrAttribute(pathNode, 'stroke-width');
+
+      const originalStroke = pathStrokeAttr !== null ? pathStrokeAttr : 'currentColor';
+      const originalStrokeWidth = pathStrokeWidthAttr !== null ? pathStrokeWidthAttr : '0.5';
+
+      let effectiveFill;
+      if (pathFillAttr === 'none') effectiveFill = 'none';
+      else if (pathFillAttr === null) effectiveFill = 'black';
+      else effectiveFill = pathFillAttr;
+
+      const tempPath = pathNode.cloneNode(false);
+      tempPath.setAttribute('d', optimizedD);
+      if (originalStrokeWidth !== '1') tempPath.setAttribute('stroke-width', originalStrokeWidth);
+
+      tempMeasureSvg.appendChild(tempPath);
+      let rawLength = 0;
+      try { rawLength = tempPath.getTotalLength(); }
+      catch (e) { console.warn(`Could not measure path ${index}. D=${optimizedD}`, e); }
+      tempMeasureSvg.removeChild(tempPath);
+
+      const length = Math.round(rawLength * 10) / 10;
+
+      if (length >= 1) {
+        const currentPathBaseDelayRaw = index * (effectiveStagger / 1000);
+        const currentPathBaseDelay = Math.round(currentPathBaseDelayRaw * 1000) / 1000;
+
+        const currentPathDrawDuration = effectiveDuration / 1000;
+        const fillAndStrokeRemoveEffectiveDuration = (effectiveDuration - effectiveFillDelay) / 1000;
+
+        const pathTotalTime = (currentPathBaseDelay * 1000) + effectiveDuration; // Use original delay for total time calculation
+        if (pathTotalTime > maxTotalAnimationTimeMs) maxTotalAnimationTimeMs = pathTotalTime;
+
+        extractedPaths.push({
+          id: `animated-path-${index}-${Date.now()}`,
+          d: optimizedD,
+          length,
+          originalStroke, originalStrokeWidth, effectiveFill,
+          animationDelay: `${currentPathBaseDelay}s`,
+          animationDuration: `${currentPathDrawDuration}s`,
+          fillAnimationDuration: `${fillAndStrokeRemoveEffectiveDuration > 0 ? fillAndStrokeRemoveEffectiveDuration : 0}s`,
+          strokeRemoveDuration: `${fillAndStrokeRemoveEffectiveDuration > 0 ? fillAndStrokeRemoveEffectiveDuration : 0}s`,
+        });
+      }
+    });
+
+    if (tempMeasureSvg.parentNode === tempMeasurementDiv) tempMeasurementDiv.removeChild(tempMeasureSvg);
+    setPathsData(extractedPaths);
+
+    animationCompletionTimeoutRef.current = setTimeout(() => {
+      setIsAnimating(false);
+      console.log("Initial animation complete.");
+    }, maxTotalAnimationTimeMs );
+
+  }, [internalSvgString, duration, fillDelay, reverseDuration, stagger, enableReverse]);
+
+  const triggerAnimationRestart = (e) => {
+    if (!configRef.current.enableReverse) return;
+    if (isAnimating) { console.log("Animation in progress, restart ignored."); return; }
+    if (e) e.stopPropagation();
+
+    console.log("Interaction detected, initiating reverse animation.");
+    setIsAnimating(true); setIsReversing(true);
+
+    if (reverseAnimationTimeoutRef.current) clearTimeout(reverseAnimationTimeoutRef.current);
+    if (animationCompletionTimeoutRef.current) clearTimeout(animationCompletionTimeoutRef.current);
+
+    const { reverseDuration, duration } = configRef.current;
+
+    reverseAnimationTimeoutRef.current = setTimeout(() => {
+      console.log("Reverse animation finished, starting forward animation.");
+      setIsReversing(false); setAnimationKey(Date.now());
+
+      let maxTotalAnimationTimeMs = 0;
+      if (pathsData.length > 0) {
+        pathsData.forEach(p => {
+          const currentPathBaseDelay = parseFloat(p.animationDelay.replace('s','')) * 1000; // Use the stored (possibly rounded) delay
+          const pathTotalTime = currentPathBaseDelay + duration;
+          if(pathTotalTime > maxTotalAnimationTimeMs) maxTotalAnimationTimeMs = pathTotalTime;
+        });
+      } else { maxTotalAnimationTimeMs = duration; }
+
+      animationCompletionTimeoutRef.current = setTimeout(() => {
+        setIsAnimating(false); console.log("Restarted animation complete.");
+      }, maxTotalAnimationTimeMs);
+    }, reverseDuration);
+  };
+
+  const handleTouchEnd = (e) => {
+    if (!configRef.current.enableReverse) return;
+    const currentTime = new Date().getTime();
+    const tapLength = currentTime - lastTapTimeRef.current;
+    if (tapLength < 300 && tapLength > 0 && lastTapTargetRef.current && lastTapTargetRef.current.contains(e.target)) {
+      triggerAnimationRestart(e); lastTapTimeRef.current = 0;
+    } else {
+      lastTapTimeRef.current = currentTime; lastTapTargetRef.current = e.currentTarget;
+    }
+  };
+
+  if (!internalSvgString || (pathsData.length === 0 && Object.keys(svgAttributes).length === 0)) return null;
+
+  const { style: rawStyleAttribute, ...otherSvgAttributes } = svgAttributes;
+  const parsedStyleFromSvg = {};
+  if (typeof rawStyleAttribute === 'string') {
+    rawStyleAttribute.split(';').forEach(declaration => {
+      if (declaration.trim() === '') return;
+      const parts = declaration.split(/:(.+)/);
+      if (parts.length === 3) {
+        const property = parts[0]; const value = parts[1];
+        if (property && value) {
+          const propName = property.trim();
+          const camelCasePropName = propName.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+          if (camelCasePropName) parsedStyleFromSvg[camelCasePropName] = value.trim();
+        }
+      }
+    });
+  } else if (typeof rawStyleAttribute === 'object' && rawStyleAttribute !== null) {
+    Object.assign(parsedStyleFromSvg, rawStyleAttribute);
+  }
+
+  const finalSvgElementStyle = { ...parsedStyleFromSvg, overflow: 'visible', cursor: configRef.current.enableReverse ? 'pointer' : 'default' };
+  const { fillDelay: effectiveFillDelay, reverseDuration: effectiveReverseDuration } = configRef.current;
+
+  if (internalSvgString && pathsData.length === 0 && Object.keys(svgAttributes).length > 0) {
+    return (
+      <div className="text-center text-gray-500 p-4">
+        <div onDoubleClick={triggerAnimationRestart} onTouchEnd={handleTouchEnd} style={{ display: 'inline-block', cursor: configRef.current.enableReverse ? 'pointer' : 'default' }}>
+          <svg {...otherSvgAttributes} style={finalSvgElementStyle} data-reduced-motion={prefersReducedMotion}></svg>
+        </div>
+        <p className="mt-2">SVG loaded, but no animatable &lt;path&gt; elements with length >= 1 found.</p>
+      </div>
+    );
+  }
+
+  return (
+    <svg key={animationKey} {...otherSvgAttributes} style={finalSvgElementStyle}
+         onDoubleClick={triggerAnimationRestart} onTouchEnd={handleTouchEnd} data-reduced-motion={prefersReducedMotion} >
+      <style>
+        {`
+          .animated-svg-path {
+            fill-opacity: 0; 
+            fill: var(--path-fill, black); 
+            stroke: var(--path-stroke-draw-color, currentColor); 
+            stroke-opacity: 1; 
+            stroke-dasharray: var(--path-length);
+            stroke-dashoffset: var(--path-length); 
+            will-change: stroke-dashoffset, stroke-opacity, fill-opacity;
+          }
+
+          svg:not([data-reduced-motion="true"]) .animated-svg-path:not(.reversing) {
+            animation: 
+              drawPath var(--animation-duration) ease-in-out var(--animation-delay, 0s) forwards,
+              fillPath var(--fill-animation-effective-duration) ease-in calc(var(--animation-delay) + ${effectiveFillDelay / 1000}s) forwards,
+              removeStroke var(--fill-animation-effective-duration) ease-in calc(var(--animation-delay) + ${effectiveFillDelay / 1000}s) forwards;
+          }
+          svg:not([data-reduced-motion="true"]) .animated-svg-path[fill="none"]:not(.reversing) { 
+            animation: drawPath var(--animation-duration) ease-in-out var(--animation-delay, 0s) forwards;
+            fill-opacity: 0 !important; fill: none !important; 
+            stroke: var(--original-stroke-color, currentColor); stroke-opacity: 1 !important; 
+          }
+          svg:not([data-reduced-motion="true"]) .animated-svg-path.reversing {
+            stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 1; 
+            stroke: var(--path-stroke-draw-color); 
+            animation: quickReverse ${effectiveReverseDuration / 1000}s ease-out forwards;
+          }
+          svg:not([data-reduced-motion="true"]) .animated-svg-path[fill="none"].reversing { 
+            stroke-dashoffset: 0; stroke-opacity: 1 !important; fill-opacity: 0 !important;
+            fill: none !important; stroke: var(--original-stroke-color, currentColor) !important; 
+            animation: unDrawPathReverseOriginalStroke ${effectiveReverseDuration / 1000}s ease-out forwards;
+          }
+          
+          svg[data-reduced-motion="true"] .animated-svg-path:not([fill="none"]):not(.reversing) { 
+            stroke-dashoffset: 0; stroke-opacity: 0; 
+            animation: fillPath var(--animation-duration) ease-in calc(var(--animation-delay) + ${effectiveFillDelay / 1000}s) forwards;
+          }
+          svg[data-reduced-motion="true"] .animated-svg-path[fill="none"]:not(.reversing) { 
+            stroke-dashoffset: 0; stroke: var(--original-stroke-color, currentColor);
+            stroke-opacity: 1 !important; fill-opacity: 0 !important; fill: none !important;
+            animation: none; 
+          }
+          svg[data-reduced-motion="true"] .animated-svg-path:not([fill="none"]).reversing { 
+            fill-opacity: 1; stroke-opacity: 0; stroke-dashoffset: 0; 
+            animation: quickReverseFillOnlyReducedMotion ${effectiveReverseDuration / 1000}s ease-out forwards;
+          }
+          svg[data-reduced-motion="true"] .animated-svg-path[fill="none"].reversing { 
+            stroke-dashoffset: 0; stroke: var(--original-stroke-color, currentColor);
+            stroke-opacity: 1 !important; fill-opacity: 0 !important; fill: none !important;
+            animation: none; 
+          }
+
+          @keyframes drawPath { to { stroke-dashoffset: 0; } }
+          @keyframes fillPath { to { fill-opacity: 1; } }
+          @keyframes removeStroke { to { stroke-opacity: 0; } }
+          @keyframes quickReverse { 
+            from { fill-opacity: 1; stroke-dashoffset: 0; stroke-opacity: 1; }
+            to { fill-opacity: 0; stroke-dashoffset: var(--path-length); stroke-opacity: 1; }
+          }
+          @keyframes unDrawPathReverseOriginalStroke { 
+            from { stroke-dashoffset: 0; stroke-opacity: 1; }
+            to   { stroke-dashoffset: var(--path-length); stroke-opacity: 1; }
+          }
+          @keyframes quickReverseFillOnlyReducedMotion {
+            from { fill-opacity: 1; } to { fill-opacity: 0; }
+          }
+        `}
+      </style>
+      {pathsData.map((path) => (
+        <path
+          key={path.id}
+          d={path.d}
+          strokeWidth={path.originalStrokeWidth}
+          className={`animated-svg-path ${isReversing ? 'reversing' : ''}`}
+          style={{
+            '--path-length': path.length, // Rounded length
+            '--animation-duration': path.animationDuration,
+            '--animation-delay': path.animationDelay, // Rounded delay
+            '--fill-animation-effective-duration': path.fillAnimationDuration,
+            '--path-fill': path.effectiveFill === 'none' ? 'none' : path.effectiveFill,
+            '--path-stroke-draw-color': path.effectiveFill === 'none' ? path.originalStroke : path.effectiveFill,
+            '--original-stroke-color': path.originalStroke,
+          }}
+          fill={path.effectiveFill}
+          stroke={path.originalStroke}
+        />
+      ))}
+    </svg>
+  );
+};
+
+export default SVGPathAnimator;