CSS-переменные и экспорт в Canvas

Утилиты CSS-переменных

import { extractGradientVariables, resolveGradientVariables } from 'css-magic-gradient'

const gradient = 'linear-gradient(var(--start, #ff0000), var(--end))'

// Извлечь все имена CSS custom property
extractGradientVariables(gradient)
// → ['--start', '--end']

// Подставить переменные из карты значений; откатывается к инлайн-fallback или сохраняет var()
resolveGradientVariables(gradient, { '--end': '#0000ff' })
// → 'linear-gradient(#ff0000, #0000ff)'

Экспорт в canvas и изображения

Рендерит градиенты в canvas или в данные изображения — полезно для генерации Open Graph изображений, canvas-интерфейсов или серверного рендеринга с библиотекой canvas (например, npm-пакетом canvas).

gradientToCanvasGradient

Создаёт объект CanvasGradient из заданных параметров и применяет все цветовые точки.

import { gradientToCanvasGradient } from 'css-magic-gradient'

const gradient = gradientToCanvasGradient(
  {
    type: 'linear',
    stops: [
      { color: '#ff9a3c', offset: 0 },
      { color: '#c0357a', offset: 1 },
    ],
  },
  ctx,
)

ctx.fillStyle = gradient
ctx.fillRect(0, 0, canvas.width, canvas.height)

Типы градиентов:

// Линейный (x0,y0) → (x1,y1); по умолчанию: слева направо через весь canvas
{ type: 'linear', stops, x0?, y0?, x1?, y1? }

// Радиальный — два круга; по умолчанию: концентрические круги по центру canvas
{ type: 'radial', stops, x0?, y0?, r0?, x1?, y1?, r1? }

// Конический — startAngle в радианах; по умолчанию: центр canvas, 0 рад
{ type: 'conic', stops, startAngle?, x?, y? }

gradientToImageData

Рендерит градиент в объект ImageData заданного размера.

import { gradientToImageData } from 'css-magic-gradient'

const imageData = gradientToImageData(
  {
    type: 'radial',
    stops: [
      { color: '#ffffff', offset: 0 },
      { color: '#3498db', offset: 1 },
    ],
  },
  800,
  600,
)

gradientToDataURL

Рендерит градиент как data URL PNG (например, для <img src> или CSS background).

import { gradientToDataURL } from 'css-magic-gradient'

const dataUrl = gradientToDataURL(
  {
    type: 'linear',
    stops: [
      { color: '#ff9a3c', offset: 0 },
      { color: '#c0357a', offset: 1 },
    ],
  },
  400,
  200,
)
// → 'data:image/png;base64,…'

Примечание: функции canvas требуют браузер или серверную реализацию canvas. В окружениях без document или OffscreenCanvas они выбрасывают понятную ошибку.