Skip to content

Instantly share code, notes, and snippets.

@kieranajp

kieranajp/svg.html

Last active August 29, 2015 14:03
Show Gist options
  • Save kieranajp/181b99ecbd760d38a706 to your computer and use it in GitHub Desktop.
Save kieranajp/181b99ecbd760d38a706 to your computer and use it in GitHub Desktop.
Download ZIP
Create colours of varying opacities and very quickly testing them against various backgrounds, using SVG & coffeescript
Raw
svg.html
<!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