<div class="controls">
  <input id="paddingInput" type="range" min="0" max="100">
  <input id="paddingBottomInput" type="range" min="0" max="100">
</div>

<div class="grid">
  <div class="card">
    <svg class="card__decor card__decor--back">
      <defs>
        <clipPath>
          <path class="card__clip"></path>
        </clipPath>
      </defs>
      <path class="card__background"></path>
    </svg>

    <svg class="card__decor card__decor--path">
      <path class="card__path"></path>
    </svg>

    <div class="card__title">1 Lorem ipsum dolor sit amet.</div>
    <div class="card__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam quaerat hic perferendis inventore provident ex, reiciendis deleniti necessitatibus laboriosam quia voluptates nostrum nemo delectus, a officiis dolorem dignissimos laudantium quasi.</div>
  </div>

  <div class="card">
    <svg class="card__decor card__decor--back">
      <defs>
        <clipPath>
          <path class="card__clip"></path>
        </clipPath>
      </defs>
      <path class="card__background"></path>
    </svg>

    <svg class="card__decor card__decor--path">
      <path class="card__path"></path>
    </svg>

    <div class="card__title">2 Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="card__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, officiis id. Alias odio iste rem quia cupiditate ipsum, molestiae, deserunt sed modi, amet placeat facere. Provident nostrum iste atque veritatis?</div>
  </div>

  <div class="card">
    <svg class="card__decor card__decor--back">
      <defs>
        <clipPath>
          <path class="card__clip"></path>
        </clipPath>
      </defs>
      <path class="card__background"></path>
    </svg>

    <svg class="card__decor card__decor--path">
      <path class="card__path"></path>
    </svg>

    <div class="card__title">3 Ab veritatis eveniet, sint consequuntur magnam tenetur?</div>
    <div class="card__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil aut sint hic ipsa quisquam molestias modi adipisci assumenda quae in! Quasi, repellat voluptas? Ab veritatis eveniet, sint consequuntur magnam tenetur?</div>
  </div>

</div>

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  font-family: sans-serif;
  line-height: 1.5;
  padding: 100px 50px 0;
  background: url(https://images.unsplash.com/photo-1526336024174-e58f5cdd8e13?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200) no-repeat center / cover #001031;
  background-attachment: fixed;
  background-blend-mode: overlay;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  justify-content: center;
  gap: 50px;
  max-width: 1260px;
  margin: 0 auto;
}

.card {
  position: relative;
  padding: 60px;
  padding-bottom: 125px;
  color: #fff;
  z-index: 0;
}

.card__decor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: -1;
}

.card__decor--path {
  filter: drop-shadow(0 0 4px #00C3FF);
  animation: opacity 3s infinite;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.card__decor--back {
  backdrop-filter: blur(6px);
  z-index: -2;
}

.card__path {
  fill: none;
  stroke: #00C3FF;
  stroke-width: 3px;
  stroke-dasharray: 12px 12px;
}

.card__background {
  fill: #00C3FF1A;
  stroke: #fff6;
  stroke-width: 2px;
}

.card__title {
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0 0 30px;
  margin-bottom: 30px;
}

@media (max-width: 576px) {
  .card {
    padding: 25px;
    padding-bottom: 60px;
  }
  
  .card__title {
    font-size: 1.25rem;
    padding: 0 0 10px;
    margin-bottom: 10px;
  }
  
  .card__path {
    stroke-width: 2px;
  }
}

.controls {
  position: fixed;
  top: 20px;
  padding: 8px;
  background-color: #fff9;
  border-radius: 12px;
  z-index: 1;
}

.controls > * {
  vertical-align: middle;
}

import { default as PathBuilder, reactive } from "https://codepen.io/RAX7/pen/xxYdYav.js";

const builderProps = reactive({
  padding: 30,
  paddingBottom: 90
});

const mql = window.matchMedia("(max-width: 576px)");
function onMqChange(e) {
  if (e.matches) {
    builderProps.paddingBottom = 45;
    builderProps.padding = 10;
  } else {
    builderProps.paddingBottom = 90;
    builderProps.padding = 30;
  }
}

onMqChange(mql);
mql.addEventListener("change", onMqChange);

// +++++++++++++++++++
const paddingInput = document.querySelector("#paddingInput");
paddingInput.value = builderProps.padding;
paddingInput.addEventListener("input", ({ target }) => {
  builderProps.padding = +target.value;
});

const paddingBottomInput = document.querySelector("#paddingBottomInput");
paddingBottomInput.value = builderProps.paddingBottom;
paddingBottomInput.addEventListener("input", ({ target }) => {
  builderProps.paddingBottom = +target.value;
});
// --------------------

const pathPoints = [
  ({ card, title }, p) => (
    `M ${title.x + card.w * 0.15} ${title.y + title.h}`
  ),
  ({ card, title }, p) => (
    `L ${card.w - p.padding} ${title.y + title.h}`
  ),
  ({ card, title }, p) => (
    `L ${card.w - p.padding} ${p.padding}`
  ),
  ({ card, title }, p) => (
    `L ${p.padding} ${p.padding}`
  ),
  ({ card, title }, p) => (
    `L ${p.padding} ${card.h - p.paddingBottom}`
  ),
  ({ card, title }, p) => (
    `L ${p.paddingBottom * 1.25 - Math.SQRT1_2 * p.padding}` +
    ` ${card.h - p.paddingBottom}`
  ),
  ({ card, title }, p) => (
    `L ${p.paddingBottom * 1.25 + p.paddingBottom - Math.SQRT1_2 * p.padding}` +
    ` ${card.h - p.padding}`
  ),
  ({ card, title }, p) => (
    `L ${card.w - p.paddingBottom} ${card.h - p.padding}`
  ),
  ({ card, title }, p) => (
    `L ${card.w} ${card.h - p.paddingBottom}`
  ),
  ({ card, title }, p) => (
    `L ${card.w} ${title.y + title.h / 2}`
  )
];

const backgroundPoints = [
  "M 0 0",
  ({ card, title }, props) => {
    let d = "", x, y;
    d += `L ${0} ${card.h - props.paddingBottom + props.padding}`;
    
    x = props.paddingBottom * 1.25 - props.padding;
    y = card.h - props.paddingBottom + props.padding;
    d += `L ${x} ${y}`;
    
    x = props.paddingBottom * 1.25 + props.paddingBottom - props.padding;
    y = card.h;
    d += `L ${x} ${y}`;
    d += `L ${card.w - props.paddingBottom} ${card.h}`;
    d += `L ${card.w} ${card.h - props.paddingBottom + props.padding}`;
    d += `L ${card.w} ${0} Z`;
    
    return d;
  }
];

const cards = document.querySelectorAll(".card");

cards.forEach((el, index) => {
  const svgBack = el.querySelector(".card__decor--back");

  const path = el.querySelector(".card__path");
  const background = el.querySelector(".card__background");
  const clip = el.querySelector(".card__clip");

  const clipId = `clip-path-${index}`;
  clip.parentNode.id = clipId;
  svgBack.style.clipPath = `url(#${clipId})`;

  const builderDeps = {
    card: el,
    title: el.querySelector(".card__title")
  };

  const pathBuilder = new PathBuilder({
    points: pathPoints,
    props: builderProps,
    deps: builderDeps,
    lazy: true,
    render: (d) => {
      path.setAttribute("d", d);
    },
  });

  const backgroundBuilder = new PathBuilder({
    points: backgroundPoints,
    props: builderProps,
    deps: builderDeps,
    lazy: true,
    render: (d) => {
      background.setAttribute("d", d);
      clip.setAttribute("d", d);
    }
  });
});