geo_pattern 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.md +11 -4
- data/geopatterns.gemspec +1 -1
- data/lib/geo_pattern/pattern.rb +43 -39
- data/lib/geo_pattern/version.rb +1 -1
- metadata +3 -3
data/README.md
CHANGED
@@ -41,11 +41,10 @@ Get the Base64 encoded string:
|
|
41
41
|
|
42
42
|
puts pattern.base64_string
|
43
43
|
# => PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC...
|
44
|
-
|
45
|
-
You can then use this string to set the background:
|
46
44
|
|
47
|
-
|
45
|
+
You can then use this string to set the background:
|
48
46
|
|
47
|
+
<div style="background-image: <%=pattern.uri_image%>"></div>
|
49
48
|
|
50
49
|
## Available patterns
|
51
50
|
|
@@ -116,8 +115,16 @@ You can then use this string to set the background:
|
|
116
115
|
|
117
116
|
## Contributing
|
118
117
|
|
119
|
-
1. Fork it ( http://github.com/jasonlong/
|
118
|
+
1. Fork it ( http://github.com/jasonlong/geo_pattern/fork )
|
120
119
|
2. Create your feature branch (`git checkout -b my-new-feature`)
|
121
120
|
3. Commit your changes (`git commit -am 'Add some feature'`)
|
122
121
|
4. Push to the branch (`git push origin my-new-feature`)
|
123
122
|
5. Create new Pull Request
|
123
|
+
|
124
|
+
## Ports
|
125
|
+
|
126
|
+
Brandon Mills is working on completing my original Javascript version:
|
127
|
+
https://github.com/btmills/geopatterns-js
|
128
|
+
|
129
|
+
Bryan Veloso is porting the library to Python:
|
130
|
+
https://github.com/bryanveloso/geopatterns
|
data/geopatterns.gemspec
CHANGED
@@ -10,7 +10,7 @@ Gem::Specification.new do |spec|
|
|
10
10
|
spec.email = ["jlong@github.com"]
|
11
11
|
spec.summary = %q{Generate SVG beautiful patterns}
|
12
12
|
spec.description = %q{Generate SVG beautiful patterns}
|
13
|
-
spec.homepage = "https://github.com/jasonlong/
|
13
|
+
spec.homepage = "https://github.com/jasonlong/geo_pattern"
|
14
14
|
spec.license = "MIT"
|
15
15
|
|
16
16
|
spec.files = `git ls-files -z`.split("\x0")
|
data/lib/geo_pattern/pattern.rb
CHANGED
@@ -57,6 +57,10 @@ module GeoPattern
|
|
57
57
|
Base64.strict_encode64(svg.to_s)
|
58
58
|
end
|
59
59
|
|
60
|
+
def uri_image
|
61
|
+
"url(data:image/svg+xml;base64,#{base64_string});"
|
62
|
+
end
|
63
|
+
|
60
64
|
def generate_background
|
61
65
|
hue_offset = map(hex_val(14, 3), 0, 4095, 0, 359)
|
62
66
|
sat_offset = hex_val(17, 1)
|
@@ -87,7 +91,7 @@ module GeoPattern
|
|
87
91
|
send("geo_#{PATTERNS[pattern]}")
|
88
92
|
end
|
89
93
|
end
|
90
|
-
|
94
|
+
|
91
95
|
def geo_hexagons
|
92
96
|
scale = hex_val(0, 1)
|
93
97
|
side_length = map(scale, 0, 15, 8, 60)
|
@@ -234,19 +238,19 @@ module GeoPattern
|
|
234
238
|
if (x == 0)
|
235
239
|
svg.group(plus_shape, styles.merge({
|
236
240
|
"transform" => "translate(#{4*plus_size - x*square_size + dx*square_size - square_size},#{y*plus_size - y*square_size - plus_size/2})"}))
|
237
|
-
end
|
241
|
+
end
|
238
242
|
|
239
243
|
# Add an extra row on the bottom that matches the first row, for tiling.
|
240
244
|
if (y == 0)
|
241
245
|
svg.group(plus_shape, styles.merge({
|
242
246
|
"transform" => "translate(#{x*plus_size - x*square_size + dx*square_size - square_size},#{4*plus_size - y*square_size - plus_size/2})"}))
|
243
|
-
end
|
247
|
+
end
|
244
248
|
|
245
249
|
# Add an extra one at top-right and bottom-right, for tiling.
|
246
250
|
if (x == 0 && y == 0)
|
247
251
|
svg.group(plus_shape, styles.merge({
|
248
252
|
"transform" => "translate(#{4*plus_size - x*square_size + dx*square_size - square_size},#{4*plus_size - y*square_size - plus_size/2})"}))
|
249
|
-
end
|
253
|
+
end
|
250
254
|
i += 1
|
251
255
|
end
|
252
256
|
end
|
@@ -282,29 +286,29 @@ module GeoPattern
|
|
282
286
|
if (x == 0)
|
283
287
|
svg.group(x_shape, styles.merge({
|
284
288
|
"transform" => "translate(#{6*x_size/2 - x_size/2},#{dy - y*x_size/2}) rotate(45, #{x_size/2}, #{x_size/2})"}))
|
285
|
-
end
|
289
|
+
end
|
286
290
|
|
287
291
|
# Add an extra row on the bottom that matches the first row, for tiling.
|
288
292
|
if (y == 0)
|
289
293
|
dy = x % 2 == 0 ? 6*x_size - x_size/2 : 6*x_size - x_size/2 + x_size/4;
|
290
294
|
svg.group(x_shape, styles.merge({
|
291
295
|
"transform" => "translate(#{x*x_size/2 - x_size/2},#{dy - 6*x_size/2}) rotate(45, #{x_size/2}, #{x_size/2})"}))
|
292
|
-
end
|
296
|
+
end
|
293
297
|
|
294
298
|
# These can hang off the bottom, so put a row at the top for tiling.
|
295
299
|
if (y == 5)
|
296
300
|
svg.group(x_shape, styles.merge({
|
297
301
|
"transform" => "translate(#{x*x_size/2 - x_size/2},#{dy - 11*x_size/2}) rotate(45, #{x_size/2}, #{x_size/2})"}))
|
298
|
-
end
|
302
|
+
end
|
299
303
|
|
300
304
|
# Add an extra one at top-right and bottom-right, for tiling.
|
301
305
|
if (x == 0 && y == 0)
|
302
306
|
svg.group(x_shape, styles.merge({
|
303
307
|
"transform" => "translate(#{6*x_size/2 - x_size/2},#{dy - 6*x_size/2}) rotate(45, #{x_size/2}, #{x_size/2})"}))
|
304
|
-
end
|
308
|
+
end
|
305
309
|
i += 1
|
306
|
-
end
|
307
|
-
end
|
310
|
+
end
|
311
|
+
end
|
308
312
|
end
|
309
313
|
|
310
314
|
def geo_overlapping_circles
|
@@ -334,7 +338,7 @@ module GeoPattern
|
|
334
338
|
# Add an extra one at top-right, for tiling.
|
335
339
|
if (x == 0)
|
336
340
|
svg.circle(6*radius, y*radius, radius, styles)
|
337
|
-
end
|
341
|
+
end
|
338
342
|
|
339
343
|
# Add an extra row at the end that matches the first row, for tiling.
|
340
344
|
if (y == 0)
|
@@ -343,12 +347,12 @@ module GeoPattern
|
|
343
347
|
|
344
348
|
# Add an extra one at bottom-right, for tiling.
|
345
349
|
if (x == 0 and y == 0)
|
346
|
-
svg.circle(6*radius, 6*radius, radius, styles)
|
347
|
-
end
|
350
|
+
svg.circle(6*radius, 6*radius, radius, styles)
|
351
|
+
end
|
348
352
|
i += 1
|
349
|
-
end
|
353
|
+
end
|
350
354
|
end
|
351
|
-
end
|
355
|
+
end
|
352
356
|
|
353
357
|
def geo_octogons
|
354
358
|
square_size = map(hex_val(0, 1), 0, 15, 10, 60)
|
@@ -468,20 +472,20 @@ module GeoPattern
|
|
468
472
|
}
|
469
473
|
}
|
470
474
|
|
471
|
-
svg.circle(x*ring_size, y*ring_size, ring_size - stroke_width/2, styles)
|
475
|
+
svg.circle(x*ring_size, y*ring_size, ring_size - stroke_width/2, styles)
|
472
476
|
|
473
477
|
# Add an extra one at top-right, for tiling.
|
474
478
|
if (x == 0)
|
475
|
-
svg.circle(6*ring_size, y*ring_size, ring_size - stroke_width/2, styles)
|
476
|
-
end
|
479
|
+
svg.circle(6*ring_size, y*ring_size, ring_size - stroke_width/2, styles)
|
480
|
+
end
|
477
481
|
|
478
482
|
if (y == 0)
|
479
|
-
svg.circle(x*ring_size, 6*ring_size, ring_size - stroke_width/2, styles)
|
483
|
+
svg.circle(x*ring_size, 6*ring_size, ring_size - stroke_width/2, styles)
|
480
484
|
end
|
481
485
|
|
482
486
|
if (x == 0 and y == 0)
|
483
|
-
svg.circle(6*ring_size, 6*ring_size, ring_size - stroke_width/2, styles)
|
484
|
-
end
|
487
|
+
svg.circle(6*ring_size, 6*ring_size, ring_size - stroke_width/2, styles)
|
488
|
+
end
|
485
489
|
i += 1
|
486
490
|
end
|
487
491
|
end
|
@@ -514,8 +518,8 @@ module GeoPattern
|
|
514
518
|
if y % 2 == 0
|
515
519
|
rotation = x % 2 == 0 ? 180 : 0
|
516
520
|
else
|
517
|
-
rotation = x % 2 != 0 ? 180 : 0
|
518
|
-
end
|
521
|
+
rotation = x % 2 != 0 ? 180 : 0
|
522
|
+
end
|
519
523
|
|
520
524
|
svg.polyline(triangle, styles.merge({
|
521
525
|
"transform" => "translate(#{x*side_length*0.5 - side_length/2}, #{triangle_height*y}) rotate(#{rotation}, #{side_length/2}, #{triangle_height/2})"}))
|
@@ -524,7 +528,7 @@ module GeoPattern
|
|
524
528
|
if (x == 0)
|
525
529
|
svg.polyline(triangle, styles.merge({
|
526
530
|
"transform" => "translate(#{6*side_length*0.5 - side_length/2}, #{triangle_height*y}) rotate(#{rotation}, #{side_length/2}, #{triangle_height/2})"}))
|
527
|
-
end
|
531
|
+
end
|
528
532
|
i += 1
|
529
533
|
end
|
530
534
|
end
|
@@ -557,8 +561,8 @@ module GeoPattern
|
|
557
561
|
if y % 2 == 0
|
558
562
|
rotation = x % 2 == 0 ? 180 : 0
|
559
563
|
else
|
560
|
-
rotation = x % 2 != 0 ? 180 : 0
|
561
|
-
end
|
564
|
+
rotation = x % 2 != 0 ? 180 : 0
|
565
|
+
end
|
562
566
|
|
563
567
|
svg.polyline(triangle, styles.merge({
|
564
568
|
"transform" => "translate(#{triangle_width*x}, #{y*side_length*0.5 - side_length/2}) rotate(#{rotation}, #{triangle_width/2}, #{side_length/2})"}))
|
@@ -567,8 +571,8 @@ module GeoPattern
|
|
567
571
|
if (y == 0)
|
568
572
|
svg.polyline(triangle, styles.merge({
|
569
573
|
"transform" => "translate(#{triangle_width*x}, #{6*side_length*0.5 - side_length/2}) rotate(#{rotation}, #{triangle_width/2}, #{side_length/2})"}))
|
570
|
-
|
571
|
-
end
|
574
|
+
|
575
|
+
end
|
572
576
|
i += 1
|
573
577
|
end
|
574
578
|
end
|
@@ -605,7 +609,7 @@ module GeoPattern
|
|
605
609
|
if (x == 0)
|
606
610
|
svg.polyline(diamond, styles.merge({
|
607
611
|
"transform" => "translate(#{6*diamond_width - diamond_width/2 + dx}, #{diamond_height/2*y - diamond_height/2})"}))
|
608
|
-
end
|
612
|
+
end
|
609
613
|
|
610
614
|
# Add an extra row at the end that matches the first row, for tiling.
|
611
615
|
if (y == 0)
|
@@ -648,7 +652,7 @@ module GeoPattern
|
|
648
652
|
|
649
653
|
svg.rect(x*square_size + x*block_size*2 + block_size/2,
|
650
654
|
y*square_size + y*block_size*2 + block_size/2,
|
651
|
-
square_size, square_size, styles)
|
655
|
+
square_size, square_size, styles)
|
652
656
|
|
653
657
|
val = hex_val(40-i, 1)
|
654
658
|
opacity = opacity(val)
|
@@ -696,7 +700,7 @@ module GeoPattern
|
|
696
700
|
|
697
701
|
# horizontal stripes
|
698
702
|
i = 0
|
699
|
-
18.times do
|
703
|
+
18.times do
|
700
704
|
space = hex_val(i, 1)
|
701
705
|
height += space + 5
|
702
706
|
|
@@ -794,28 +798,28 @@ module GeoPattern
|
|
794
798
|
when 11 # right / middle triangle
|
795
799
|
svg.polyline(triangle, styles.merge({"transform" => "translate(#{tile_width-side_length/2}, #{tile_height/2 - side_length/2}) scale(-1, 1)"}))
|
796
800
|
when 12 # left / top square
|
797
|
-
svg.rect(0, 0, side_length, side_length,
|
801
|
+
svg.rect(0, 0, side_length, side_length,
|
798
802
|
styles.merge({"transform" => "translate(#{side_length/2}, #{side_length/2}) rotate(-30, 0, 0)"}))
|
799
803
|
when 13 # right / top square
|
800
|
-
svg.rect(0, 0, side_length, side_length,
|
804
|
+
svg.rect(0, 0, side_length, side_length,
|
801
805
|
styles.merge({"transform" => "scale(-1, 1) translate(#{-tile_width+side_length/2}, #{side_length/2}) rotate(-30, 0, 0)" }))
|
802
806
|
when 14 # left / center-top square
|
803
|
-
svg.rect(0, 0, side_length, side_length,
|
807
|
+
svg.rect(0, 0, side_length, side_length,
|
804
808
|
styles.merge({"transform" => "translate(#{side_length/2}, #{tile_height/2-side_length/2-side_length}) rotate(30, 0, #{side_length})" }))
|
805
809
|
when 15 # right / center-top square
|
806
|
-
svg.rect(0, 0, side_length, side_length,
|
810
|
+
svg.rect(0, 0, side_length, side_length,
|
807
811
|
styles.merge({"transform" => "scale(-1, 1) translate(#{-tile_width+side_length/2}, #{tile_height/2-side_length/2-side_length}) rotate(30, 0, #{side_length})" }))
|
808
812
|
when 16 # left / center-top square
|
809
|
-
svg.rect(0, 0, side_length, side_length,
|
813
|
+
svg.rect(0, 0, side_length, side_length,
|
810
814
|
styles.merge({"transform" => "scale(1, -1) translate(#{side_length/2}, #{-tile_height+tile_height/2-side_length/2-side_length}) rotate(30, 0, #{side_length})" }))
|
811
815
|
when 17 # right / center-bottom square
|
812
|
-
svg.rect(0, 0, side_length, side_length,
|
816
|
+
svg.rect(0, 0, side_length, side_length,
|
813
817
|
styles.merge({"transform" => "scale(-1, -1) translate(#{-tile_width+side_length/2}, #{-tile_height+tile_height/2-side_length/2-side_length}) rotate(30, 0, #{side_length})" }))
|
814
818
|
when 18 # left / bottom square
|
815
|
-
svg.rect(0, 0, side_length, side_length,
|
819
|
+
svg.rect(0, 0, side_length, side_length,
|
816
820
|
styles.merge({"transform" => "scale(1, -1) translate(#{side_length/2}, #{-tile_height+side_length/2}) rotate(-30, 0, 0)"}))
|
817
821
|
when 19 # right / bottom square
|
818
|
-
svg.rect(0, 0, side_length, side_length,
|
822
|
+
svg.rect(0, 0, side_length, side_length,
|
819
823
|
styles.merge({"transform" => "scale(-1, -1) translate(#{-tile_width+side_length/2}, #{-tile_height+side_length/2}) rotate(-30, 0, 0)"}))
|
820
824
|
end
|
821
825
|
end
|
data/lib/geo_pattern/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: geo_pattern
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.
|
4
|
+
version: 1.1.0
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2014-02-
|
12
|
+
date: 2014-02-18 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: color
|
@@ -76,7 +76,7 @@ files:
|
|
76
76
|
- lib/geo_pattern/pattern.rb
|
77
77
|
- lib/geo_pattern/svg.rb
|
78
78
|
- lib/geo_pattern/version.rb
|
79
|
-
homepage: https://github.com/jasonlong/
|
79
|
+
homepage: https://github.com/jasonlong/geo_pattern
|
80
80
|
licenses:
|
81
81
|
- MIT
|
82
82
|
post_install_message:
|