https://github.com/fralonra/basketball-court
Generate a basketball court in SVG format.
https://github.com/fralonra/basketball-court
basketball svg
Last synced: 3 months ago
JSON representation
Generate a basketball court in SVG format.
- Host: GitHub
- URL: https://github.com/fralonra/basketball-court
- Owner: fralonra
- License: mit
- Created: 2020-01-06T15:58:45.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-02-01T03:06:44.000Z (almost 5 years ago)
- Last Synced: 2025-08-09T02:24:43.311Z (4 months ago)
- Topics: basketball, svg
- Language: JavaScript
- Homepage: https://basketball-court.netlify.app/
- Size: 52.7 KB
- Stars: 3
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# basketball-court
[](https://www.npmjs.com/package/basketball-court)
[](https://travis-ci.com/fralonra/basketball-court)
[Website](https://basketball-court.netlify.app/)
Generate a basketball court in SVG format. Can be outputed as a string or convert into an SVGElement.
The dimensions data are collected from [Wikipedia][wiki], and stored in [JSON files][datas] in meters. If you find there are some errors, please open an issue or send a PR!
## Install
```bash
npm install basketball-court
```
or
```bash
yarn add basketball-court
```
## Usage
```javascript
const basketballCourt = require('basketball-court')
// Or include the script in your HTML.
//
// Convert svg to string, which can be outputed as a file.
console.log(basketballCourt().toString())
// Or you might want to use it as an SVGELement.
const element = basketballCourt().toDom()
```
## API
#### court ([options])
- `options` - The options object.
- `width` - The width of the court in px. Default: 400.
- `type` - The type of the court. Valid values: `nba`, `fiba`, `ncaa`, `wnba`. Default: `nba`.
- `theme` - There are currently four preseted themes: `plain`, `beach`, `steppe`, `volcano`. You can preview each of the theme [here][themes]. Custom themes are also supported, you can check [here][theme config] to learn about how to customize each part of the court. You can extend a theme by `data` property which is described below. Default: `plain`.
- `ftCircleDashCount` - The number of dashed lines and spaces between them along a free throw circle. Default: 15.
- `horizontal` - Whether the court should be horizontal. Default: false.
- `halfCourt` - Whether to generate only a half court. Default: false.
- `reverse` - Whether to generate a reversed court. Noted that it would look the same if `halfCourt` is false. Default: false.
- `trapezoid` - Whether the lane area should has a trapezoid shape (or a rectangle otherwise). Default: false.
- `data` - Additional config which that would override theme config. Check [here][theme config] for more information.
[wiki]: https://en.wikipedia.org/wiki/Basketball_court
[datas]: https://github.com/fralonra/basketball-court/tree/master/data
[themes]: https://basketball-court.netlify.com/preseted-themes
[theme config]: https://basketball-court.netlify.com/theme-config