Created
September 14, 2017 19:33
-
-
Save electricg/27770b409e5f71a5fc17783c72e650ad to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/pudoyaz
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> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
<style id="jsbin-css"> | |
body { | |
background: pink; | |
color: green; | |
/* margin: 0; */ | |
} | |
svg { | |
background: #f90; | |
display: block; | |
margin: 1rem 0; | |
padding: 0; | |
--scale: 2; | |
--h: 27px; | |
height: calc(var(--scale) * var(--h)); | |
/* width: calc(var(--scale) * var(--w)); */ | |
} | |
.byrdie { | |
--w: 155px; | |
} | |
.mydomaine { | |
--w: 259px; | |
} | |
.whowhatwear { | |
--w: 329px; | |
} | |
.shop { | |
--w: 112px; | |
stroke-width: 0; | |
} | |
.shop--border { | |
stroke-width: 1; | |
} | |
.shop-whowhatwear { | |
stroke-width: 0; | |
} | |
.shop-mydomaine { | |
stroke-width: 0; | |
} | |
.shop-byrdie { | |
stroke-width: 0; | |
} | |
.light { | |
background: #111; | |
color: #FFF; | |
stroke-width: 1; | |
} | |
.dark { | |
background: #FFF; | |
color: #000; | |
} | |
.no-viewbox { | |
height: auto; | |
height: 50px; | |
/* width: 500px; */ | |
} | |
</style> | |
</head> | |
<body> | |
<svg xmlns="http://www.w3.org/2000/svg" style="display:none;width:0;height:0;visibility:hidden;"> | |
<symbol id="byrdie" viewBox="0 0 155 28"><title>byrdie</title><path fill="currentColor" transform="translate(0, 2)" d="M6.022 18.963h.768c1.78 0 4.792.09 4.792-2.42 0-2.75-2.98-2.48-4.946-2.48h-.614v4.9zm0-9.314h.675c1.598 0 3.257-.273 3.257-2.21 0-2.086-1.874-2.207-3.502-2.207h-.43V9.65zM0 23.5V.697h8.602c4.117 0 6.882 1.572 6.882 5.927 0 2.057-.676 3.72-2.55 4.658v.06c3.318.424 4.73 2.632 4.73 5.807 0 4.777-4.147 6.35-8.386 6.35H0zM25.008.697h7.22l4.332 6.2 4.332-6.2h7.22L39.57 12.552V23.5h-6.02V12.552L25.007.697M65.347 10.92h.584c1.967 0 4.178-.364 4.178-2.844s-2.21-2.843-4.177-2.843h-.583v5.686zm13.24 12.58h-7.496l-5.682-8.77h-.06v8.77h-6.023V.697h9.002c4.577 0 8.05 2.147 8.05 7.016 0 3.145-1.783 5.867-5.07 6.442l7.28 9.345zM96.07 18.48h1.35c3.596 0 6.668-1.936 6.668-6.382 0-4.082-2.734-6.38-6.605-6.38H96.07V18.48zM90.048.697h8.54c6.452 0 11.767 4.99 11.767 11.4 0 6.413-5.346 11.403-11.766 11.403h-8.542V.697zM122.368.697h6.022V23.5h-6.022zM147.56 5.717v3.81h6.79v5.02h-6.79v3.933h7.16v5.02h-13.18V.697h13.18v5.02h-7.16" /></symbol> | |
<symbol id="mydomaine" viewBox="0 0 259 28"><title>mydomaine</title><path fill="currentColor" transform="translate(0, 1.5)" d="M67.576 19.855c3.775 0 6.85-3.11 6.85-6.925 0-3.816-3.075-6.926-6.85-6.926H63.77v13.85h3.806zm-8.37 4.616V1.39h8.37c6.302 0 11.414 5.168 11.414 11.54 0 6.37-5.112 11.54-11.414 11.54h-8.37zm32.57-11.54c0 3.816 3.076 6.925 6.85 6.925 3.774 0 6.85-3.11 6.85-6.925 0-3.816-3.076-6.926-6.85-6.926-3.774 0-6.85 3.11-6.85 6.926zm6.85 11.54c-6.3 0-11.417-5.17-11.417-11.54 0-6.37 5.115-11.54 11.417-11.54 6.3 0 11.414 5.168 11.414 11.54 0 6.37-5.113 11.54-11.416 11.54h.003zM122.19 1.39h1.154l8.25 9.016 8.22-9.017H141l1.735 23.08h-4.567l-1.005-13.356-5.57 6.093-5.572-6.087-1.03 13.352h-4.566l1.766-23.08V1.39zm47.12 14.62l-3.378-6.278-3.38 6.286h6.76l-.003-.008zm2.497 4.62h-11.75l-2.07 3.84h-5.208L165.932.128l13.18 24.344h-5.206l-2.1-3.846v.005zM189.77 1.39h4.566v23.065h-4.567V1.39zm18.564 0h1.218l14.003 13.48V1.39h4.567v23.08h-1.25l-13.97-13.48v13.48h-4.568V1.39zm33.793 0h16.74v4.614h-12.176v6.926h9.135v4.615h-9.134v2.31h12.178v4.616h-16.74V1.39zM18.646 22.273l-1.31-14.825-6.458 6.776-6.495-6.78-1.188 14.83-1.583-.026 1.32-19 7.898 8.762 7.924-8.814 1.414 19.05-1.522.027zM20.04.986h-1.138l-8.06 8.626L2.88.986H1.74L0 23.69h4.5l1.006-13.175 5.337 5.836 5.385-5.84L17.27 23.69h4.5L20.046.994 20.04.986zM41.79 15.31v7.37h-1.995v-7.37L32 2.5h2.17l6.616 10.838L47.524 2.51H49.7l-7.908 12.813-.004-.014zm4.92-14.25l-5.922 9.545-5.89-9.544-5.647.017 9.047 14.743v8.374h4.98v-8.38L52.383 1.07l-5.678-.015.003.006zm-8.563 12.353l.005.008-.005-.007z" /></symbol> | |
<symbol id="whowhatwear" viewBox="0 0 329 28"><title>whowhatwear</title><path fill="currentColor" transform="translate(0, 2)" d="M33.258.758l-9.13 22.425h-1.844L16.646 11.67l-5.672 11.513H9.128L0 .758h6.444l4.16 10.578L15.707.358h1.845l5.1 10.978L26.814.758h6.444zM58.67 22.782h-5.773v-8.81H44.81v8.81h-5.773V.758h5.773v8.04h8.087V.76h5.773v22.024-.002zM89.015 11.77c0 6.51-5.37 11.413-11.982 11.413-6.612 0-11.913-4.904-11.913-11.413 0-6.474 5.3-11.41 11.913-11.41s11.982 4.936 11.982 11.41zm-17.99 0c0 3.737 2.485 6.14 6.042 6.14 3.422 0 6.04-2.403 6.04-6.14 0-3.67-2.618-6.14-6.04-6.14-3.557 0-6.04 2.47-6.04 6.14h-.002zM135.913.758l-9.127 22.425h-1.847L119.3 11.67l-5.67 11.513h-1.847L102.656.758h6.443l4.16 10.578 5.1-10.978h1.84l5.1 10.978L129.47.758h6.443zm25.41 22.024h-5.77v-8.81h-8.09v8.81h-5.77V.758h5.77v8.04h8.09V.76h5.77v22.024-.002zm19.454-4.138h-6.034l-1.767 4.14h-6.208l9.73-22.427h2.816l9.436 22.426h-6.21l-1.763-4.14zm-3-9.71l-1.948 5.104h3.86l-1.92-5.104h.007zm118.497 9.71h-6.034l-1.767 4.14h-6.208l9.73-22.427h2.816l9.44 22.426h-6.21l-1.76-4.14h-.006zm-3-9.71l-1.948 5.104h3.86l-1.913-5.104zM208.858 5.93h-6.645v16.853h-5.772V5.93h-6.64V.76h19.067v5.17h-.01zM255.69.758l-9.127 22.425h-1.847l-5.638-11.513-5.67 11.513h-1.848L222.432.758h6.444l4.16 10.578L238.14.358h1.844l5.1 10.978L249.248.758h6.443zm21.15 5.172h-9.6v3.037h6.85v4.806h-6.842v3.837h10v5.173h-15.77V.76h15.37v5.17h-.007zm45.595 16.852l-5-6.84h-2.385v6.84h-5.77V.758h8.69c4.866 0 8.557 2.904 8.557 7.575 0 2.77-1.343 4.973-3.49 6.273l5.84 8.176h-6.443zm-7.385-11.846H318c1.61 0 2.65-1.036 2.65-2.603 0-1.534-1.04-2.568-2.65-2.568h-2.955v5.17h.005z" /></symbol> | |
<symbol id="shop" viewBox="0 0 113 28"><title>shop</title><g fill="currentColor" stroke="currentColor"><path d="M1.613 23.25l.325-.43c.246-.285.497-.393.783-.142.357.32 2.998 2.752 6.603 2.752 3.25 0 5.997-2.18 5.997-4.79 0-3.184-2.606-4.614-6.925-6.078-4.14-1.467-6.885-2.934-6.885-7.046 0-2.683 2.14-6.327 7.707-6.327 3.534 0 6.138 1.82 6.138 1.82.143.107.394.36.143.753-.108.143-.212.32-.286.464-.216.286-.428.394-.785.18-.108-.072-2.498-1.682-5.246-1.682-4.39 0-6.033 2.717-6.033 4.756 0 3.04 2.322 4.362 5.925 5.543 4.892 1.682 7.998 3.398 7.998 7.545 0 3.575-3.677 6.365-7.78 6.365-4.25 0-7.106-2.502-7.57-2.93-.213-.18-.39-.36-.11-.753M22.492 2.01c0-.25.216-.466.463-.466h.75c.286 0 .465.217.465.466v10.976h16.026V2.01c0-.25.216-.466.462-.466h.75c.282 0 .455.217.455.466v24.1c0 .25-.195.466-.476.466h-.757c-.25 0-.465-.217-.465-.466V14.488H24.14V26.11c0 .25-.18.466-.465.466h-.746c-.25 0-.464-.217-.464-.466V2.01M60.5 25.36c6.245 0 11.314-5.005 11.314-11.266 0-6.256-5.07-11.332-11.315-11.332-6.247 0-11.28 5.076-11.28 11.332 0 6.26 5.04 11.266 11.29 11.266h-.01zm0-24.173c7.172 0 12.884 5.757 12.884 12.91 0 7.186-5.71 12.836-12.885 12.836-7.138 0-12.848-5.65-12.848-12.837 0-7.15 5.71-12.91 12.847-12.91zM87.227 16.026c3.497 0 6.46-2.896 6.46-6.508 0-3.504-2.963-6.292-6.496-6.292h-6.353v12.8h6.39zM79.16 2.008c0-.25.217-.464.463-.464h7.656c4.418 0 8.066 3.612 8.066 8.01 0 4.464-3.648 8.104-8.04 8.104H80.82v8.428c0 .247-.217.462-.572.462h-.644c-.26 0-.476-.217-.476-.466V2.006l.033.002zM110.958 1.83c.07-.177.25-.286.463-.286h.5c.323 0 .54.217.43.5l-7.888 24.21c-.072.216-.286.324-.465.324h-.54c-.282 0-.498-.182-.39-.503L110.94 1.83" /></g></symbol> | |
<symbol id="shop-whowhatwear" viewBox="0 0 450 28"><title>shop whowhatwear</title><g fill="currentColor"><use xlink:href="#shop" transform="translate(-168.5, 0)" stroke="currentColor" /><use xlink:href="#whowhatwear" transform="translate(60, 0)" /></g></symbol> | |
<symbol id="shop-mydomaine" viewBox="0 0 380 28"><title>shop mydomaine</title><g fill="currentColor"><use xlink:href="#shop" transform="translate(-133.5, 0)" stroke="currentColor" /><use xlink:href="#mydomaine" transform="translate(60, 0)" /></g></symbol> | |
<symbol id="shop-byrdie" viewBox="0 0 276 28"><title>shop byrdie</title><g fill="currentColor"><use xlink:href="#shop" transform="translate(-81.5, 0)" stroke="currentColor" /><use xlink:href="#byrdie" transform="translate(60, 0)" /></g></symbol> | |
</svg> | |
<svg viewBox="0 0 329 28" class="whowhatwear light" xmlns="http://www.w3.org/2000/svg"> | |
<use xlink:href="#whowhatwear" /> | |
</svg> | |
<svg viewBox="0 0 329 28" class="whowhatwear dark" xmlns="http://www.w3.org/2000/svg"> | |
<use xlink:href="#whowhatwear" /> | |
</svg> | |
<svg viewBox="0 0 450 28" class="shop-whowhatwear light" xmlns="http://www.w3.org/2000/svg"> | |
<use xlink:href="#shop-whowhatwear" /> | |
</svg> | |
<svg viewBox="0 0 450 28" class="shop-whowhatwear dark" xmlns="http://www.w3.org/2000/svg"> | |
<use xlink:href="#shop-whowhatwear" /> | |
</svg> | |
<svg viewBox="0 0 259 28" class="mydomaine light" xmlns="http://www.w3.org/2000/svg"> | |
<use xlink:href="#mydomaine" /> | |
</svg> | |
<svg viewBox="0 0 259 28" class="mydomaine dark" xmlns="http://www.w3.org/2000/svg"> | |
<use xlink:href="#mydomaine" /> | |
</svg> | |
<svg viewBox="0 0 380 28" class="shop-mydomaine light" xmlns="http://www.w3.org/2000/svg"> | |
<use xlink:href="#shop-mydomaine" /> | |
</svg> | |
<svg viewBox="0 0 380 28" class="shop-mydomaine dark" xmlns="http://www.w3.org/2000/svg"> | |
<use xlink:href="#shop-mydomaine" /> | |
</svg> | |
<svg viewBox="0 0 155 28" class="byrdie light" xmlns="http://www.w3.org/2000/svg"> | |
<use xlink:href="#byrdie" /> | |
</svg> | |
<svg viewBox="0 0 155 28" class="byrdie dark" xmlns="http://www.w3.org/2000/svg"> | |
<use xlink:href="#byrdie" /> | |
</svg> | |
<svg viewBox="0 0 276 28" class="shop-byrdie light" xmlns="http://www.w3.org/2000/svg"> | |
<use xlink:href="#shop-byrdie" /> | |
</svg> | |
<svg viewBox="0 0 276 28" class="shop-byrdie dark" xmlns="http://www.w3.org/2000/svg"> | |
<use xlink:href="#shop-byrdie" /> | |
</svg> | |
<svg viewBox="0 0 113 28" class="shop light" xmlns="http://www.w3.org/2000/svg"> | |
<use xlink:href="#shop" /> | |
</svg> | |
<svg viewBox="0 0 113 28" class="shop dark" xmlns="http://www.w3.org/2000/svg"> | |
<use xlink:href="#shop" /> | |
</svg> | |
<svg viewBox="0 0 450 28" class="shop-whowhatwear dark no-viewbox" xmlns="http://www.w3.org/2000/svg"> | |
<use xlink:href="#shop-whowhatwear" /> | |
</svg> | |
<script id="jsbin-source-css" type="text/css">body { | |
background: pink; | |
color: green; | |
/* margin: 0; */ | |
} | |
svg { | |
background: #f90; | |
display: block; | |
margin: 1rem 0; | |
padding: 0; | |
--scale: 2; | |
--h: 27px; | |
height: calc(var(--scale) * var(--h)); | |
/* width: calc(var(--scale) * var(--w)); */ | |
} | |
.byrdie { | |
--w: 155px; | |
} | |
.mydomaine { | |
--w: 259px; | |
} | |
.whowhatwear { | |
--w: 329px; | |
} | |
.shop { | |
--w: 112px; | |
stroke-width: 0; | |
} | |
.shop--border { | |
stroke-width: 1; | |
} | |
.shop-whowhatwear { | |
stroke-width: 0; | |
} | |
.shop-mydomaine { | |
stroke-width: 0; | |
} | |
.shop-byrdie { | |
stroke-width: 0; | |
} | |
.light { | |
background: #111; | |
color: #FFF; | |
stroke-width: 1; | |
} | |
.dark { | |
background: #FFF; | |
color: #000; | |
} | |
.no-viewbox { | |
height: auto; | |
height: 50px; | |
/* width: 500px; */ | |
}</script> | |
</body> | |
</html> |
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
body { | |
background: pink; | |
color: green; | |
/* margin: 0; */ | |
} | |
svg { | |
background: #f90; | |
display: block; | |
margin: 1rem 0; | |
padding: 0; | |
--scale: 2; | |
--h: 27px; | |
height: calc(var(--scale) * var(--h)); | |
/* width: calc(var(--scale) * var(--w)); */ | |
} | |
.byrdie { | |
--w: 155px; | |
} | |
.mydomaine { | |
--w: 259px; | |
} | |
.whowhatwear { | |
--w: 329px; | |
} | |
.shop { | |
--w: 112px; | |
stroke-width: 0; | |
} | |
.shop--border { | |
stroke-width: 1; | |
} | |
.shop-whowhatwear { | |
stroke-width: 0; | |
} | |
.shop-mydomaine { | |
stroke-width: 0; | |
} | |
.shop-byrdie { | |
stroke-width: 0; | |
} | |
.light { | |
background: #111; | |
color: #FFF; | |
stroke-width: 1; | |
} | |
.dark { | |
background: #FFF; | |
color: #000; | |
} | |
.no-viewbox { | |
height: auto; | |
height: 50px; | |
/* width: 500px; */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment