Responsive SVG Black Friday Badge

index.html

<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>

responsive-svg-black-friday-badge.markdown

Responsive SVG Black Friday Badge

Badge with text on a path using SVG.

A Pen by Jon Uhlmann on CodePen.

License.

style.scss

$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;
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Allerta+Stencil" rel="stylesheet" />