https://github.com/downace/striped-background
Generate customizable striped backgrounds using CSS gradients
https://github.com/downace/striped-background
Last synced: 3 months ago
JSON representation
Generate customizable striped backgrounds using CSS gradients
- Host: GitHub
- URL: https://github.com/downace/striped-background
- Owner: downace
- Created: 2025-02-17T05:30:31.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-04-16T06:47:00.000Z (over 1 year ago)
- Last Synced: 2025-11-01T08:20:34.235Z (9 months ago)
- Language: TypeScript
- Size: 66.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Striped Background
> Generate customizable striped backgrounds using CSS gradients
### Usage
```js
import stripedBackground from 'striped-background';
const div = document.getElementById('my-div');
Object.assign(div.style, stripedBackground(
// Pattern, array of [line color, line width] tuples
[
['#ffffff', 40],
['rgb(244, 0, 39)', 30],
],
'0.25turn', // Rotation angle
10, // Offset in pixels
));
```
With Vue 3:
```vue
import { computed } from 'vue';
import stripedBackground from 'striped-background';
const divStyle = computed(() => ({
// ... other styles
...stripedBackground(
[
['#ffffff', 40],
['rgb(244, 0, 39)', 30],
],
'0.25turn',
10,
)
}));
```
Animated (see [Examples](#examples)):
```js
const div = document.getElementById('my-div');
let prevTimestamp;
let offset = 0;
const speed = 50 / 1000; // pixels per millisecond
function step(timestamp) {
if (prevTimestamp === undefined) {
prevTimestamp = timestamp;
requestAnimationFrame(step);
return;
}
const distance = (timestamp - prevTimestamp) * speed;
offset = (offset - distance) % 200;
Object.assign(div.style, stripedBackground([
[
['#ee1c25', 50],
['#ffffff', 50],
['#1b76bc', 50],
['#ffffff', 50],
],
-45,
offset,
]));
prevTimestamp = timestamp;
requestAnimationFrame(step);
}
requestAnimationFrame(step);
```
### Examples
For live examples visit [examples page](https://downace.github.io/striped-background/examples.html).
Or clone this repo and run local server:
```shell
npx http-server -o examples.html .
```