Parametric Geometry

One hundred formula-built SVG studies from Daria's Drafts. Every drawing is a pure function of a small parameter object and one continuous value, t, from 0 to 1. The gallery is live at parametric-geometry.vercel.app.

Use a study

The gallery supports three export paths from every study:

download a static SVG
copy inline SVG markup
copy a React component example

The React package can be installed directly from the live site:

npm install https://parametric-geometry.vercel.app/parametric-geometry-react.tgz

import { StudyIcon } from "@dariasdrafts/parametric-geometry";

export function Example() {
  return <StudyIcon study="037" size={160} color="#7047A6" t={0} />;
}

study accepts 001 through 100. size defaults to 220, color defaults to currentColor, and t defaults to 0. Named components for the twelve original constructions and GeneratedIcon are also exported.

Deform on hover

import { useState } from "react";
import {
  StudyIcon,
  useParametricSpring,
} from "@dariasdrafts/parametric-geometry";

export function InteractiveStudy() {
  const [hovered, setHovered] = useState(false);
  const t = useParametricSpring(hovered ? 1 : 0);

  return (
    <div
      onPointerEnter={() => setHovered(true)}
      onPointerLeave={() => setHovered(false)}
    >
      <StudyIcon study="064" color="#B4432F" t={t} />
    </div>
  );
}

Hosts should detect prefers-reduced-motion and pass reducedMotion: true to the hook, or keep t at 0.

Geometry contract

inline SVG, never canvas or WebGL
strokes only, using currentColor
non-scaling 1.5 to 2px line weight
no whole-object motion transforms
stable bounding box from t = 0 to t = 1
complete static rendering without JavaScript

See DESIGNING-STUDIES.md to add a construction.

Develop

npm install
npm run dev

Validation:

npm run lint
npm run build:library
npm run build

Contributing and license

Contributions are welcome. Read CONTRIBUTING.md and the Code of Conduct before opening a pull request.

FilesExpand file tree

README.md

Latest commit

History