Creating scaleable SVG file folder tabs

Snady I accidentally erased my reply of gratitude to you for this. Thank you! Bravo snady, Bravo!

1 Like

Gentlemen now that @snadyleiby has cracked the code for a nice thick border on Paul’s animated parchment/smoke tabs I wonder if I could persuade one of you to produce the 10px border for the other two sizes: 440 X 60 and 245 X 53? :eyebrows: hmmm?

Please say YES! And make a lot of people happy. :biggrin: It’s no fun sending all these people to a page that says This code is coming soon! Or alternatively show me how to do it and I’ll happily replicate them. How hard is it? Don’t answer that lol. Say YES! :eyebrows:

Here you are.

1 Like

OH. MY. GOD.

THANK YOU PAUL. You took time out of your busy schedule to do this and I (and a growing number of people who are clicking my links for these animations) are grateful. Never doubt it Maestro. My last number was 61 last night for the 3 tab version.

They’re mesmerizing and I was looking at your 620 one last night and realized: this is evocative of a ship but not just any ship, an old ship with their parchment map out in front of them, charting the path forward with a sextant. I love all things old Paul — old books, old parchment paper — and I am thrilled I am not the only one. I hope you have this showcased on your Codepen. :innocent:

Paul before you leave for vacation I have a favor to ask (you’ll have been anticipating this). Would you mind producing complete Codepens for the 2- and 3- and 7-tab pages? Just use our Merton Assassination for all 3 versions. Please don’t combine them as this specifically is what has gotten me into trouble. I’ll have a full month to study them and I can get them uploaded to my little site.

I want to have them available if despite my best effort to render them on my own I cannot. My one-page toc proves my point that I am not ready for Prime Time as we say here in the states. It will give me a chance to do some more research on available blogs etc. to finally produce a ‘guide’ to the constituent parts of this complicated and exquisite vector technology. Most importantly don’t combine them. Presume I’ll need more than one style on the tabs even if I don’t right now and that the tabs will have links.

If you get that set up for me I’ll have a fighting chance of getting my arms around the code. I expect it will take me a month so the timing works really well. If I’m flailing around at least I’ll know that I have TRUE models as my guide. Thank you Paul. :biggrin:

Do you have a current version of that page that I can drop the tabs into?

I can use one of my demos but its probably easier for you if you give me your current working html and I will just place the tabs and leave the rest the same.

1 Like

Coming right up Maestro! We can start with the most recent 3-tab version that I never did get off the ground. :tongue:

<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <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>merton 9 &#47;The Assassinatiom of Thomas Merton by semicodin &#7172; with Huge Assistance from  &lsquo;Archibald&rsquo; and Paul O&rsquo;Brien of Sitepoint Forums</title>

  <style>

    body {
      width: 1080px;
      margin: 0;
      font-family: 'roboto slab', serif;
      font-size: 2rem;
      line-height: 2.13rem;
      font-weight: 600;
      color: black;
    }

p {
    line-height: 1
}

.main {
      margin: 7rem 3.13rem 7rem 3.13rem;
      background-color: #ffffee;
      font-style: italic;
      text-align: left;
      color: black;
      font-family: 'crete round', serif;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: bold;
    }

    td {
      padding-top: .4rem;
      padding-right: .4rem;
      padding-bottom: .4rem;
      padding-left: .7rem;
    }

.cent {text-align: center}
.undr {text-decoration: underline}
.roon {color: maroon}

/*▬▬▬▬ PAUL’S TAB Courtesy PAUL O’BRIEN of Sitepoint ▬▬▬▬ */

    .tablabel3 {
      position: relative;
      text-align: center;
      border-radius: 20px 20px 0px 0px;
      color: black;
      padding: 1rem 1rem 0;
      font-size: 2.25rem;
      line-height: 1.5;
      font-weight: bold;
      height: 67px;
      width: 250px;
      filter: drop-shadow(-3px 0px var(--border-color)) drop-shadow(3px 0px var(--border-color));
    }

    .tab {
      display: flex;
      max-width: 950px;
      margin: auto;
      overflow: hidden;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0px -5px var(--border-color));
      border-bottom: 10px solid var(--bottom-border-color);
    }

    .tab:after,
    .tab:before {
      content: "";
      position: relative;

      z-index: 2;
      flex: 1;
      /*box-shadow: 0 34px var(--tab2color);*/
      box-shadow: 0 34px rgba(221, 198, 136, 0.8);
      /* Try and match a color from the image*/
      mix-blend-mode: lighten;
      /* merge the box shadow above with the background */
      /* this is necessary or a gap will show */
    }
    .tab:before {
      box-shadow: 0 34px rgb(0, 0, 0, 0.8)
    }
    .tab:after {
      border-radius: 0 0 0 80px;
      margin-left: -9px;
    }
    .tab:before {
      border-radius: 0 0 80px 0;
      margin-right: -9px;
    }
    .tablabel3:before {
      content: "";
      pointer-events: none;
      position: absolute;
      inset: 0 0 0 0;
      z-index: -1;
      background: var(--tab2color) url("https://semicodin.nekoweb.org/vault/parchment-a.jpg");
      background-position: -3px -8px;
      transform: perspective(100px) rotateX(36deg) translateY(5px);
      border-radius: 20px 20px 0 0;
   }
    .bkdimg {
      position: relative;
      background: none;
      overflow: hidden;
      margin-top: 1rem;
      margin-bottom: -2px;
      /* attempt to stop rounding errors when zoomed*/
    }
.ctr{pointer-events:none;}
.ctr a{pointer-events:initial;}
    .ctr {
    position: absolute;
    inset: 0 0 0 0;
    }
    .ctr2 {-index: 3;}
    .ctrmid {z-index:  2;}
    .ctr3 {z-index: 1;}
    .ctr2 .tab:before {flex: 0 0 65px;}
    .ctr3 .tab:after {flex: 0 0 65px;}

    .tab1active .ctr,
    .tab2active .ctr,
    .tab3active .ctr {
      position: absolute;
    }
    .tab1active .ctr2,
    .tab2active .ctrmid,
    .tab3active .ctr3 {
      position: relative;
      z-index: 4;
    }
    .tab3active .ctr2 {
      z-index: 1;
    }

.svgtabs {
      --tab3-bg-color: #b16742;
      --tab3-color: #000;
    }

    .svgtabs {
      width: 100%;
      margin: auto;
      display: flex;
      overflow: hidden;
     border-bottom:10px solid #000;
    }

    .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 10s infinite;
    }

    @keyframes tab {
      0% {
        height: 220px;
        width: 210px;
      }

      50% {
        height:200px;
        width: 170px;
      }

      100% {
        height: 220px;
        width: 210px;
      }
    }

/* ━━━━━━ BACKGROUND & POEM-A ━━━━━━ */

    .indent {
      margin-left: 6.26rem
    }
    .tab a {
      transform: translateY(-8px);
      display: flex;
      text-align: center;
      justify-content: center;
    }
    .tab a:link {
      color: black;
      font-weight: bold;
    }
    .tab a:visited {
      color: black;
      font-weight: bold;
    }
    .redlink a:link {
      color: crimson;
      padding-top: 1rem;
      font-weight: bold;
    }
    .redlink a:visited {
      color: crimson;
      padding-top: 1rem;
      font-weight: bold;
    }
    .leada {
      color: blue;
      margin: 3.13rem 0 3.13rem 0;
      text-align: center;
      font-family: 'solway', serif;
      font-weight: bold;
      font-size: 3rem;
      line-height: 3.25rem;
    }
    .leadb {
      text-allign: center;
      font-family: 'solway', serif;
      font-weight: 400;
      font-size: 2.5rem;
      line-height: 3rem;
    }
    .leadc {
      text-align: center;
      font-style: normal;
      margin-bottom: 2.5rem;
      font-family: 'solway', serif;
      font-weight: 400;
      font-size: 2rem;
      line-height: 2.5rem;
    }
    .rip {
      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 5% 0rem 5%;
      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;
    }
    .death {
      margin-top: 1.57rem;
      margin-left: 5%;
      margin-right: 5%;
      margin-bottom: 2.5rem;
      font-style: normal;
      text-align: left;
      color: black;
      font-family: 'solway', serif;
      font-size: 3.25rem;
      line-height: 1.1;
      font-weight: bold;
    }
    .parch {
      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;
    }
