Last active
August 29, 2015 14:03
-
-
Save kieranajp/181b99ecbd760d38a706 to your computer and use it in GitHub Desktop.
Create colours of varying opacities and very quickly testing them against various backgrounds, using SVG & coffeescript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <style> | |
| body { | |
| margin: 0; | |
| } | |
| div { | |
| width: 50%; | |
| margin: 0; | |
| float: left; | |
| } | |
| .white { | |
| background-color: #fbfbf9; | |
| } | |
| .white svg polygon { | |
| stroke : #fbfbf9; | |
| } | |
| .black { | |
| background-color: #212121; | |
| } | |
| .black svg polygon { | |
| stroke: #212121; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Keep black-on-white and white-on-black there as defaults, only have other colours below. --> | |
| <div class="white"> | |
| <svg style="height: 450px; width: 300px; margin-left: 100px; margin-top: 100px;"> | |
| <polygon points="0,0, 300,0, 150,300" style="fill: rgb(0, 0, 0); fill-opacity: 0.15; stroke-width: 2px;"></polygon> | |
| <polygon points="25,0, 275,0, 150,250" style="fill: rgb(0, 0, 0); fill-opacity: 0.15; stroke-width: 2px;"></polygon> | |
| <polygon points="50,0, 250,0, 150,200" style="fill: rgb(0, 0, 0); fill-opacity: 0.15; stroke-width: 2px;"></polygon> | |
| <polygon points="75,0, 225,0, 150,150" style="fill: rgb(0, 0, 0); fill-opacity: 0.15; stroke-width: 2px;"></polygon> | |
| <polygon points="100,0, 200,0, 150,100" style="fill: rgb(0, 0, 0); fill-opacity: 0.15; stroke-width: 2px;"></polygon> | |
| <polygon points="125,0, 175,0, 150,50" style="fill: rgb(0, 0, 0); fill-opacity: 0.15; stroke-width: 2px;"></polygon> | |
| <polygon points="150,0, 150,0, 150,0" style="fill: rgb(0, 0, 0); fill-opacity: 0.15; stroke-width: 2px;"></polygon> | |
| <text text-anchor="middle" y="380" x="150" style="font-size: 48px; font-family: ClearSans-Thin; font-weight: 100; fill: rgb(0, 0, 0);">Verse</text> | |
| <text text-anchor="middle" y="420" x="150" style="font-family: ClearSans-Thin; font-weight: 100; fill: rgb(0, 0, 0); fill-opacity: 0.5;">#000000 @ 0.15</text> | |
| </svg> | |
| </div> | |
| <div class="black"> | |
| <svg style="height: 450px; width: 300px; margin-left: 100px; margin-top: 100px;"> | |
| <polygon points="0,0, 300,0, 150,300" style="fill: rgb(255,255,255); fill-opacity: 0.15; stroke-width: 2px;"></polygon> | |
| <polygon points="25,0, 275,0, 150,250" style="fill: rgb(255,255,255); fill-opacity: 0.15; stroke-width: 2px;"></polygon> | |
| <polygon points="50,0, 250,0, 150,200" style="fill: rgb(255,255,255); fill-opacity: 0.15; stroke-width: 2px;"></polygon> | |
| <polygon points="75,0, 225,0, 150,150" style="fill: rgb(255,255,255); fill-opacity: 0.15; stroke-width: 2px;"></polygon> | |
| <polygon points="100,0, 200,0, 150,100" style="fill: rgb(255,255,255); fill-opacity: 0.15; stroke-width: 2px;"></polygon> | |
| <polygon points="125,0, 175,0, 150,50" style="fill: rgb(255,255,255); fill-opacity: 0.15; stroke-width: 2px;"></polygon> | |
| <polygon points="150,0, 150,0, 150,0" style="fill: rgb(255,255,255); fill-opacity: 0.15; stroke-width: 2px;"></polygon> | |
| <text text-anchor="middle" y="380" x="150" style="font-size: 48px; font-family: ClearSans-Thin; font-weight: 100; fill: rgb(255,255,255);">Verse</text> | |
| <text text-anchor="middle" y="420" x="150" style="font-family: ClearSans-Thin; font-weight: 100; fill: rgb(255,255,255); fill-opacity: 0.5;">#ffffff @ 0.15</text> | |
| </svg> | |
| </div> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.7.1/coffee-script.min.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
| <script type="text/coffeescript"> | |
| # add colors to this array to create a new SVG | |
| # only the color attribute is required, the others are optional | |
| colors = [ | |
| { color : '#6bbbae', opacity : 0.25, pantone : '563 C' } | |
| { color : 'rgb(140,199,185)', opacity : 0.25, pantone : '570' } # maybe not | |
| { color : 'rgb(47,121,106)', opacity : 0.25, pantone : 'FL Green 4' } | |
| { color : '#d45f59', opacity : 0.40 } | |
| { color : 'rgb(230,91,57)', opacity : 0.25, pantone : '171' } # prob no | |
| { color : 'rgb(223,71,28)', opacity : 0.25, pantone : '172' } | |
| ] | |
| # flip this to true to vary the opacity (otherwise the opacity value | |
| # specified above is ignored) | |
| useOpacity = true | |
| for c in colors | |
| # create an svg element | |
| $svg = $('<svg>') | |
| $svg.css | |
| height : '450px' | |
| width : '300px' | |
| marginLeft : '100px' | |
| marginTop : '100px' | |
| for p in [0..6] | |
| # create six triangles to add to the SVG element | |
| $polygon = $('<polygon>') | |
| # set a default opacity if one's not specified | |
| if not c.opacity? or not useOpacity | |
| c.opacity = 1 | |
| $polygon.css | |
| fill : c.color | |
| fillOpacity : c.opacity | |
| strokeWidth : 2 | |
| # vary the triangles' sizes so they're concentric | |
| n = 25 * p | |
| $polygon.attr 'points', "#{n},0, #{300-n},0, 150,#{300-(n * 2)}" | |
| $svg.append $polygon | |
| # add text under the logo | |
| $name = $('<text text-anchor="middle">').text 'Verse' | |
| $text = $('<text text-anchor="middle">').text "#{c.color} @ #{c.opacity}" | |
| if c.pantone | |
| $text.append " (#{c.pantone})" | |
| $name.attr | |
| y : 380 | |
| x : 150 | |
| $text.attr | |
| y : 420 | |
| x : 150 | |
| $name.css | |
| fontSize : 48 | |
| fontFamily : 'ClearSans-Thin' | |
| fontWeight : 100 | |
| fill : c.color | |
| $text.css | |
| fontFamily : 'ClearSans-Thin' | |
| fontWeight : 100 | |
| fill : c.color | |
| fillOpacity: 0.5 | |
| # chuck it all into the DOM | |
| $svg.append $name | |
| $svg.append $text | |
| $('div').append $svg | |
| # this deals with a bug: jquery's append doesn't like SVG unless it's XHTML | |
| # (because SVG is XML, I guess), so we need to tell the DOM to refresh so | |
| # that the SVGs actually display | |
| $("body").html $("body").html() | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment