@abhijeet42cy6/vector-lines/src/components/ThreeLinePattern.js

Reusable 3-line vector pattern (27×26 Y-shape) for React projects

import React from 'react';

const ThreeLinePattern = ({ 
  lineColor = '#000000',
  lineWidth = 1,
  spacing = 27,
  style = {},
  // Line 1 (Vertical/Y)
  line1Start = { x: 13.5, y: 0 },
  line1End = { x: 13.5, y: 13 },
  // Line 2 (Horizontal/X)
  line2Start = { x: 13.5, y: 13 },
  line2End = { x: 0, y: 13 },
  // Line 3 (Diagonal/Z)
  line3Start = { x: 13.5, y: 13 },
  line3End = { x: 26, y: 25.5 }
}) => {
  // Create the SVG pattern with configurable lines
  const svgPattern = `
    <svg width='27' height='26' viewBox='0 0 27 26' xmlns='http://www.w3.org/2000/svg'>
      <g stroke='${lineColor}' stroke-width='${lineWidth}' fill='none'>
        <path d='
          M${line1Start.x} ${line1Start.y} L${line1End.x} ${line1End.y}
          M${line2Start.x} ${line2Start.y} L${line2End.x} ${line2End.y}
          M${line3Start.x} ${line3Start.y} L${line3End.x} ${line3End.y}
        '/>
      </g>
    </svg>
  `.trim();

  // Convert SVG to base64 for use in CSS
  const encodedPattern = btoa(svgPattern);

  const patternStyle = {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundImage: `url("data:image/svg+xml;base64,${encodedPattern}")`,
    backgroundSize: `${spacing}px ${spacing}px`,
    backgroundRepeat: 'repeat',
    backgroundPosition: 'center center',
    pointerEvents: 'none',
    ...style
  };

  return <div style={patternStyle} />;
};

export default ThreeLinePattern;

// Usage Example:
/*
import ThreeLinePattern from './components/ThreeLinePattern';

function YourComponent() {
  return (
    <div style={{ position: 'relative' }}>
      <ThreeLinePattern 
        spacing={50}     // Adjust space between patterns
        lineColor="#000000"  // Black lines
        lineWidth={1}    // 1px line width
      />
      Your content here
    </div>
  );
}
*/