Adding striped text-shadow and stroke - html

Question

I am trying to add a striped text shadow along with a stroke, just like the image below
This is what I've got so far, it's close but not right. I can't make it work exactly as the picture attached
.headingStyle {
background-image: -webkit-repeating-linear-gradient(60deg, #ccc, #ccc 1px, #fff 2px, #fff 3px);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position:relative;
text-transform: uppercase;
font-weight: 700;
}
.headingStyle:after {
background: none;
content: attr(data-text);
left: -.1em;
position: absolute;
text-shadow: 1px 1px 0px #000;
top: -.05em;
text-transform: uppercase;
}
/**/
h1 {
font-size: 5em;
font-family: sans-serif;
margin-left: 100px;}
<h1 class="headingStyle" data-text="UNION">UNION</h1>
Find here a working example: https://codepen.io/patie/pen/KKzWmNV

Answer 1

Here is another approximation but without transparency:
.headingStyle {
position: relative;
display:inline-block;
text-transform: uppercase;
font-weight: 700;
letter-spacing:5px;
overflow:hidden;
}
.headingStyle:before {
content: attr(data-text);
left: 0;
position: absolute;
z-index:-1;
text-shadow:
1px 1px 0px #fff,
1.3px 1.3px 0px #fff,
2px 2px 0px #000,
3px 3px 0px #000,
4px 4px 0px #000,
5px 5px 0px #000,
6px 6px 0px #000,
7px 7px 0px #000;
top: 0;
color:transparent;
}
.headingStyle:after {
content:"";
position:absolute;
z-index:-1;
top:-200vmax;
left:0;
right:0;
bottom:-200vmax;
background-image:repeating-linear-gradient(0deg, transparent 0 1px, #fff 1.5px 3px);
transform:skewY(45deg);
}
/**/
h1 {
font-size: 5em;
font-family: sans-serif;
margin-left: 100px;
<h1 class="headingStyle" data-text="UNION">UNION</h1>