Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div>
        <p>Original SVG image:</p>
        <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   id="svg2"
   sodipodi:version="0.32"
   inkscape:version="0.46+devel, revision 19938"
   width="212"
   height="284"
   version="1.0"
   sodipodi:docname="pipo.svg"
   inkscape:output_extension="org.inkscape.output.svg.inkscape"
   inkscape:export-filename="C:\Documents and Settings\Nevit\Desktop\pipo2.png"
   inkscape:export-xdpi="424.64789"
   inkscape:export-ydpi="424.64789">
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs5">
    <inkscape:perspective
       sodipodi:type="inkscape:persp3d"
       inkscape:vp_x="0 : 0.5 : 1"
       inkscape:vp_y="0 : 1000 : 0"
       inkscape:vp_z="1 : 0.5 : 1"
       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
       id="perspective9" />
  </defs>
  <sodipodi:namedview
     inkscape:window-height="628"
     inkscape:window-width="797"
     inkscape:pageshadow="2"
     inkscape:pageopacity="1"
     guidetolerance="10.0"
     gridtolerance="10.0"
     objecttolerance="10.0"
     borderopacity="1.0"
     bordercolor="#666666"
     pagecolor="#ffffff"
     id="base"
     showgrid="false"
     inkscape:zoom="1.5950704"
     inkscape:cx="93.461369"
     inkscape:cy="154.53863"
     inkscape:window-x="22"
     inkscape:window-y="29"
     inkscape:current-layer="svg2" />
  <path
     style="fill:#000000"
     d="m 56.454693,279.25 c 0.09989,-0.9625 0.684047,-2.93946 1.298123,-4.39324 0.614075,-1.45378 1.421918,-4.27125 1.795205,-6.26104 0.373288,-1.9898 1.101663,-3.87921 1.618612,-4.1987 1.524722,-0.94234 5.444314,-10.54936 6.177479,-15.14118 0.37271,-2.33429 1.797757,-6.69295 3.166771,-9.68592 C 71.879898,236.57695 73,233.73147 73,233.24663 73,231.69091 83.897394,207.51404 87.486449,201.10711 88.960769,198.47525 88.295433,196.03817 84.590648,190.5 80.975432,185.09572 69.574993,172.99909 67.514967,172.38156 66.406735,172.04935 64.15,171.19481 62.5,170.48259 c -1.65,-0.71222 -4.2375,-1.57074 -5.75,-1.90782 -1.5125,-0.33708 -2.75,-1.08644 -2.75,-1.66525 0,-0.57881 -0.720154,-1.77253 -1.600341,-2.65272 -1.169114,-1.16911 -1.435828,-2.62915 -0.989812,-5.41838 0.485227,-3.03444 0.193263,-4.23531 -1.422577,-5.85115 -2.271063,-2.27106 -4.406476,-1.67818 -6.958029,1.93185 -6.144041,5.54937 -13.657093,9.99858 -20.758735,14.37704 -5.878965,3.14342 -6.774652,2.95875 -11.951332,-2.46408 C 5.4982687,161.78193 5.2413317,159.12692 9.2024049,155.29214 11.016082,153.53629 13.175,152.2114 14,152.34794 c 3.263602,0.54012 6.073071,2.89118 7.480693,6.2601 0.982581,2.35164 1.903067,3.29566 2.748351,2.8186 0.699026,-0.39451 5.023705,-3.2394 9.610398,-6.32197 4.586693,-3.08257 9.874193,-6.39571 11.75,-7.36254 3.964391,-2.04333 4.207361,-2.96913 1.287949,-4.90755 -1.642793,-1.09077 -2.11779,-2.41813 -2.101288,-5.87197 C 44.811548,129.54416 44.283617,128.2212 41,127.5 36.909719,126.60162 35.979872,122.87107 38.871405,118.96006 40.042132,117.37657 41,115.86032 41,115.59062 c 0,-0.26969 1.35,-2.49068 3,-4.93551 3.352667,-4.96771 3.769818,-7.42247 1.414906,-8.32614 -1.225671,-0.47033 -1.435648,-1.42691 -0.926023,-4.218612 0.362488,-1.985697 1.261945,-4.547756 1.998793,-5.693464 0.736848,-1.145708 1.650368,-4.15463 2.030044,-6.686493 0.379676,-2.531863 2.477777,-8.119465 4.662445,-12.416894 4.099632,-8.064327 6.518784,-14.258605 7.128201,-18.251882 0.396159,-2.595877 4.310841,-6.005907 6.93316,-6.039389 C 68.199365,49.010006 69.545112,48.1 70.232073,47 70.919034,45.9 72.164601,45 73,45 c 0.835399,0 2.080966,-0.9 2.767927,-2 1.040642,-1.666332 2.332028,-2 7.740547,-2 C 87.078813,41 90,41.438444 90,41.97432 c 0,1.361842 5.213708,3.852954 6.848612,3.27227 0.741737,-0.263449 2.316737,-0.0138 3.499998,0.554772 C 103.80891,47.464079 109.12846,49 111.42686,49 c 2.96324,0 17.11159,7.388007 21.4673,11.209824 C 136.44468,63.325149 143,71.294047 143,72.494873 c 0,0.33817 0.85356,2.502666 1.89679,4.809991 1.04324,2.307325 2.1173,5.871627 2.3868,7.920673 0.26949,2.049045 1.41811,5.298587 2.55249,7.221204 3.91658,6.638116 3.80558,11.348209 -0.66942,28.406379 -1.20308,4.58601 -2.40526,6.88095 -4.32207,8.25075 -6.5914,4.71036 -9.21896,13.76956 -6.7859,23.39613 0.55604,2.2 1.15709,5.00039 1.33568,6.22308 0.32326,2.21329 4.0634,7.37258 13.59751,18.75694 2.47781,2.78564 4.29463,6.57197 6.57475,9.57528 5.11169,4.24232 21.68175,37.13088 26.30286,52.20641 1.13997,3.71893 2.60062,7.74818 3.24588,8.95387 2.27185,4.24499 6.87971,24.68562 6.88326,30.53442 L 196,281 l -69.86346,0 c -65.939159,0 -69.853267,-0.0983 -69.681847,-1.75 z"
     id="path2699"
     sodipodi:nodetypes="csssssssssssssssccsssssssssssssssssssssssssssssssssssssccsscccc" />
