This is too much drama Paul. I’m going to just upload the image to nekoweb (I only get 500mb of storage!).
The image shows but doesn’t wrap. Trust me I had this working when we were using your Codepen asset. It wrapped like a champion.
<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bucket The Martyrdom of Thomas Merton by semicodin ᰄ with Huge Assistance from Paul O’Brien of Sitepoint Forums</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>Bucket ᰄ Thomss Merton</title>
<style>
body {
width: 1080px;
margin: 1.94rem auto;
margin-bottom: 3.75rem;
font-family: 'courier prime', monospace;
font-size: 2rem;
line-height: 1.02;
font-weight: bold;
color: black;
}
/* The tab css is in this panel for eas of use and should go in the main css when ready */
.svgtabs {
--tab3-bg-color: #b16742;
--tab3-color: #000;
}
.svgtabs {
width: 100%;
margin: auto;
display: flex;
overflow: hidden;
}
.svgtabs a {
color: #000;
text-decoration: none;
flex: 1 0 0;
display: grid;
align-items: center;
grid-template-areas: "tab";
position: relative;
text-align: center;
margin-right: -9rem;
transition: 0.3s ease;
}
.svgtabs.threetab a {
margin-right: -7rem;
}
.svgtabs a:last-child {
margin-right: 0 !important;
}
.svgtabs svg {
width: 245px;
height: 53px;
display: block;
grid-area: tab;
position: relative;
z-index: 1;
}
.svgtabs.threetab svg {
width: 440px;
height: 60px;
}
.svgtabs span {
grid-area: tab;
position: relative;
z-index: 2;
padding: 11px 2rem 0 0;
font-weight: bold;
color: #000;
font-size: 1.9rem;
}
.svgtabs a:last-child span {
padding: 11px 1rem 0;
}
.svgtabs a.active {
z-index: 99;
}
.svgtabs a.active span {
padding: 11px 1rem 0;
}
.hide-svg {
position: fixed;
left: -100vw;
top: -100vh;
height: 1px;
width: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.tab-animated {
height: 220px;
animation: tab 15s infinite;
}
@keyframes tab {
0% {
height: 200px;
width: 260px;
}
50% {
height: 140px;
width: 180px;
}
100% {
height: 200px;
width: 260px;
}
}
/* thomas */
.death {
background-image: url('https://lh3.googleusercontent.com/pw/AP1GczOlyEgE-HLy3sGvlpsiiifoiEukf6i8ndkMD7oCPa-eMu7cHQscoSXEzAog6iNXvAFuF-JApkkfxSIz6_kA9Ro1-1aTzsWoLebvmCQB5TKPgdC80A=w1080-h1620');
background-size: 100% 100%;
padding: 1rem;
background-position: 0 -10px;
padding: 1.57rem 5% 0;
font-style: normal;
text-align: left;
color: black;
font-family: "solway", serif;
font-size: 3.13rem;
line-height: 1.02;
font-weight: bold;
border: 8px solid #000;
border-bottom: none;
clip-path: inset(0);
}
p {line-height: 1.04}
.death p {
margin: 0 0 1em;
}
.thomas {
float: left;
margin: 4rem 0 0 -3.4rem;
width: 800px;
height: auto;
shape-outside: url(https://semicodin.nekoweb.org/vault/thomas_merton_800.png);
shape-margin: 1rem;
}
.rip {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin: 0 auto;
font-style: normal;
color: black;
font-family: 'solway', serif;
font-size: 5rem;
line-height: 1.1;
font-weight: bold;
}
.begin {
margin: 1.57rem 0;
font-style: normal;
text-align: center;
color: black;
font-family: 'Uncial Antiqua', serif;
font-size: 6rem;
line-height: 1.02;
font-weight: bold;
}
.up {
marhin-top: 6rem;
text-align: left;
color: black;
font-family: 'Uncial Antiqua', serif;
font-size: 4.5rem;
font-weight: bold;
}
.book {
font-style: italic;
text-decoration: underline;
}
.roon {color: maroon}
</style>
</head>
<body>
<!-- add active class to anchor to bring the tab in front as required -->
<nav class="svgtabs threetab">
<a class="svgtab3" href="#">
<span>Three Tab</span>
<svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
<use href="#cutetab-medium" />
</svg>
</a>
<a class="svgtab2" href="#">
<span>Three Tab </span>
<svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
<use href="#cutetab-medium" />
</svg>
</a>
<a class="svgtab1" href="#">
<span>Three Tab </span>
<svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
<use href="#cutetab-medium" />
</svg>
</a>
</nav>
<div class="death">
<h1 class="begin">The Murder of Thomas Merton</h1>
<div class="rip">
<span>1915</span>
<img src="https://lh3.googleusercontent.com/pw/AP1GczNK01urgiwZ_soZQU-12U29Siu-4J37H-ZvpeC3gKfz0IzceW35to0b8q7EjDHp2nXfNaPSfc1Dwary6KUrjiDl-Ldxj4xRRi9umxtZJwgtJjXgxA=w200-h300" alt="">
<span>1968</span>
</div>
<p></p>
<p>
<span class="up">On December 10, 1968</span> Thomas Merton was at a Red Cross retreat facility named Sawang Khaniwat in Samut Prakan, a province near Bangkok, Thailand, attending a monastic conference. After giving a talk at the morning session, he was found dead later in the afternoon in the room of his cottage, wearing only shorts, lying on his back with a short-circuited Hitachi floor fan lying across his body. His associate, Jean Leclercq, stated: “In all probability the death of Thomas Merton was due in part to heart failure, in part to an electric shock.”
</p>
<p>
<span class="roon">Since there was no autopsy, there was no suitable explanation for the wound in the back of Merton’s head, “which had bled considerably.”</span> Arriving from the cottage next to Merton’s, the Primate of the Benedictine order and presiding officer of the conference, Rembert Weakland, anointed Merton.
</p>
<p>He was 53 years old.</p>
<p>
His body was flown back to the United States on board a US military aircraft returning from Vietnam. He is buried at Our Lady of Gethsemani Abbey in Bardstown, Kentucky.</p>
<p>
In 2018, Hugh Turley and David Martin published <span class="book">The Martyrdom of Thomas Merton: An Investigation</span>, presenting the evidentiary record’s refutation of claims of accidental electrocu-tion, and suggesting Merton was assassinated for his political opposition to the Vietnam War. A subsequent book by Turley and author John Howard Griffin — <span class="book">Thomas Merton’s Betrayers: The Case Against Abbot James Fox</span> — presents documentary evidence of manipulation and coverup by the Catholic Church and Merton’s political foes.
</p>
<p>
The Spring 2024 issue of <i>The Catholic Historical Review</i> published <i>“The Official Thai Reports on Thomas Merton’s Death.”</i> <img class="thomas" src="https://semicodin.nekoweb.org/vault/thomas_merton_800.png" alt=""> The official cause of death was a natural cause: “sudden heart failure” and not “accidental electrocution.” <span class="roon">The police report states that Merton was already dead before he came into contact with a faulty fan that was found lying across his body.</span>
</p>
</div><!-- closing death -->
</div>
<!-- this following block of code is defining the svg and can be kept out of the way anyway on the page -->
<!-- I'm putting a div around it so that we can just hide them all from impacting on the page -->
<div class="hide-svg">
<!-- this one is for the three tab version -->
<!-- medium tab -->
<svg viewBox="0 0 116.417 11.875" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="cutetab-medium" class="tab-unit">
<clipPath id="shape3">
<path d="M93.07 302.303c-11.069 0-14.631.576-18.744 8.02-3.005 5.437-6.063 6.224-6.8 7.09h95.002c-.737-.866-3.795-1.653-6.8-7.09-4.113-7.444-7.675-8.02-18.745-8.02Z" transform="translate(-56.819 -301.538)" />
</clipPath>
<path style="fill:#000; stroke-width:4; stroke:#000" d="M87.484 301.538c-4.09.011-6.897 1.05-8.968 2.625-2.083 1.583-3.41 3.653-4.72 5.63-1.31 1.979-2.601 3.868-4.552 5.263-1.951 1.395-4.582 2.342-8.723 2.342H56.82v.015h11.236a12.469 12.469 0 0 0 2.038-1.172c2.208-1.579 3.604-3.656 4.92-5.642 1.317-1.987 2.556-3.883 4.385-5.274 1.83-1.39 4.264-2.33 8.15-2.33h54.957c3.887 0 6.321.94 8.15 2.33 1.83 1.391 3.07 3.287 4.386 5.274 1.316 1.986 2.712 4.063 4.92 5.642a12.47 12.47 0 0 0 2.038 1.172h11.236v-.015h-3.702c-4.14 0-6.772-.947-8.723-2.342-1.95-1.395-3.242-3.284-4.552-5.262-1.31-1.978-2.637-4.048-4.719-5.63-2.071-1.575-4.879-2.615-8.97-2.626Z" transform="translate(-56.819 -301.538)" />
<image class="tab-animated tan3" transform="translate(00 0)" width="270" height="220" href="https://assets.codepen.io/74047/PARCHMENT-A.jpg" clip-path="url(#shape3)" />
</g>
</defs>
</svg>
</div>
</body>
</html>
There’s something wrong with your image. Did you save it as a transparent png?
If I click that image and save it to my codepen assets it works straight away but it will not work when linked to your image (although all i did was right click your image and save locally).
I suggest you resave the image as a transparent png but give it a slightly different name in case there’s a cache issue at your end.
Actually it looks like codepen is blocking your image due to a cross origin issue.
Access to image at 'https://semicodin.nekoweb.org/vault/thomas_merton_800.png' from origin 'https://cdpn.io' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://nekoweb.org' that is not equal to the supplied origin.
I suggest you try outside of codepen and see if you get the same issue.
Paul. My idiot phone took the entire <title> line and dropped it at the beginning of my fonts. Please verify your copy wasn’t contaminated. I’ll do as you say and reinsert the image as ”gorilla.png” lol.
Sorry this flew past me. Yes it’s always been a transparent PNG. I wouldn’t save it without an alpha channel knowing sh-out needed to read its transparency. I’m going to again insert your codepen version.
Generally the first tags in the head are the meta encoding and then the title tag.
e.g.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>The Martyrdom of Thomas Merton by semicodin ᰄ with Huge Assistance from Paul O’Brien of Sitepoint Forums</title>
The meta tag should come first so the browser knows which character encoding to use and then generally the title tag would follow. However I believe you can put the title tag anywhere in the head if you want but then you run the risk of mixing it in with all your other stuff. It doesn’t really matter except it hurts my OCD 
I always keep a logical approach and I wouldn’t put the title of a book in the middle of the book. I’d put it at the top It may also help Search engines to identify the content quicker but I believe that’s debatable these days.
1 Like
Paul I keep forgetting to tell you that I omitted one full paragraph of Wikipedia’s entry for Merton. In the code below I am using 800px with your Codepen asset. Didn’t I say it looked good? It’s great. So if you don’t mind Paul, can I just use your Merton for the time being? I’ll keep trying other options, including (cough cough choke cough) turning it into a (cough) GIF.
I just need the tabs reversed on top. Do you mind at least 72+ people seeing your Codepen account string? I have to be honest with you — there are a lot of people that will see it Paul. If you’re uncomfortable with that we’ll just shelve that page and I’ll create a completely new one to demo the sh-out on. Please let me know. And the tabs. 
<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>The Martyrdom of Thomas Merton by semicodin ᰄ with Huge Assistance from Paul O’Brien of Sitepoint Forums</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>DELETEME ᰄ</title>
<style>
body {
width: 1080px;
margin: 1.94rem auto;
margin-bottom: 3.75rem;
font-family: 'courier prime', monospace;
font-size: 2.19rem;
line-height: 2.31rem;
font-weight: bold;
color: black;
}
.roon {color: maroon}
/* The tab css is in this panel for eas of use and should go in the main css when ready */
.svgtabs {
--tab3-bg-color: #b16742;
--tab3-color: #000;
}
.svgtabs {
width: 100%;
margin: auto;
display: flex;
overflow: hidden;
}
.svgtabs a {
color: #000;
text-decoration: none;
flex: 1 0 0;
display: grid;
align-items: center;
grid-template-areas: "tab";
position: relative;
text-align: center;
margin-right: -9rem;
transition: 0.3s ease;
}
.svgtabs.threetab a {
margin-right: -7rem;
}
.svgtabs a:last-child {
margin-right: 0 !important;
}
.svgtabs svg {
width: 245px;
height: 53px;
display: block;
grid-area: tab;
position: relative;
z-index: 1;
}
.svgtabs.threetab svg {
width: 440px;
height: 60px;
}
.svgtabs span {
grid-area: tab;
position: relative;
z-index: 2;
padding: 11px 2rem 0 0;
font-weight: bold;
color: #000;
font-size: 1.9rem;
}
.svgtabs a:last-child span {
padding: 11px 1rem 0;
}
.svgtabs a.active {
z-index: 99;
}
.svgtabs a.active span {
padding: 11px 1rem 0;
}
.hide-svg {
position: fixed;
left: -100vw;
top: -100vh;
height: 1px;
width: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.tab-animated {
height: 220px;
animation: tab 15s infinite;
}
@keyframes tab {
0% {
height: 200px;
width: 260px;
}
50% {
height: 140px;
width: 180px;
}
100% {
height: 200px;
width: 260px;
}
}
/* thomas */
.death {
background-image: url('https://lh3.googleusercontent.com/pw/AP1GczOlyEgE-HLy3sGvlpsiiifoiEukf6i8ndkMD7oCPa-eMu7cHQscoSXEzAog6iNXvAFuF-JApkkfxSIz6_kA9Ro1-1aTzsWoLebvmCQB5TKPgdC80A=w1080-h1620');
background-size: 100% 100%;
padding: 1rem;
background-position: 0 -10px;
padding: 1.57rem 5% 0;
font-style: normal;
text-align: left;
color: black;
font-family: "solway", serif;
font-size: 3.25rem;
line-height: 1.1;
font-weight: bold;
border: 8px solid #000;
border-bottom: none;
clip-path: inset(0);
}
.death p {
margin: 0 0 1em;
}
.thomas {
float: left;
margin: 4rem 0 0 -3.4rem;1
width: 800px;
height: auto;
shape-outside: url(https://assets.codepen.io/74047/THOMAS_MERTON_Monk-A+800.png);
shape-margin: 1rem;
}
.rip {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin: 1em auto;
font-style: normal;
color: black;
font-family: 'solway', serif;
font-size: 5rem;
line-height: 1.1;
font-weight: bold;
}
.begin {
margin: 1.57rem 0;
font-style: normal;
text-align: center;
color: black;
font-family: 'Uncial Antiqua', serif;
font-size: 6rem;
line-height: 1.02;
font-weight: bold;
}
.up {
text-align: left;
color: black;
font-family: 'Uncial Antiqua', serif;
font-size: 4.5rem;
font-weight: bold;
}
</style>
</head>
<body>
<!-- add active class to anchor to bring the tab in front as required -->
<nav class="svgtabs threetab">
<a class="svgtab1" href="#">
<span>Three Tab </span>
<svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
<use href="#cutetab-medium" />
</svg>
</a>
<a class="svgtab2" href="#">
<span>Three Tab </span>
<svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
<use href="#cutetab-medium" />
</svg>
</a>
<a class="svgtab3" href="#">
<span>Three Tab</span>
<svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
<use href="#cutetab-medium" />
</svg>
</a>
</nav>
<div class="death">
<h1 class="begin">The Murder of Thomas Merton</h1>
<div class="rip">
<span>1915</span>
<img src="https://lh3.googleusercontent.com/pw/AP1GczNK01urgiwZ_soZQU-12U29Siu-4J37H-ZvpeC3gKfz0IzceW35to0b8q7EjDHp2nXfNaPSfc1Dwary6KUrjiDl-Ldxj4xRRi9umxtZJwgtJjXgxA=w200-h300" alt="">
<span>1968</span>
</div>
<p>
<span class="up">On December 10, 1968</span> Thomas Merton was at a Red Cross retreat facility named Sawang Khaniwat in Samut Prakan, a province near Bangkok, Thailand, attending a monastic conference. After giving a talk at the morning session, he was found dead later in the afternoon in the room of his cottage, wearing only shorts, lying on his back with a short-circuited Hitachi floor fan lying across his body. His associate, Jean Leclercq, stated: “In all probability the death of Thomas Merton was due in part to heart failure, in part to an electric shock.”
</p>
<p>
Since there was no autopsy, there was no suitable explanation for the wound in the back of Merton’s head, <span class="roon">“which had bled considerably.”</span> Arriving from the cottage next to Merton’s, the Primate of the Benedictine order and presiding officer of the conference, Rembert Weakland, anointed Merton.
</p>
<p>He was 53 years old.</p>
<p>
His body was flown back to the United States on board a US military aircraft returning from Vietnam. He is buried at Our Lady of Gethsemani Abbey in Bardstown, Kentucky.</p>
<p>
In 2018, Hugh Turley and David Martin published The Martyrdom of Thomas Merton: An Investigation, presenting the evidentiary record’s refutation of claims of accidental electrocution, and suggesting Merton was assassinated for his political opposition to the Vietnam War. A subsequent book by Turley — <i>Thomas Merton’s Betrayers: The Case Against Abbot James Fox</i> — and Author John Howard Griffin, presents documentary evidence of manipulation and coverup by the Catholic Church and Merton’s political foes.
</p>
<p>
The Spring 2024 issue of <i>The Catholic Historical Review</i> published <i>“The Official Thai Reports on Thomas <img class="thomas" src="https://assets.codepen.io/74047/THOMAS_MERTON_Monk-A+800.png" alt="" /> Merton’s Death.”</i> The official cause of death was a natural cause: “sudden heart failure” and not “accidental electrocution.” <span class="roon">The police report states that Merton was already dead before he came into contact with a faulty fan that was found lying across his body.</span>
</p> </div>
<!-- this following block of code is defining the svg and can be kept out of the way anyway on the page -->
<!-- I'm putting a div around it so that we can just hide tehm all from impacting on the page -->
<div class="hide-svg">
<!-- this one is for the three tab version -->
<!-- medium tab -->
<svg viewBox="0 0 116.417 11.875" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="cutetab-medium" class="tab-unit">
<clipPath id="shape3">
<path d="M93.07 302.303c-11.069 0-14.631.576-18.744 8.02-3.005 5.437-6.063 6.224-6.8 7.09h95.002c-.737-.866-3.795-1.653-6.8-7.09-4.113-7.444-7.675-8.02-18.745-8.02Z" transform="translate(-56.819 -301.538)" />
</clipPath>
<path style="fill:#000; stroke-width:4; stroke:#000" d="M87.484 301.538c-4.09.011-6.897 1.05-8.968 2.625-2.083 1.583-3.41 3.653-4.72 5.63-1.31 1.979-2.601 3.868-4.552 5.263-1.951 1.395-4.582 2.342-8.723 2.342H56.82v.015h11.236a12.469 12.469 0 0 0 2.038-1.172c2.208-1.579 3.604-3.656 4.92-5.642 1.317-1.987 2.556-3.883 4.385-5.274 1.83-1.39 4.264-2.33 8.15-2.33h54.957c3.887 0 6.321.94 8.15 2.33 1.83 1.391 3.07 3.287 4.386 5.274 1.316 1.986 2.712 4.063 4.92 5.642a12.47 12.47 0 0 0 2.038 1.172h11.236v-.015h-3.702c-4.14 0-6.772-.947-8.723-2.342-1.95-1.395-3.242-3.284-4.552-5.262-1.31-1.978-2.637-4.048-4.719-5.63-2.071-1.575-4.879-2.615-8.97-2.626Z" transform="translate(-56.819 -301.538)" />
<image class="tab-animated tan3" transform="translate(00 0)" width="270" height="220" href="https://assets.codepen.io/74047/PARCHMENT-A.jpg" clip-path="url(#shape3)" />
</g>
</defs>
</svg>
</div>
</body>
</html>
It was touch and go with faulty and across lol. 
You didn’t understand my comment Paul: it took the entire <title> tag and duplicated it!
1 Like
I’m so sorry to read that Paul. We can commiserate I suppose: I was attacked by two pit bulls 30 years ago and the experience was so traumatic I have issues with being outside to this day. 30 years of psychotherapy have done nothing to remedy it. I used to go hiking, camping etc. I’m extremely lucky to still have a face. 
Do you mean this?
.svgtab1{z-index:3}
.svgtab2{z-index:2}
.svgtab3{z-index:1}
1 Like
Ah! I can’t understand why I didn’t see that before. I thought I hunted down everything with a z in it. Thank you Paul. I see I’m going to have to get to know z-index once and for all.
1 Like
Edit: Never mind Paul; I just noticed that your Merton is cut in half (!). I do want the full picture of him in his complete Trappist mufti. 
I’m going to have to come up with a different document altogether. What a shame! They could have learned about the <shape-outside: polygon> technique and had a murder mystery on top of it.
Paul can I have your permission to use your version of Merton in the page I need to upload on my little site? I’m hesitant to do this without your permission, especially noting that people will see your Codepen string (codepen~assets etc.).
There is indeed something wrong with my graphic of Merton but I have these people who want to see the <shape-outside: polygon> code . . .
I’m not sure what you mean its your picture at full size?
A little bit of the bottom gets cut off because I didn’t want a gap at the bottom but other than that its full size. Unless you had a different image.
Here is the codepen.
1 Like
Now I am losing my mind. I swear to you Paul that image was cut off. Going to take a screenshot of it . . .
Well I’ve tried this so many ways by now I couldn’t tell you which version I saw it in, only that it was wrapping around yours (mine being unable to wrap in any way shape or form and God I’ve tried).
Paul can I use your image? I just created a new transparent merton off of downloading your jpg and still it won’t wrap. Would you mind keeping it up there until I can create a completely different <shape-outside: polygon> ?? There’s 76 people looking to download it.
Yes you can link to that image but it would be better to work out where you are going wrong.
It sounds like you are not saving it as a transparent png. It can’t be a jpg because that won’t have an alpha channel.
For approximately the 10th time I reconstructed this image and dropped it into your code. This last time — and it is the last — I went back to my original merton and taking an eraser went over every single pixel along the border and erased everything else that I could in the remaining transparency in the remote possibility that a stray pixel might have escaped my mask and again it won’t wrap. At this point I know the problem isn’t my graphic which just had the Doover Royale, it’s something else. What, i can’t tell you.
Thanks Paul. This will only be temporary until I hunt down another suitable graphic. I’m exhausted fighting it and I’m waving the white flag!! To the Universe: I yield! I give up!
And now I can’t get your merton.to display at all. 
I give up.
1 Like
Do you have a live view of the page you are working on or is it only local?
It may be that your host blocks cross origin images. A lot of these free hosts are unreliable and you have little control over their settings. Its always best to have your own online space which can cost very little for small usage.
This is my image stored on Google Photos. I tell you Paul I just give up. Everything points to this being my error — most conspicuously the fact that it isn’t displaying on just one server but now two. And yet every time I recreate the image anew — fully transparent (I’ve worked with PNGs and vectors for over 30 years so please don’t suggest I don’t know how to make a transparent PNG; that would be like me suggesting you don’t know the parts in a table!! you’d be justifiably insulted!) — each time I recreate this image it blocks your <shape-outside: polygon and displays as a transparent rectangle.
I completely clear my cache each time. Last night I was certain I had found the solution — somehow my mask didn’t capture a stray pixel on the edge somewhere (a near impossibility given the app I use) and so I went in and just erased the hell out of it manually. Nothing.
I think Google is blocking this image. At least I thought so at 3am this morning when — now thoroughly beaten and despairing I yielded to the universe and conceded that I’d need to use your image — now not even your image will display??!? Really? F**K IT.
I’m going to pull up every goddamed version of this I created and if I can get just one of yours to display I’ll use it. I’m clearing the cache each time and renaming them 99doomed, 98doomed etc. counting down. I’ll report back to you. If none of them work I’m deleting them all.