This module generates beautiful svg images based on a input string.
character_set = [ '-', '/', '|', "\", '#' ]
character_set = [ '-', '|', '#' ]
character_set = [ '-', '|', '#', 'o', '\' ]
character_set = [ '|', 'o', '.' ]
options = {
style__line__stroke__color: 'brown',
style__ellipse__stroke__color: 'orange'
}
character_set = [ '/', '\' ]
options = {
style__line__stroke__color: 'brown',
style__ellipse__stroke__color: 'orange'
}
character_set = [ 'x', '.' ]
character_set = [ '|', '.', '-' ]
options = {
style__canvas__fill__color: '#0A0C10',
style__line__stroke__color: '#8D949D'
}
- Examples
- Quickstart
- Functions
- Naming
- Symbols
- Options
- Contributing
- Limitations
- Credits
- License
- Code of Conduct
- Support my Work
- Install
gem
gem install 'ascii_to_svg'
- Run Code
require 'ascii_to_svg'
# Generate Example String
ascii = AsciiToSvg.example_string( [ 'x', 'o' ], 256 )
# Generate SVG
svg = AsciiToSvg.from_string( ascii, 16, {} )
# => "<svg xmlns=\"http://www.w3.org/2000/svg ...
Add this line to your application's Gemfile:
gem 'ascii_to_svg'
And then execute:
$ bundle install
Or install it yourself as:
$ gem install ascii_to_svg
On Rubygems:
Output all Parameter
AsciiToSvg.options
# => {:canvas=>{:size=>{:x=>500 ...
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 |
one = AsciiToSvg.example_string()
two = AsciiToSvg.example_string( [ 'x', 'o' ], 512 )
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 |
AsciiToSvg.from_string(
ascii,
length,
options
)
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 | "." |
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 |
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 |
Defines which char
will be interpreted as "svg element
"
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.
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 |
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 |
D.9. | Fill | :style__ellipse__fill | "none" |
String | Define color fill of |
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. |
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.
- Proof of Concept, not battle-tested.
The gem is available as open source under the terms of the MIT License.
Everyone interacting in the AsciiToSvg project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.
Please ⭐️ star this Project, every ⭐️ star makes us very happy!