tessl/npm-react-art

React ART is a JavaScript library for drawing vector graphics using React

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Fill Objects and Styling

Name: tessl/npm-react-art
Author: tessl

Advanced fill options including linear gradients, radial gradients, and image patterns for sophisticated graphics styling. These fill objects can be used with any Shape or shape component in place of solid colors.

Capabilities

LinearGradient

Creates linear gradient fills that transition colors along a straight line between two points.

/**
 * Linear gradient fill object
 * Creates a gradient that transitions colors along a straight line
 * @param stops - Array of color stops defining the gradient
 * @param x1 - X coordinate of gradient start point
 * @param y1 - Y coordinate of gradient start point  
 * @param x2 - X coordinate of gradient end point
 * @param y2 - Y coordinate of gradient end point
 */
class LinearGradient {
  constructor(stops: ColorStop[], x1: number, y1: number, x2: number, y2: number);
  
  /**
   * Applies the gradient fill to an ART node
   * @param node - ART node to apply gradient to
   */
  applyFill(node: any): void;
}

// Color stop format for gradients
interface ColorStop {
  offset: number;  // Position along gradient (0-1)
  color: string;   // Color at this position
}

Usage Examples:

import React from 'react';
import { Surface, Shape, Path, LinearGradient } from 'react-art';

// Basic linear gradient
function LinearGradientShape() {
  const path = Path()
    .moveTo(0, 0)
    .lineTo(100, 0)
    .lineTo(100, 100)
    .lineTo(0, 100)
    .close();

  // Horizontal gradient from left to right
  const gradient = new LinearGradient(
    [
      { offset: 0, color: '#ff0000' },    // Red at start
      { offset: 1, color: '#0000ff' }     // Blue at end
    ],
    0, 0,    // Start point (left)
    100, 0   // End point (right)
  );

  return (
    <Surface width={120} height={120}>
      <Shape d={path} fill={gradient} />
    </Surface>
  );
}

// Multi-color vertical gradient
function MultiColorGradient() {
  const path = Path()
    .moveTo(10, 10)
    .lineTo(90, 10)
    .lineTo(90, 90)
    .lineTo(10, 90)
    .close();

  const gradient = new LinearGradient(
    [
      { offset: 0, color: '#ff0000' },    // Red at top
      { offset: 0.5, color: '#00ff00' },  // Green in middle
      { offset: 1, color: '#0000ff' }     // Blue at bottom
    ],
    0, 10,   // Start point (top)
    0, 90    // End point (bottom)
  );

  return (
    <Surface width={100} height={100}>
      <Shape d={path} fill={gradient} />
    </Surface>
  );
}

// Diagonal gradient
function DiagonalGradient() {
  const path = Path()
    .moveTo(0, 0)
    .lineTo(80, 0)
    .lineTo(80, 80)
    .lineTo(0, 80)
    .close();

  const gradient = new LinearGradient(
    [
      { offset: 0, color: '#ffd700' },    // Gold
      { offset: 1, color: '#ff8c00' }     // Dark orange
    ],
    0, 0,     // Top-left
    80, 80    // Bottom-right
  );

  return (
    <Surface width={100} height={100}>
      <Shape d={path} fill={gradient} />
    </Surface>
  );
}

RadialGradient

Creates radial gradient fills that transition colors in a circular pattern from a center point.

/**
 * Radial gradient fill object
 * Creates a gradient that transitions colors in a circular pattern
 * @param stops - Array of color stops defining the gradient
 * @param fx - X coordinate of gradient focal point
 * @param fy - Y coordinate of gradient focal point
 * @param rx - X radius of the gradient ellipse
 * @param ry - Y radius of the gradient ellipse
 * @param cx - X coordinate of gradient center
 * @param cy - Y coordinate of gradient center
 */
class RadialGradient {
  constructor(stops: ColorStop[], fx: number, fy: number, rx: number, ry: number, cx: number, cy: number);
  
  /**
   * Applies the gradient fill to an ART node
   * @param node - ART node to apply gradient to
   */
  applyFill(node: any): void;
}

Usage Examples:

import React from 'react';
import { Surface, Shape, Path, RadialGradient } from 'react-art';
import Circle from 'react-art/Circle';

// Basic radial gradient on circle
function RadialGradientCircle() {
  const gradient = new RadialGradient(
    [
      { offset: 0, color: '#ffffff' },    // White at center
      { offset: 1, color: '#000000' }     // Black at edge
    ],
    50, 50,   // Focal point (center)
    40, 40,   // X and Y radius
    50, 50    // Center point
  );

  return (
    <Surface width={100} height={100}>
      <Circle radius={40} fill={gradient} />
    </Surface>
  );
}

