Skip to content

Instantly share code, notes, and snippets.

@ramsesoriginal

ramsesoriginal/dabblet.css

Created April 19, 2012 09:37
Show Gist options
  • Save ramsesoriginal/2419968 to your computer and use it in GitHub Desktop.
Save ramsesoriginal/2419968 to your computer and use it in GitHub Desktop.
Download ZIP
Test SVG (mybe even paw)
Raw
dabblet.css
/**
* Test SVG (mybe even paw)
*/
@import url(http://fonts.googleapis.com/css?family=Vollkorn:700|Play);
*{
fill:none;
stroke: #000000;
}
body {
text-align:center;
}
#drawing {
margin-top: 100px;
margin-left:auto;
margin-right:auto;
text-align:center;
display:block;
width: 400px;
height: 400px;
background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 75%);
}
#palm{
font-family: 'Vollkorn', serif;
font-size: 200px;
text-anchor: middle;
line-height: 1;
}
.finger,
.letter{
fill:rgba(127, 127, 127, 0.5);
}
#area{
fill:rgba(170, 170, 170, 0.5);
}
.finger,
#area {
filter:url(#dropshadowTransparency);
}
.letter {
filter:url(#dropshadow);
}
#linktextpath{
font-family: 'Play', sans-serif;
stroke: rgba(0, 0, 0, 0.01);
fill: none;
}
#drawing:hover #linktextpath{
stroke: rgba(0, 0, 0, 0.2);
}
#drawing:hover #linktextpath:hover{
stroke: rgba(0, 0, 0, 0.5);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<svg id="drawing">
<defs>
<g id="protofingerSmall" >
<path d=" M200,200
m0,-100
m0,-100
c37.5,50 37.5,100 37.5,95
c-26,-15 -49,-15 -75,0
c0,0 0,-50, 37.5,-95
" class="finger small" />
</g>
<g id="protofingerBig" >
<path d=" M200,200
m0,-100
m0,-100
c50,50 50,100 50,100
c-25,-25 -75,-25 -100,0
c0,0 0,-50, 50,-100
" class="finger big"/>
</g>
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
<feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
<feMerge>
<feMergeNode/> <!-- this contains the offset blurred image -->
<feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
</feMerge>
</filter>
<filter id="dropshadowTransparency" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
<feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
<feComponentTransfer>
<feFuncA type="linear" slope="0.5"/>
</feComponentTransfer><feMerge>
<feMergeNode/> <!-- this contains the offset blurred image -->
<feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
</feMerge>
</filter>
<path id="linkPath" d=" M200,200
m0,-100
m0,-15
a100,100 0 0 1 0,230
" transform="rotate(60, 200, 200)"/>
</defs>
<g id="paw">
<g id="fingers">
<g id="middle">
<use xlink:href="#protofingerSmall" />
</g>
<g id="left">
<use xlink:href="#protofingerSmall" transform="rotate(-25, 200, 200)" />
</g>
<g id="right">
<use xlink:href="#protofingerSmall" transform="rotate(25, 200, 200)" />
</g>
<g id="thumb">
<use xlink:href="#protofingerBig" transform="rotate(-75, 200, 200)"/>
</g>
<g id="bottom">
<use xlink:href="#protofingerBig" transform="rotate(180, 200, 200)"/>
</g>
</g>
<g id="center">
<circle cx="200" cy="200" r="100" id="area" />
</g>
<g id="palm">
<text x="200" y="200" dy="0.4em" class="s letter">
S
</text>
<text x="200" y="200" dy="0.25em"class="i letter">
I
</text>
</g>
<g id="link">
<a xlink:href="http://ramsesoriginal.org" target="_blank">
<text id="linktext">
<textPath id="linktextpath" xlink:href="#linkPath" >
ramsesoriginal.org
</textPath>
</text>
</a>
</g>
</g>
</svg>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment