html - I would like to change my heart shape into Triangle shape. But can't get path svg code?

Question

I have this heart shape, with some path coordinates. But I will like to have a triangle instead, but I'm able to find the right coordinate code. Can Someone help me out? So, one of the heart shapes can be a Triangle instead?

Tried to change the heart shape code with this triangle code: M 6 3 L 0 12 H 12 Z. But then the triangle shape is not visible or doesn't show the shape then?

Hope for your help. Thanks!

const textPath = document.querySelector("#textPath");

const a = document.documentElement,
  b = document.body,
  st = "scrollTop",
  sh = "scrollHeight",
  startOffset = 0;

const offsetOnScroll = (percent, startOffset) =>
  textPath.setAttribute("startOffset", percent * 10 + startOffset);

textPath.setAttribute("startOffset", startOffset);

document.addEventListener("scroll", (event) => {
  let percent = ((a[st] || b[st]) / ((a[sh] || b[sh]) - a.clientHeight)) * 100;
  window.requestAnimationFrame(() => offsetOnScroll(percent * -1, startOffset));
});


/* number two; */
const textPathB = document.querySelector("#textPathB");
const aB = document.documentElement,
    bB = document.body,
    stB = "scrollTop",
    shB = "scrollHeight",
    startOffsetB = 0;
const offsetOnScrollB = (percent, startOffsetB) =>
    textPathB.setAttribute("startOffset", percent * 10 + startOffset);
    textPathB.setAttribute("startOffset", startOffset);
document.addEventListener("scroll", (event) => {
    let percent = ((aB[stB] || bB[stB]) / ((aB[shB] || bB[shB]) - aB.clientHeight)) * 100;
window.requestAnimationFrame(() => offsetOnScrollB(percent * -1, startOffset));
});

/* heart shape */
.shape {
  fill: none;
  /* stroke: white; */
}

#heart {
  width: 90vmin;
  height: auto;
  object-fit: contain;
  /* overflow: hidden; */
}

#textPath {
  /* The font-size is really hacky, sorry :( */
  font-family: 'Till-Normal';
  --sizefactor: 1.112;
  font-size: calc(1em * var(--sizefactor));
  letter-spacing: calc(1em * var(--sizefactor));
  fill: var(--purple-full);
  font-weight: 800
}

.container1 {
  width: 100%;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: palevioletred; */
}

/* 2 heart shape */
.shape1 {
  fill: none;
  /* stroke: white; */
}

#hearttwo {
  width: 90vmin;
  height: auto;
  object-fit: contain;
  /* overflow: hidden; */
}

#textPathB {
  /* The font-size is really hacky, sorry :( */
  font-family: 'Till-Normal';
  --sizefactor: 1.112;
  font-size: calc(1em * var(--sizefactor));
  letter-spacing: calc(1em * var(--sizefactor));
  fill: var(--purple-full);
  font-weight: 800
}

.container2 {
  width: 100%;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: palevioletred; */
}

<!-- Heart -->

  <div class="container1">
      <svg id="heart" data-name="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">

          <path class="shape" id="shape" d="M-400 32 v-150 h200 a100,100 90 0,1 0,200 a100,100 90 0,1 -200,0 z" transform="rotate(225, 0, 0)"/>

          <text font-family="arial">
              <textPath xlink:href="#shape" id="textPath"> THE BLISS OF ADOPTION  ? THE BLISS OF ADOPTION  ? THE BLISS OF ADOPTION  ? THE BLISS OF ADOPTION  ? THE BLISS OF ADOPTION  ? </textPath>
          </text>
      </svg>
  </div>
  <!-- Triangle -->
  <div class="container2">
      <svg id="hearttwo" data-name="hearttwo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">

          <path class="shape1" id="shape1" d="M-400 32 v-150 h200 a100,100 90 0,1 0,200 a100,100 90 0,1 -200,0 z" transform="rotate(225, 0, 0)"/>

          <text font-family="arial">
              <textPath xlink:href="#shape1" id="textPathB"> THE ULTIMATE FAIRYTALE ? THE ULTIMATE FAIRYTALE ? THE ULTIMATE FAIRYTALE ? THE ULTIMATE FAIRYTALE ? THE ULTIMATE FAIRYTALE ? </textPath>
          </text>
      </svg>
  </div>

question from:https://stackoverflow.com/questions/65860782/i-would-like-to-change-my-heart-shape-into-triangle-shape-but-cant-get-path-sv

Answer 1

I get this triangle so far. You should take a look at this link and learn more about paths. And also from Danny '365CSI' Engelman's comment tinker with this svg editor link You should understand how path variables work. Issue here is, when you change the path variable, you must keep the x y axes in mind or it won't show up.

const textPath = document.querySelector("#textPath");

const a = document.documentElement,
  b = document.body,
  st = "scrollTop",
  sh = "scrollHeight",
  startOffset = 0;

const offsetOnScroll = (percent, startOffset) =>
  textPath.setAttribute("startOffset", percent * 10 + startOffset);

textPath.setAttribute("startOffset", startOffset);

document.addEventListener("scroll", (event) => {
  let percent = ((a[st] || b[st]) / ((a[sh] || b[sh]) - a.clientHeight)) * 100;
  window.requestAnimationFrame(() => offsetOnScroll(percent * -1, startOffset));
});


/* number two; */
const textPathB = document.querySelector("#textPathB");
const aB = document.documentElement,
    bB = document.body,
    stB = "scrollTop",
    shB = "scrollHeight",
    startOffsetB = 0;
const offsetOnScrollB = (percent, startOffsetB) =>
    textPathB.setAttribute("startOffset", percent * 10 + startOffset);
    textPathB.setAttribute("startOffset", startOffset);
document.addEventListener("scroll", (event) => {
    let percent = ((aB[stB] || bB[stB]) / ((aB[shB] || bB[shB]) - aB.clientHeight)) * 100;
window.requestAnimationFrame(() => offsetOnScrollB(percent * -1, startOffset));
});

/* heart shape */
.shape {
  fill: none;
  /* stroke: white; */
}

#heart {
  width: 90vmin;
  height: auto;
  object-fit: contain;
  /* overflow: hidden; */
}

#textPath {
  /* The font-size is really hacky, sorry :( */
  font-family: 'Till-Normal';
  --sizefactor: 1.112;
  font-size: calc(1em * var(--sizefactor));
  letter-spacing: calc(1em * var(--sizefactor));
  fill: var(--purple-full);
  font-weight: 800
}

.container1 {
  width: 100%;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: palevioletred; */
}

/* 2 heart shape */
.shape1 {
  fill: none;
  /* stroke: white; */
}

#hearttwo {
  width: 90vmin;
  height: auto;
  object-fit: contain;
  /* overflow: hidden; */
}

#textPathB {
  /* The font-size is really hacky, sorry :( */
  font-family: 'Till-Normal';
  --sizefactor: 1.112;
  font-size: calc(1em * var(--sizefactor));
  letter-spacing: calc(1em * var(--sizefactor));
  fill: var(--purple-full);
  font-weight: 800
}

.container2 {
  width: 100%;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: palevioletred; */
}

<!-- Heart -->

  <div class="container1">
      <svg id="heart" data-name="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">

          <path class="shape" id="shape" d="M -200 -150 V 50 H -400 Z" transform="rotate(225, 0, 0)"/>

          <text font-family="arial">
              <textPath xlink:href="#shape" id="textPath"> THE BLISS OF ADOPTION  ? THE BLISS OF ADOPTION  ? THE BLISS OF ADOPTION  ? THE BLISS OF ADOPTION  ? THE BLISS OF ADOPTION  ? </textPath>
          </text>
      </svg>
  </div>
  <!-- Triangle -->
  <div class="container2">
      <svg id="hearttwo" data-name="hearttwo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">

          <path class="shape1" id="shape1" d="M -200 -150 V 50 H -400 Z" transform="rotate(225, 0, 0)"/>

          <text font-family="arial">
              <textPath xlink:href="#shape1" id="textPathB"> THE ULTIMATE FAIRYTALE ? THE ULTIMATE FAIRYTALE ? THE ULTIMATE FAIRYTALE ? THE ULTIMATE FAIRYTALE ? THE ULTIMATE FAIRYTALE ? </textPath>
          </text>
      </svg>
  </div>