https://github.com/a6b8/ascii-to-svg-generator-for-ruby
Inspired by the on-chain NFT project Autoglyphs, 'Ascii Art to SVG' generates beautiful SVG vector images based on a string input.
https://github.com/a6b8/ascii-to-svg-generator-for-ruby
computer-art erc721 ethereum generative-art nft ordinals prawn-pdf ruby svg
Last synced: about 2 months ago
JSON representation
Inspired by the on-chain NFT project Autoglyphs, 'Ascii Art to SVG' generates beautiful SVG vector images based on a string input.
- Host: GitHub
- URL: https://github.com/a6b8/ascii-to-svg-generator-for-ruby
- Owner: a6b8
- License: mit
- Created: 2021-06-14T20:27:53.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-22T01:11:48.000Z (over 3 years ago)
- Last Synced: 2025-04-23T06:18:33.952Z (about 2 months ago)
- Topics: computer-art, erc721, ethereum, generative-art, nft, ordinals, prawn-pdf, ruby, svg
- Language: Ruby
- Homepage:
- Size: 396 KB
- Stars: 67
- Watchers: 4
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
This module generates beautiful svg images based on a input string.
```ruby
character_set = [ '-', '/', '|', "\", '#' ]
```
```ruby
character_set = [ '-', '|', '#' ]
```
```ruby
character_set = [ '-', '|', '#', 'o', '\' ]
```
```ruby
character_set = [ '|', 'o', '.' ]
options = {
style__line__stroke__color: 'brown',
style__ellipse__stroke__color: 'orange'
}
```
```ruby
character_set = [ '/', '\' ]
options = {
style__line__stroke__color: 'brown',
style__ellipse__stroke__color: 'orange'
}
```
```ruby
character_set = [ 'x', '.' ]
```
```ruby
character_set = [ '|', '.', '-' ]
options = {
style__canvas__fill__color: '#0A0C10',
style__line__stroke__color: '#8D949D'
}
```
1. [Examples](#examples)
2. [Quickstart](#quickstart)
3. [Functions](#functions)
4. [Naming](#naming)
5. [Symbols](#symbols-heading)
6. [Options](#options)
7. [Contributing](#contributing)
8. [Limitations](#limitations)
9. [Credits](#Credits)
10. [License](#license)
11. [Code of Conduct](#code-of-conduct)
12. [Support my Work](#support-my-work)
1. Install `gem`
```ruby
gem install 'ascii_to_svg'
```
2. Run Code
```ruby
require 'ascii_to_svg'
# Generate Example String
ascii = AsciiToSvg.example_string( [ 'x', 'o' ], 256 )
# Generate SVG
svg = AsciiToSvg.from_string( ascii, 16, {} )
# => "
Add this line to your application's Gemfile:
```ruby
gem 'ascii_to_svg'
```
And then execute:
$ bundle install
Or install it yourself as:
$ gem install ascii_to_svg
On Rubygems:
- Gem: https://rubygems.org/gems/ascii_to_svg
- Profile: https://rubygems.org/profiles/a6b8
### AsciiToSvg.options
Output all Parameter
```ruby
AsciiToSvg.options
# => {:canvas=>{:size=>{:x=>500 ...
```
### AsciiToSvg.example_string()
| **Type** | **Required** | **Description** | **Example** | **Description** |
|------:|:------|:------|:------|:------|
| **characters** | ```Array (of single alphabetic character)``` | No | ```[ 'x', 'o' ]``` | Set alphabetic characters for string |
| **length** | ```Integer``` | No | ```512``` | Lengt of generated String | |
```ruby
one = AsciiToSvg.example_string()
two = AsciiToSvg.example_string( [ 'x', 'o' ], 512 )
```
### AsciiToSvg.from_string()
| | **Type** | **Required** | **Description** |
|------:|:------|:------|:------|
| **ascii** | ```String``` | Yes | A String of one or more Characters |
| **lenght** | ```Integer``` | Yes | Number of Characters in one Line (Row) |
| **options** | ```Hash``` | No | Modify output. For detailed Information |
```ruby
AsciiToSvg.from_string(
ascii,
length,
options
)
```
### AsciiToSvg.similar_svg()
```ruby
original_str = AsciiToSvg.example_string( [ 'x', 'o' ], 256 )
original_svg = AsciiToSvg.from_string( original_str, 16, {} )
copy_str = original_str[ 0, original_str.length - 1 ]
copy_svg = AsciiToSvg.from_string( copy_str, 16, {} )
AsciiToSvg.similar_svg( original_svg, copy_svg )
# => => {:hexdigest1=>"79d5e81d230214749672a1c10e103c46", :hexdigest2=>"f48cacecf2720633dd081c3421d84981", :unique=>false, :score=>0.002799275481640046}
```
```
CANVAS
-------------------------------------
| ^
| | Margin Top
| GRID v
| ----------------------------
| | CELL
| | ------------------------
| | | | Offset x |
| Margin | | Symbol |<-------->|
| Left | | | |
| <----> | |------------ |
| | | ^ |
| | | | Offset Y |
| | | V |
| | ------------------------
```
| Nr | Sign | Image | SVG Element |
| :-- | :-- | :-- | :-- |
| 1 | "\\" | 
| Line |
| 2 | "\|" | 
| Line |
| 3 | "/" | 
| Line |
| 4 | "-" | 
| Line |
| 5 | "+" | 
| Line |
| 6 | "x" | 
| Line |
| 7 | "o" | 
| Ellipse |
| 8 | "#" | 
| Rectangle |
| 9 | "." | 
| |
### Canvas
Defines the full width and height.
| Nr | Name | Key | Default | Type | Description |
| :-- | :-- | :-- | :-- | :-- | :-- |
| A.1. | Size X |:canvas__size__x | `500` | Integer | Set width of canvas |
| A.2. | Margin Left |:canvas__margin__left | `0` | Integer | Set margin on the left side |
| A.3. | Margin Top |:canvas__margin__top | `0` | Integer | Set margin on the top |
| A.4. | Margin Right |:canvas__margin__right | `0` | Integer | Set margin on the right |
| A.5. | Margin Bottom |:canvas__margin__bottom | `0` | Integer | Set margin on the bottom |
### Cell
Defines the Area of one symbol including offset.
| Nr | Name | Key | Default | Type | Description |
| :-- | :-- | :-- | :-- | :-- | :-- |
| B.1. | X Offset |:cell__x__offset | `0` | Integer | Define the X (width) offset to the next cell |
| B.2. | Y Offset |:cell__y__offset | `0` | Integer | Define the Y (height) offset to the next cell |
### Symbols
Defines which `char` will be interpreted as "`svg element`"
| Nr | Name | Key | Default | Type | Image |
| :-- | :-- | :-- | :-- | :-- | :-- |
| C.1. | \ |:"symbols__\\\\" | `[ "\\" ]` | Array | |
| C.2. | / | :"symbols__/" | `[ "/" ]` | Array | |
| C.3. | X | :"symbols__X" | `[ "X", "x" ]` | Array | |
| C.4. | - | :"symbols__-" | `[ "-" ]` | Array | |
| C.5. | \| | :"symbols__\" | | `[ "\|", "1" ]` | Array | |
| C.6. | O | :"symbols__O" | `[ "O", "o", "0" ]` | Array | |
| C.7. | + | :"symbols__+" | `[ "+" ]` | Array | |
| C.8. | # | :"symbols__#" | `[ "#" ]` | Array | |
### Style
Defines all Style Attributes. Styles can only changed by type of the svg element except "Canvas". Under "Symbol" you can find out which Symbol uses which svg Element.
[**Line**](#line)
| Nr | Name | Key | Default | Type | Description |
| :-- | :-- | :-- | :-- | :-- | :-- |
| D.1. | Stroke Width |:style__line__stroke__width | `2.0` | Float | Define width of stroke, please notice linecap type for desired behavior |
| D.2. | Stroke Color |:style__line__stroke__color | `"rgb(0,0,0)"` | String | Define color of stroke in RGB, you can also use HTML Color names or "none" |
| D.3. | Stroke Opacity |:style__line__stroke__opacity | `1.0` | Float | Define opacity of the stroke, use floating numbers. |
| D.4. | Stroke Linecap |:style__line__stroke__linecap | `"square"` | String | Defines behavior of line ("butt" / "round" / "sqaure"). Detailed explaination: [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap)|
[**Ellipse**](#ellipse)
| Nr | Name | Key | Default | Type | Description |
| :-- | :-- | :-- | :-- | :-- | :-- |
| D.5. | Stroke Width |:style__ellipse__stroke__width | `2.0` | Float | Define stroke width, use floating numbers |
| D.6. | Stroke Color |:style__ellipse__stroke__color | `"rgb(0,0,0)"` | String | Define stroke color in RGB, you can also use HTML Color names or "none". |
| D.7. | Stroke Opacity |:style__ellipse__stroke__opacity | `1.0` | Float | Set stroke opacity, use floating numbers. |
| D.8. | Stroke Linecap |:style__ellipse__stroke__linecap | `"square"` | String | Defines behavior of ellipse ("butt" / "round" / "sqaure"). Detailed explaination: [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap)| |
| D.9. | Fill |:style__ellipse__fill | `"none"` | String | Define color fill of |
[**Rectangle**](#rectangle)
| Nr | Name | Key | Default | Type | Description |
| :-- | :-- | :-- | :-- | :-- | :-- |
| D.10. | Fill Color |:style__rectangle__fill__color | `"rgb(0,0,0)"` | String | Define infill color in RGB, you can also use HTML Color names or "none". |
| D.11. | Fill Opacity |:style__rectangle__fill__opacity | `1.0` | Float | Set infill opacity, use floating numbers. |
[**Canvas**](#canvas)
| Nr | Name | Key | Default | Type | Description |
| :-- | :-- | :-- | :-- | :-- | :-- |
| D.12. | Fill Color |:style__canvas__fill__color | `"rgb(255,255,255)"` | String | Define canvas infill color in RGB, you can also use HTML Color names or "none". |
| D.13. | Fill Opacity |:style__canvas__fill__opacity | `1.0` | Float | Set canvas infill opacity, use floating numbers.|
Bug reports and pull requests are welcome on GitHub at https://github.com/a6b8/ascii_to_svg. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/a6b8/ascii_to_svg/blob/master/CODE_OF_CONDUCT.md).
- Proof of Concept, not battle-tested.
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
Everyone interacting in the AsciiToSvg project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/a6b8/ascii_to_svg/blob/master/CODE_OF_CONDUCT.md).
Please ⭐️ star this Project, every ⭐️ star makes us very happy!