Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created Oct 14, 2019
Embed
What would you like to do?
Responsive SVG Black Friday Badge
<a href="#" class="badge">
<svg viewBox="0 0 210 210">
<g stroke="none" fill="none">
<path d="M22,104.5 C22,58.9365081 58.9365081,22 104.5,22 C150.063492,22 187,58.9365081 187,104.5" id="top"></path>
<path d="M22,104.5 C22,150.063492 58.9365081,187 104.5,187 C150.063492,187 187,150.063492 187,104.5" id="bottom"></path>
</g>
<circle cx="105" cy="105" r="62" stroke="currentColor" stroke-width="1" fill="none" />
<text width="200" font-size="20" fill="currentColor">
<textPath startOffset="50%" text-anchor="middle" alignment-baseline="middle" xlink:href="#top">
Special offers
</textPath>
</text>
<text width="200" font-size="20" fill="currentColor">
<textPath startOffset="50%" text-anchor="middle" alignment-baseline="middle" xlink:href="#bottom">
only today
</textPath>
</text>
</svg>
<span>Black Friday</span>
</a>
$badge-background: #111;
$badge-color: #fff;
$badge-min-size: 11px;
$badge-max-size: 25px;
body {
font-family: 'Allerta Stencil', sans-serif;
padding: 0;
margin: 70px 10px;
background: #efefef;
display: flex;
justify-content: center;
align-items: center;
min-height: calc(99vh - 140px);
}
.badge {
position: relative;
letter-spacing: 0.08em;
color: $badge-color;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: transform 0.3s ease;
transform: rotate(-14deg);
text-align: center;
filter: drop-shadow(0.25em 0.7em 0.95em rgba(0,0,0, 0.8));
/* min-size + (max-size - min-size) * ( (100vw - min-width) / ( max-width - min-width) ) */
font-size: calc(#{$badge-min-size} + #{($badge-max-size - $badge-min-size) / 1px} * ( (100vw - 420px) / ( 860) ));
@media screen and (max-width: 420px) {
font-size: $badge-min-size;
}
@media screen and (min-width: 1280px) {
font-size: $badge-max-size;
}
&::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 10em;
height: 10em;
border-radius: 100%;
background: $badge-background;
opacity: 0.8;
transition: opacity 0.3s linear;
}
&:hover {
color: $badge-color;
text-decoration: none;
transform: rotate(-10deg) scale(1.05);
&::before {
opacity: 0.9;
}
}
svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
z-index: 0;
width: 10em;
height: 10em;
}
span {
display: block;
background: $badge-background;
border-radius: 0.4em;
padding: 0.4em 1em;
z-index: 1;
min-width: 11em;
border: 1px solid;
text-transform: uppercase;
}
}
<link href="https://fonts.googleapis.com/css?family=Allerta+Stencil" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment