https://github.com/pshihn/stippled-image

Custom element to show the stippled version of image
https://github.com/pshihn/stippled-image

Last synced: about 1 month ago
JSON representation

Custom element to show the stippled version of image

• Host: GitHub
• URL: https://github.com/pshihn/stippled-image
• Owner: pshihn
• License: mit
• Created: 2020-05-07T04:46:26.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-05-20T05:59:28.000Z (almost 5 years ago)
• Last Synced: 2025-04-15T19:09:15.665Z (about 1 month ago)
• Language: TypeScript
• Size: 11.7 KB
• Stars: 33
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# \

*\* is a custom element to show the stippled version of an image. A stippled image gives a [Wall Street Journal's headcut](https://www.google.com/search?q=wall+street+journal+hedcut+obama&tbm=isch) like look. This effect is achieved by using *Weighted Voronoi Stippling* as shown in this [Observable notebook](https://observablehq.com/@mbostock/voronoi-stippling).

![Stippled Obama](https://user-images.githubusercontent.com/833927/81328553-f8414800-9051-11ea-9581-86434b72ace9.png)

## Using

This element is available [on npm](https://www.npmjs.com/package/stippled-image)

```html

```

[View live example](https://glitch.com/~stippled-image-demo)

## Properties and Attributes

You can configure the image using following properties/attributes.

#### src

The URL of the image

#### width & height

Configure the size of the image

```html

```

#### sampling

This lets you configure the number of dots to show. The number of dots is area of the image divided by the sampling value. 

#### points

You can be explicit about how many points you want rather than sample it. 

```html

```

#### radius

Radius of each dot in pixels

#### color

Color of the dot