// Elliptical radial gradient
function EllipticalGradient() {
  const path = Path()
    .moveTo(10, 25)
    .lineTo(90, 25)
    .lineTo(90, 75)
    .lineTo(10, 75)
    .close();

  const gradient = new RadialGradient(
    [
      { offset: 0, color: '#ff69b4' },    // Hot pink
      { offset: 0.7, color: '#ff1493' },  // Deep pink
      { offset: 1, color: '#8b008b' }     // Dark magenta
    ],
    50, 50,   // Focal point
    30, 15,   // X radius (wide), Y radius (narrow) - creates ellipse
    50, 50    // Center point
  );

  return (
    <Surface width={100} height={100}>
      <Shape d={path} fill={gradient} />
    </Surface>
  );
}

// Off-center focal point
function OffCenterRadial() {
  const gradient = new RadialGradient(
    [
      { offset: 0, color: '#ffff00' },    // Yellow
      { offset: 1, color: '#ff0000' }     // Red
    ],
    30, 30,   // Focal point (off-center)
    50, 50,   // Radius
    50, 50    // Center point
  );

  return (
    <Surface width={100} height={100}>
      <Circle radius={45} fill={gradient} />
    </Surface>
  );
}

Pattern

Creates image pattern fills that tile an image across the shape.

/**
 * Image pattern fill object
 * Creates a fill that tiles an image across the shape
 * @param url - URL or data URI of the image to use as pattern
 * @param width - Width of each pattern tile
 * @param height - Height of each pattern tile
 * @param left - X offset of pattern origin
 * @param top - Y offset of pattern origin
 */
class Pattern {
  constructor(url: string, width: number, height: number, left: number, top: number);
  
  /**
   * Applies the pattern fill to an ART node
   * @param node - ART node to apply pattern to
   */
  applyFill(node: any): void;
}

Usage Examples:

import React from 'react';
import { Surface, Shape, Path, Pattern } from 'react-art';
import Rectangle from 'react-art/Rectangle';

// Basic image pattern
function ImagePattern() {
  const pattern = new Pattern(
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==',
    20, 20,  // Tile size
    0, 0     // Offset
  );

  return (
    <Surface width={100} height={100}>
      <Rectangle width={80} height={80} fill={pattern} />
    </Surface>
  );
}

// Pattern with offset
function OffsetPattern() {
  const pattern = new Pattern(
    '/path/to/texture.png',
    30, 30,   // Tile size
    10, 10    // Offset (shifts pattern)
  );

  const path = Path()
    .moveTo(0, 0)
    .lineTo(100, 0)
    .lineTo(50, 100)
    .close();

  return (
    <Surface width={120} height={120}>
      <Shape d={path} fill={pattern} />
    </Surface>
  );
}

// Small repeating pattern
function RepeatingPattern() {
  // Create a small checkerboard pattern using data URI
  const checkerboard = new Pattern(
    'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjUiIGhlaWdodD0iNSIgZmlsbD0iIzAwMCIvPgo8cmVjdCB4PSI1IiB5PSI1IiB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjMDAwIi8+Cjwvc3ZnPgo=',
    10, 10,   // Small tile size for tight pattern
    0, 0
  );

  return (
    <Surface width={100} height={100}>
      <Rectangle width={90} height={90} fill={checkerboard} />
    </Surface>
  );
}

Fill Object Usage

Using Fill Objects with Components

All fill objects can be used with any Shape or shape component by passing them to the fill prop:

import { Surface, Shape, LinearGradient } from 'react-art';
import Circle from 'react-art/Circle';
import Rectangle from 'react-art/Rectangle';
import Wedge from 'react-art/Wedge';

function GradientShapes() {
  const gradient = new LinearGradient(
    [
      { offset: 0, color: '#ff0000' },
      { offset: 1, color: '#0000ff' }
    ],
    0, 0, 100, 0
  );

  return (
    <Surface width={300} height={100}>
      <Circle radius={30} fill={gradient} />
      <Rectangle width={60} height={60} fill={gradient} />
      <Wedge outerRadius={35} startAngle={0} endAngle={180} fill={gradient} />
    </Surface>
  );
}

Combining with Strokes

Fill objects work alongside stroke properties:

function StyledGradientShape() {
  const gradient = new RadialGradient(
    [
      { offset: 0, color: '#ffff00' },
      { offset: 1, color: '#ff8c00' }
    ],
    50, 50, 40, 40, 50, 50
  );

  return (
    <Surface width={100} height={100}>
      <Circle 
        radius={40} 
        fill={gradient}
        stroke="#333"
        strokeWidth={3}
      />
    </Surface>
  );
}

Performance Considerations

Gradients and patterns are more expensive to render than solid colors
Complex gradients with many color stops can impact performance
Pattern images should be optimized and appropriately sized
Consider using CSS gradients for simple web-only gradients when possible

Types

// Color stop definition for gradients
interface ColorStop {
  /** Position along gradient (0 = start, 1 = end) */
  offset: number;
  /** Color value (hex, rgb, rgba, named colors) */
  color: string;
}

// Fill object union type
type FillObject = LinearGradient | RadialGradient | Pattern;

// Fill property type (used by Shape and shape components)
type Fill = string | FillObject;

Install with Tessl CLI