npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

shape-svg

0.3.3 • Public • Published

shape-svg npm version

Make CSS Polygon Shape

$ npm install shape-svg

Options

import {poly, star} from "shape-svg";
 
import { CLASS_NAME, STROKE_LINEJOIN } from "./consts";
 
export interface Shape {
    left?: number;
    top?: number;
    right?: number;
    bottom?: number;
    width?: number;
    heigh?t: number;
    fill?: string;
    strokeLinejoin?: STROKE_LINEJOIN;
    strokeWidth?: number;
    className?: string;
    origin?: string | number;
    [key: string]: any;
}
export interface RoundRectShape extends Shape {
  round?: number;
  css?: boolean;
}
export interface PolyShape extends Shape {
  side?: number;
  split?: number;
  css?: boolean;
  innerRadius?: number;
}
export interface OvalShape extends Shape {
  r?: number;
  rx?: number;
  ry?: number;
}
 
export function getPath(points: number[][]): string;  // path('M 0 0 L 0 0 Z');
export function be(path: SVGPathElement, options: PolyShape, container?: SVGElement): void;
export function star(options: PolyShape, container?: SVGElement): SVGElement;
export function poly(options: PolyShape, container?: SVGElement): SVGElement;
export function oval(options: OvalShape, container?: SVGElement): SVGElement;
export function rect(options: RoundRectShape, container?: SVGElement): SVGElement;

How to Use

<script src="//daybrush.github.io/shape-svg/release/latest/dist/shape-svg.js"></script>
<script src="//daybrush.github.io/shape-svg/release/latest/dist/shape-svg.min.js"></script>
import {poly, star, be} from "shape-svg";
 
// 10 star
// Shape.poly
const el = poly({width: 100, side: 10, strokeWidth: 5, fill: "transparent", strokeLinejoin: "round"});
// Shape.star
const el = star({width: 100, css: true, side: 10, innerRadius: 30, strokeWidth: 5, strokeLinejoin: "bavel"});
 
document.body.appendChild(el);
 
// Shape.be
// 10 star => 5 polygon (split 4)
be(el, {width: 100, side: 5, css: true, split: 4, innerRadius: 30, strokeWidth: 5, strokeLinejoin: "bavel"});
 

Animation(Transition)

use be function with {css: true} or change d path syle.

but side X split must be the same to be animated. (star(inner-radius) is split twice)

  • ex) poly side: 6
    • star side: 3
    • poly side: 3, split: 2
  • ex) poly side: 12, split: 2
    • star side: 4, split: 3
    • star side: 3, split: 4
    • poly side: 6, split: 4
    • poly side: 24, split: 1

install

npm i shape-svg

Downloadsweekly downloads

24

version

0.3.3

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability