Create a partially striped letter in CSS

Question

Does anyone know how to achieve this effect in CSS? Is it even possible? I know CSS Grid to solve the positioning of letters, but I have no idea how I can achieve a partially striped letter.

I have looked into text masking but other than using a vector editing tool (e.g. Illustrator) and create SVGs I see no other options.

Are you wanting the characters to be from an actual font or are you allowed to 'draw' them? And please show us how far you got with text masking. — A Haworth, Feb 26 '23 at 18:05
I’m sorry that I did not provide a sample of my effort so far, I was messing around with a similar solution as the provided answer by @AHaworth, (though his solution, is much closer to what I wanted to achieve.) Fortunately, I am allowed to draw the characters, so I decided to go for that. Much thanks! — bluebit, Feb 27 '23 at 08:47

score 3 · Accepted Answer · answered Feb 26 '23 at 19:49

For all but the E in your example you can achieve this fairly straightforwardly by using CSS.

What happens in this snippet is that a background is created which shows enough of the stripes for each type of layout and uses the CSS mask properties to use the text to 'cut out' the background.

body {
  background: black;
}

.letters {
  font-size: 120px;
  font-family: sans-serif, monospaced;
}

.letters>* {
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, repeat;
  display: inline-block;
  width: fit-content;
  height: fit-content;
  -webkit-mask-image: linear-gradient(black, black);
  mask-image: linear-gradient(black, black);
  -webkit-mask-clip: text;
  mask-clip: text;
  color: transparent;
  font-weight: bold;
  background-image: var(--bg), repeating-linear-gradient(-45deg, black, black 2px, white 2px, white 4px);
}

.halftop {
  --bg: linear-gradient(white 0 50%, transparent 50% 100%);
}

.halfright {
  --bg: linear-gradient(to left, white 0 50%, transparent 50% 100%)
}

div.twothirds {
  --bg: linear-gradient(to left, white 0 33.3333%, transparent 33.3333% 66.6666%, white 66.6666% 100%);
}

.onethird {
  --bg: linear-gradient(to left, transparent 0 33.3333%, white 33.3333% 66.6666%, transparent 66.6666% 100%);
}

<body>
  <div class="letters">
    <div class="halftop">TO</div>
    <div class="halfright">S</div>
    <div class="twothirds">H</div>
    <div class="onethird">H</div>
  </div>
</body>

The problem with the E example is that the fonts tend to have ascender/descender space, lineheight not the same as the height of these characters. You would have to find out for the font you are using exactly what the top and bottom 'space' for each character is to have the sort of cutout you want for the E.

So, not a general purpose solution, but interesting to work on.

I suspect you will need to actually draw the characters yourself rather than using a font if total generality is required.

Create a partially striped letter in CSS

1 Answers1