.thomas {
      float: left;
      width: 800px;
      height: 1215px;
      margin: 2rem 0 0 -3rem;
      position: relative;   /* courtesy “snadyleiby” of Sitepoint forums */
      left: -1.25rem;
      shape-outside: url(https://semicodin.nekoweb.org/vault/merton1215.png);
      shape-margin: 1rem
    }
.foot {
      color: #ffffee; /* ivory */
      margin-top: 1rem;
      text-align: left;
      font-style: normal;
      margin-bottom: 3.13rem;
      font-family: 'crete round', serif;
      font-weight: bold;
      font-size: 2rem;
      line-height: 2.13rem;
    }

/*▬▬▬▬▬▬ END CSS ▬▬▬▬▬▬*/

</style>
</head>

<body>
<main>
<div class="leada">
shape-outside: (URL)<br>
with 3 Animated SVG Tabs
</div>

<!-- 3 TABS: add active class to anchor to bring the tab in front as required -->
  <nav class="svgtabs threetab">

    <a class="svgtab1" href="https://en.m.wikipedia.org/wiki/Thomas_Merton">
      <span>T. Merton</a></span>

      <svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
        <use href="#anitab-medium" />
      </svg>

    </a>
    <a class="svgtab2" href="https://en.m.wikipedia.org/wiki/Zhuang_Zhou">
      <span>Chuang Tzu</a></span>
      <svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
        <use href="#anitab-medium" />
      </svg>
    </a>

    <a class="svgtab3" href="https://en.m.wikipedia.org/wiki/Zhuangzi_(book)">
      <span>&ldquo;Zhuangzi&rdquo;</a></span>
      <svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
        <use href="#anitab-medium" />
      </svg>
    </a>

  </nav>

<div class="parch">

<div class="begin">
The Assassination of Thomas Merton
</div>

<div class="cent">
<table class="rip">
<tbody>
<tr>
<td>1915</td>
<td>
<img src="https://lh3.googleusercontent.com/pw/AP1GczNK01urgiwZ_soZQU-12U29Siu-4J37H-ZvpeC3gKfz0IzceW35to0b8q7EjDHp2nXfNaPSfc1Dwary6KUrjiDl-Ldxj4xRRi9umxtZJwgtJjXgxA=w200-h300" alt="">
</td>
<td>1968</td>
</tr>
</tbody>
</table>
</div><!-- closing cent -->

<div class="death">
<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: &ldquo;In all probability the death of Thomas Merton was due in part to heart failure, in part to an electric shock.&rdquo; 
<p></p>

<p>
<span class="roon">Since there was no autopsy, there was no suitable explanation for the wound in the back of Merton&rsquo;s head, &ldquo;which had bled considerably.&rdquo;</span> Arriving from the cottage next to Merton&rsquo;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>

<p>
His body was flown back to the United States on board a U.S. 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 <i>&ldquo;The Martyrdom of Thomas Merton: An Investigation,&rdquo;</i> presenting the evidentiary record&rsquo;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 and author John Howard Griffin &mdash; <i><span class="undr">Thomas Merton&rsquo;s Betrayers: The Case Against Abbot James Fox</span></i> &mdash; presents documentary evidence of manipulation and coverup by the Catholic Church and Merton&rsquo;s political foes.
</p><p>
The Spring 2024 issue of <i>The <img class="thomas" src="https://semicodin.nekoweb.org/vault/merton1215.png" alt="">Catholic Historical Review</i> published <i>&ldquo;The Official Thai Reports on Thomas Merton&rsquo;s Death.&rdquo;</i> The official cause of death was a natural cause: &ldquo;sudden heart failure,&rdquo; not &ldquo;accidental electrocu-tion.&rdquo; <span class="roon">The police report states that Merton was already dead before he came into con-tact with a faulty fan that was found lying across his body.</span>
</p>
</div><!-- closing death -->

  <!-- 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="anitab-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://semicodin.nekoweb.org/vault/parchment-a.jpg" clip-path="url(#shape3)" />
        </g>
      </defs>

    </svg>
    </div>
</div><!-- closing parchment -->
</div><!-- closing main -->

</body>
</html>

Ok, I have a little spare time in the morning and will put up a codepen.

1 Like

Here you are:

Note that you keep moving your images which affects all my previous demos as the images are no longer where you put them (that’s why I copied them locally as you break my codepens every time you move an image).

In The latest html you gave me you have the parchment pointing to here:

https://semicodin.nekoweb.org/vault/parchment-a.jpg

However there is no image at that address but if did find it here:

https://semicodin.nekoweb.org/parchment-a.jpg

You also have the thomas image listed in the html as being here:

https://semicodin.nekoweb.org/vault/merton1215.png

He is not there and I couldn’t find him at the root either.

https://semicodin.nekoweb.org/merton1215.png

I won’t be around much now as we are away from Sunday evening and have packing and errands to run. I will be checking on mobile while away from time to time.

1 Like

I can’t wait to see them. Have a wonderful vacation Paul! I hope by the time you return to have a significantly better understanding of SVG. I need a book on SVG to be brutally frank. But however I get it into my tiny grey cells, get it I must. We haven’t even approached static patterns! But you know what? These animated versions were so cool the minute you uploaded them I said YES. Oh these are going to go flying off the shelf! Thank you my friend and we’ll see you in July. :biggrin:

semicodin

If you’re still here Paul the tabs for 3-tab are reversed and I tried to physically rearrange them but it had no effect and I can’t find the z-index for the third tab or I would just reverse them!

Can you help me? I know you’re busy but I tried both methods and failed!

Just change the z-index in descending order:

e.g.

    .svgtab1{z-index:3;}
    .svgtab2{z-index:2;}
    .svgtab3{z-index:1;}

I’ve added that to the 3 tab codepen. You may want to copy all the codepens again just in case I changed something.

Note:If you wanted the same for the seven tabs then start at 7 for svgtab1 and then descend.:

1 Like

EDIT: I went ahead and did them and your 3 Tab I just copied. THEY LOOK GREAT PAUL! Bon Voyage! . . .

Okay but that isn’t in your codepens (believe me I looked!). Is this new code that I am appending, or already there but in a different format? In other words can I just add this to the 7-tab version —

    .svgtab1{z-index:7;}
    .svgtab2{z-index:6;}
    .svgtab3{z-index:5;}
    .svgtab4{z-index:4;}
    .svgtab5{z-index:3;}
    .svgtab6{z-index:2;}
    .svgtab7{z-index:1;}

this to the 2-tab —

    .svgtab1{z-index:2;}
    .svgtab2{z-index:1;}

— and so on? I don’t want to break the page. They look magnificent Paul! No wonder everyone’s hitting the ani tabs in my toc. They rock! (literally!) We’re in the cabin of an ancient ship in medieval times, studying a map by candlelight . . .

Yes it is and I added it to the three tab codepen as that was the one you asked about and as I mentioned above.

Yes that’s correct.

1 Like

I apologize Paul. I was moving things around but finally settled on 2 more folders on my site to help organize things. For one thing I wanted my shape-outside to be in a proprietary folder all their own: “origin”. Merton and Lucy live there (both the images and their html). And then I also created “pics” which is where parchment-a now lives permanently. All this in an effort to reserve “vault” for the ZIP files and unclutter the root. In time this will settle down. Bon Voyage! :biggrin:

1 Like