</svg>
    </div>
    <div>
        <p>Same image as a font icon:</p>
        <div class="icon-silhouette_mr_pipo with-hover transition"></div>
    </div>
    <div>
        <p>Font icon with text shadow outline:</p>
        <div class="icon-silhouette_mr_pipo with-outline with-hover transition"></div>
    </div>
​
    <div>
        <p>Button with font icon and text-shadow outline:</p>
        <button class="button">
            <span class="icon-silhouette_mr_pipo as-a-button transition"></span>
        </button>
    </div>
    <div>
        <p>Button with same font icon flipped and text-shadow outline:</p>
        <button class="button">
            <span class="icon-silhouette_mr_pipo as-a-button transition flipped"></span>
        </button>
    </div>
</body>
</html>
​
 
/*
  Font Custom - icon webfonts made simple
*/
​
@font-face {
  font-family: "fontcustom";
  src: url("http://krister.fi/svgfont/fontcustom-5c22c2e1aea68f865df308b2953475ff.eot?#iefix") format("embedded-opentype"),
       url("http://krister.fi/svgfont/fontcustom-5c22c2e1aea68f865df308b2953475ff.woff") format("woff"),
       url("http://krister.fi/svgfont/fontcustom-5c22c2e1aea68f865df308b2953475ff.ttf") format("truetype"),
       url("http://krister.fi/svgfont/fontcustom-5c22c2e1aea68f865df308b2953475ff.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal;
}
​
/*
  Bootstrap Overrides
*/
​
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontcustom";
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}
​
a [class^="icon-"], a [class*=" icon-"] {
  display: inline-block;
  text-decoration: inherit;
}
​
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
  vertical-align: top;
  font-size: 1.333em;
}
​
/* keeps button heights with and without icons the same */
.btn [class^="icon-"], .btn [class*=" icon-"] {
  line-height: 0.9em;
}
​
li [class^="icon-"], li [class*=" icon-"] {
  display: inline-block;
  width: 1.25em;
  text-align: center;
}
​
/* 1.5 increased font size for icon-large * 1.25 width */
li .icon-large[class^="icon-"], li .icon-large[class*=" icon-"] {
  width: 1.875em;
}
​
li[class^="icon-"], li[class*=" icon-"] {
  margin-left: 0;
  list-style-type: none;
}
​
li[class^="icon-"]:before, li[class*=" icon-"]:before {
  text-indent: -2em;
  text-align: center;
}
​
li[class^="icon-"].icon-large:before, li[class*=" icon-"].icon-large:before {
  text-indent: -1.333em;
}
​
/*
  Icon Classes
*/
​
.icon-silhouette_mr_pipo:before { content: "\f100"; }
​
        
/*
  Custom styling
*/
​
.icon-silhouette_mr_pipo {
    display: block;
    font-size: 1000px;
    color: #00f;
    line-height: 83%;
    overflow: hidden;
    width: 212px;
    height: 284px;
}
​
.transition {
    -webkit-transition: 300ms all linear;
    transition: 300ms all linear;
}
​
.with-hover:hover {
    color: #f00;
}
​
.with-outline {
    color: #fff;
    text-shadow:
    -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}
​
.as-a-button {
    color: #fff;
    width: 160px;
    height: 160px;
    font-size: 600px;
    line-height: 78%;
    text-shadow:
    -2px -2px 0 #00f,  
    2px -2px 0 #00f,
    -2px 2px 0 #00f,
     2px 2px 0 #00f;
}
​
.button {
    background: #7abcff; /* Old browsers */
    background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
   background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
    border: 2px #00f solid;
    border-radius: 20px;
    padding: 20px;  
}
​
.button:active {
    background: #4096ee; /* Old browsers */
    background: -moz-linear-gradient(top, #4096ee 0%, #60abf8 56%, #7abcff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4096ee), color-stop(56%,#60abf8), color-stop(100%,#7abcff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #4096ee 0%,#60abf8 56%,#7abcff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #4096ee 0%,#60abf8 56%,#7abcff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #4096ee 0%,#60abf8 56%,#7abcff 100%); /* IE10+ */
    background: linear-gradient(to bottom, #4096ee 0%,#60abf8 56%,#7abcff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#7abcff',GradientType=0 ); /* IE6-9 */
}
​
.button:active > .as-a-button {
    color: #ff3019;
    text-shadow:
    -2px -2px 0 #000,  
    2px -2px 0 #000,
    -2px 2px 0 #000,
     2px 2px 0 #000;
}
​
.flipped {
    /* http://css-tricks.com/snippets/css/flip-an-image/ */
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers