Skip to content

Instantly share code, notes, and snippets.

@electricg

electricg/index.html

Created September 14, 2017 00:02
Show Gist options
  • Save electricg/7bfdeefb885073e38b872b6a00f2fb62 to your computer and use it in GitHub Desktop.
Save electricg/7bfdeefb885073e38b872b6a00f2fb62 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/wuyolo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none;width:0;height:0;visibility:hidden;">
<symbol id="byrdie" viewBox="0 0 155 27"><title>byrdie</title><path fill="currentColor" transform="translate(0, 1.5)" 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 27"><title>mydomaine</title><path fill="currentColor" transform="translate(0, 1)" 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 27"><title>whowhatwear</title><path fill="currentColor" transform="translate(0, 1.5)" 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 112 27"><title>shop</title><g fill="currentColor" stroke="currentColor"><path d="M.613 22.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.078C3.255 12.095.51 10.628.51 6.516.51 3.833 2.65.19 8.217.19c3.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-.753M21.492 1.01c0-.25.216-.466.463-.466h.75c.286 0 .465.217.465.466v10.976h16.026V1.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-.466V13.488H23.14V25.11c0 .25-.18.466-.465.466h-.746c-.25 0-.464-.217-.464-.466V1.01M59.5 24.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.91zM86.227 15.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.39zM78.16 1.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.104H79.82v8.428c0 .247-.217.462-.572.462h-.644c-.26 0-.476-.217-.476-.466V1.006l.033.002z" /><path d="M109.958.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-.503L109.94.83" /></g></symbol>
<symbol id="shop-whowhatwear" viewBox="0 0 449 27"><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 379 27"><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 275 27"><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>
<style id="jsbin-css">
body {
background: pink;
color: green;
/* margin: 0; */
}
svg {
background: #f90;
display: block;
margin: 1rem 0;
padding: 0;
--scale: 4;
--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: #ccc;
}
</style>
</head>
<body>
<svg viewBox="0 0 329 27" class="whowhatwear light" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#whowhatwear" />
</svg>
<svg viewBox="0 0 329 27" class="whowhatwear dark" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#whowhatwear" />
</svg>
<svg viewBox="0 0 449 27" class="shop-whowhatwear light" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#shop-whowhatwear" />
</svg>
<svg viewBox="0 0 449 27" class="shop-whowhatwear dark" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#shop-whowhatwear" />
</svg>
<svg viewBox="0 0 259 27" class="mydomaine light" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#mydomaine" />
</svg>
<svg viewBox="0 0 259 27" class="mydomaine dark" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#mydomaine" />
</svg>
<svg viewBox="0 0 379 27" class="shop-mydomaine light" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#shop-mydomaine" />
</svg>
<svg viewBox="0 0 379 27" class="shop-mydomaine dark" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#shop-mydomaine" />
</svg>
<svg viewBox="0 0 155 27" class="byrdie light" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#byrdie" />
</svg>
<svg viewBox="0 0 155 27" class="byrdie dark" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#byrdie" />
</svg>
<svg viewBox="0 0 275 27" class="shop-byrdie light" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#shop-byrdie" />
</svg>
<svg viewBox="0 0 275 27" class="shop-byrdie dark" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#shop-byrdie" />
</svg>
<svg viewBox="0 0 112 27" class="shop light" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#shop" />
</svg>
<svg viewBox="0 0 112 27" class="shop dark" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#shop" />
</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: 4;
--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: #ccc;
}</script>
</body>
</html>
Raw
jsbin.wuyolo.css
body {
background: pink;
color: green;
/* margin: 0; */
}
svg {
background: #f90;
display: block;
margin: 1rem 0;
padding: 0;
--scale: 4;
--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: #ccc;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment