<p><mark class="yellow">Schwan-STABILO is a German maker of pens for writing, colouring and cosmetics as well as markers and highlighters for office use.</mark></p>

<p>It is the world's largest manufacturer of <mark class="orange">highlighter pens, Stabilo Boss</mark>.</p>

<p><mark class="lightpink">The company was founded as Grossberger & Kurz Bleistiftfabrik (pencil company) in Nuremberg in 1855 alongside with other pencil manufacturers such as Staedtler and Faber-Castell</mark> as the areas is strategic with graphite and clay mines surrounding the area.</p>

<p>It was acquired by <mark class="darkpink">the Schwanhäusser family</mark> in 1865. Taking the first part from the family name, the company was renamed Schwan Bleistift Fabrik and started using the swan logo as one of the earliest trademarks.</p>

<p>In 1909, <mark class="purple">cosmestic pen, Dermatograph</mark> is created mainly for the surgeon uses in marking skins.</p>

<p>During the Great Depression, Schwan offers three brands in the pipeline which are Stabilo premium pencils for <mark class="lightblue">the most demanding users, Othello pencils for the masses and Swano non-toxic pencils for the children</mark>.</p>

<p>The company rebrand itself <mark class="lightgreen">from Schwan Bleistift Fabrik to Schwan-Stabilo</mark> in 1976 in honour of the <mark class="lightgreen">Schwanhäußer family</mark>.</p>

<p>In 1992, Schwan-Stabilo splits into two separate companies: <mark class="darkgreen">Schwan-STABILO Cosmetics and Schwan-STABILO</mark> (writing instruments)</p>
$yellow: #f1e321;
$orange: #f78b29;
$lightpink: #f265a0;
$darkpink: #af0ead;
$purple: #81007f;
$lightblue: #2f8ac9;
$lightgreen: #26a84b;
$darkgreen: #25b0a9;


@keyframes mark {
  to {
    background-position: -100%;
  } 
}

p {
  isolation: isolate;
}

mark {
  position: relative;
  transition: background-position 0.4s;
  transform: skewX(30deg);
  padding: 0.25em 0.5em;
  margin: 0 -0.55em;
  background-blend-mode: multiply;
  mix-blend-mode: multiply;
  animation: mark linear 1s forwards;
}

.yellow {
  background: 0 0;
  background: linear-gradient(to right, rgba(#000, 0) 50%, rgba($yellow, 0.85) 50%);
  background-position: 0;
  // make the background twice as big
  background-size: 200%;
}
.orange {
  background: 0 0;
  background: linear-gradient(to right, rgba(#000, 0) 50%, rgba($orange, 0.85) 50%);
  background-position: 0;
  // make the background twice as big
  background-size: 200%;
}
.lightpink {
  background: 0 0;
  background: linear-gradient(to right, rgba(#000, 0) 50%, rgba($lightpink, 0.85) 50%);
  background-position: 0;
  // make the background twice as big
  background-size: 200%;
}
.darkpink {
  background: 0 0;
  background: linear-gradient(to right, rgba(#000, 0) 50%, rgba($darkpink, 0.85) 50%);
  background-position: 0;
  // make the background twice as big
  background-size: 200%;
}
.purple {
  background: 0 0;
  background: linear-gradient(to right, rgba(#000, 0) 50%, rgba($purple, 0.85) 50%);
  background-position: 0;
  // make the background twice as big
  background-size: 200%;
}
.lightblue {
  background: 0 0;
  background: linear-gradient(to right, rgba(#000, 0) 50%, rgba($lightblue, 0.85) 50%);
  background-position: 0;
  // make the background twice as big
  background-size: 200%;
}
.lightgreen {
  background: 0 0;
  background: linear-gradient(to right, rgba(#000, 0) 50%, rgba($lightgreen, 0.85) 50%);
  background-position: 0;
  // make the background twice as big
  background-size: 200%;
}
.darkgreen {
  background: 0 0;
  background: linear-gradient(to right, rgba(#000, 0) 50%, rgba($darkgreen, 0.85) 50%);
  background-position: 0;
  // make the background twice as big
  background-size: 200%;
}

:root {
  // background: black;
  max-width: 38em;
  margin: auto;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.