open-index/open-npm huggingface dataset:
npm package: @jacob-z/figma-squircle
Description: Figma-flavored squircles for everyone
Author: Tien Pham
Latest version: 1.1.1

# Figma Squircle

[![Stable Release](https://img.shields.io/npm/v/figma-squircle)](https://npm.im/figma-squircle) [![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)

> Figma-flavored squircles for everyone

## Disclaimer

> This library is not an official product from the Figma team and does not guarantee to produce the same results as you would get in Figma.

## What is this?

Figma has a great feature called [corner smoothing](https://help.figma.com/hc/en-us/articles/360050986854-Adjust-corner-radius-and-smoothing), allowing you to create rounded shapes with a seamless continuous curve (squircles).

![](squircle.jpg)

This library helps you bring those squircles to your apps.

## Installation

```sh
npm install figma-squircle
```

## Usage

```jsx
import { getSvgPath } from 'figma-squircle'

const svgPath = getSvgPath({
  width: 200,
  height: 200,
  cornerRadius: 24, // defaults to 0
  cornerSmoothing: 0.8, // cornerSmoothing goes from 0 to 1
})

const svgPath = getSvgPath({
  width: 200,
  height: 200,
  cornerRadius: 24,
  cornerSmoothing: 0.8,
  // You can also adjust the radius of each corner individually
  topLeftCornerRadius: 48,
})

// svgPath can now be used to create SVG elements
function PinkSquircle() {
  return (
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
      <path d={svgPath} fill="pink" />
    </svg>
  )
}

// Or with the clip-path CSS property
function ProfilePicture() {
  return (
    <div
      style={{
        width: 200,
        height: 200,
        clipPath: `path('${svgPath}')`,
      }}
    >
      ...
    </div>
  )
}
```

## Preserve Smoothing

The larger the corner radius, the less space we have left to make a smooth transition from the straight line to the rounded corner. As a result, you might have noticed that the smoothing effect appears to be less pronounced as the radius gets bigger.

Try enabling `preserveSmoothing` if you're not happy with the generated shape. 

```jsx
const svgPath = getSvgPath({
  width: 200,
  height: 200,
  cornerRadius: 80,
  cornerSmoothing: 0.8,
  preserveSmoothing: true, // defaults to false
})
```

There's also a [Figma plugin](https://www.figma.com/community/plugin/1122437229616103296) that utilizes this option.

## Thanks

- Figma team for publishing [this article](https://www.figma.com/blog/desperately-seeking-squircles/) and [MartinRGB](https://github.com/MartinRGB) for [figuring out all the math](https://github.com/MartinRGB/Figma_Squircles_Approximation) behind it.
- [George Francis](https://github.com/georgedoescode) for creating [Squircley](https://squircley.app/), which was my introduction to squircles.

## Related

- https://github.com/phamfoo/react-native-figma-squircle
npm package: @jacob-z/vite-plugin-semi-theme-loader
Description: ## forked from: [vite-plugin-semi-theme](https://github.com/boenfu/vite-plugin-semi-theme.git)
Author: jacobzha
Latest version: 1.1.1

# @jacob-z/vite-plugin-semi-theme-loader

## forked from: [vite-plugin-semi-theme](https://github.com/boenfu/vite-plugin-semi-theme.git)

## Change Log

- 源码ts重写
- 修复pnpm管理时无法正确导入主题包的scss的问题 （思路来源 [#5](https://github.com/boenfu/vite-plugin-semi-theme/issues/5#issuecomment-1278757844) )
- 修复上述issue中无法正确导入组件token变量的问题

- 原仓库取材于 [theme options docs](https://github.com/DouyinFE/semi-design/tree/main/packages/semi-webpack#api)

## Usage

```js
// vite.config.js
import { defineConfig } from "vite";
import semi from "@jacob-z/vite-plugin-semi-theme-loader";

export default defineConfig({
  plugins: [
    semi({
      theme: "@semi-bot/semi-theme-yours",
      // options: {
      // ... 👆
      //},
    }),
  ],
});
```
npm package: @jacob120/random-id-generator
Description: This is an npm package.
Latest version: 1.0.1

# Random Id Generator

This is an npm package.

Install with `npm i @jacob120/random-id-generator`

Import to your project with `const randomID = require('your-package-name');`

Use with `randomID(x)` where x is the length of ID that you want to receive.