SVGアニメーション

図形をIllustratorで作成し、stroke-dashoffsetでアニメーションを実装しました。
stroke-dashoffsetの数値はJavaScriptのconsole.logを使用して出力していますが、基本的にはCSSのみでの実装です。
GSAPでも同様のことができるかと思いますが、案件でJavaScript使用NG案件もあるため、試しに作ってみたものです。
SVGアニメーションが苦手なこともありchatGPTも活用しつつ進めました。

<div class="c-block">
    <div class="c-block__content">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 268">
            <!-- 画像を切り抜くためのパス -->
            <clipPath id="clipPath">
                <path d="M30.52.5h224.98l30,30v208l-30,30H30.5L.5,238.5V30.5L30.5.5h.02"/>
            </clipPath>

            <!-- 画像を表示し、パスで切り抜く -->
            <image xlink:href="https://placehold.jp/500x500.png" width="100%" height="100%" clip-path="url(#clipPath)" preserveAspectRatio="xMaxYMax slice"/>

            <!-- その他のSVG要素 -->
            <path class="c-block__border" d="m30.52.5h224.98l30,30v208l-30,30H30.5L.5,238.5V30.5L30.5.5h.02"/>
        </svg>
    </div>
</div>
<!-- [/c-block] -->

.c-block {
  width: min(80%, 400px);
  margin-inline: auto;
  position: relative;
}

.c-block__content svg {
  overflow: initial;
}

.c-block__content image {
  opacity: 0;
  animation: line-animation-img 0.3s 3.3s forwards;
}

@keyframes line-animation-img {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.c-block__border {
  fill: none;
  stroke: #b0c4de;
  stroke-width: 1;
  stroke-miterlimit: 10;
  stroke-dasharray: 1035.7056884766px;
  stroke-dashoffset: 1035.7056884766px;
  animation: line-animation 3s ease-in-out forwards;
}

@keyframes line-animation {
  0% {
    stroke-dashoffset: 1035.7056884766px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}

.c-block__img {
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: url(#clip01);
}

.c-block__img img {
  width: 100%;
  height: auto;
}

.c-block__clip {
  width: 100%;
  height: 100%;
}