[해피CGI][cgimall] 텍스트 프레임 테두리 애니메이션 회전 (CSS & SVG 기반)

CSS와 SVG를 활용하여 구현한 텍스트 프레임 애니메이션 예제입니다.

SVG의 textPath를 사용해 텍스트가 지정된 경로를 따라 자연스럽게 흐르도록 제작되었습니다.
별도의 자바스크립트 없이 CSS 애니메이션만으로 부드러운 회전 효과를 구현한 것이 특징입니다.

테두리 영역을 따라 반복적으로 움직이는 텍스트가 감각적인 디자인 요소를 연출합니다.
웹사이트 메인 비주얼, 이벤트 배너, 프로모션 영역 등에 응용하기 좋은 소스입니다.

HTML 구조

 

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" aria-labelledby="t">

 

         width="200" height="200"

         preserveAspectRatio="xMidYMid slice"

         clip-path="url(#blobClip)"/>

<clipPath id="blobClip">

      <path d="M43.1,-68.5C56.2,-58.6,67.5,-47.3,72.3,-33.9C77.2,-20.5,75.5,-4.9,74.2,11.3C72.9,27.6,71.9,44.5,63.8,57.2C55.7,69.8,40.6,78.2,25.5,79.2C10.4,80.1,-4.7,73.6,-20.9,69.6C-37.1,65.5,-54.5,63.9,-66,54.8C-77.5,45.8,-83.2,29.3,-85.7,12.3C-88.3,-4.8,-87.7,-22.3,-79.6,-34.8C-71.5,-47.3,-55.8,-54.9,-41.3,-64.2C-26.7,-73.6,-13.4,-84.7,0.8,-86C15,-87.2,29.9,-78.5,43.1,-68.5Z"

            transform="translate(100 100)"/>

    </clipPath>

 

  <path

    class="blob"

    d="M43.1,-68.5C56.2,-58.6,67.5,-47.3,72.3,-33.9C77.2,-20.5,75.5,-4.9,74.2,11.3C72.9,27.6,71.9,44.5,63.8,57.2C55.7,69.8,40.6,78.2,25.5,79.2C10.4,80.1,-4.7,73.6,-20.9,69.6C-37.1,65.5,-54.5,63.9,-66,54.8C-77.5,45.8,-83.2,29.3,-85.7,12.3C-88.3,-4.8,-87.7,-22.3,-79.6,-34.8C-71.5,-47.3,-55.8,-54.9,-41.3,-64.2C-26.7,-73.6,-13.4,-84.7,0.8,-86C15,-87.2,29.9,-78.5,43.1,-68.5Z"

    transform="translate(100 100)"

fill="url(#imgFill)"

  />

  <path

    id="text"    d="M43.1,-68.5C56.2,-58.6,67.5,-47.3,72.3,-33.9C77.2,-20.5,75.5,-4.9,74.2,11.3C72.9,27.6,71.9,44.5,63.8,57.2C55.7,69.8,40.6,78.2,25.5,79.2C10.4,80.1,-4.7,73.6,-20.9,69.6C-37.1,65.5,-54.5,63.9,-66,54.8C-77.5,45.8,-83.2,29.3,-85.7,12.3C-88.3,-4.8,-87.7,-22.3,-79.6,-34.8C-71.5,-47.3,-55.8,-54.9,-41.3,-64.2C-26.7,-73.6,-13.4,-84.7,0.8,-86C15,-87.2,29.9,-78.5,43.1,-68.5Z"

    transform="translate(100 100)"

    fill="none" stroke="none"

    pathLength="100"

  />

 

  <text class="text-content">

    <textPath href="#text" startOffset="0%">❤ MADE WITH LOVE ❤ MADE WITH LOVE ❤ MADE WITH LOVE ❤ MADE WITH LOVE

      <animate attributeName="startOffset" from="0%" to="100%" dur="15s" repeatCount="indefinite" />

    </textPath>

<textPath href="#text" startOffset="100%">❤ MADE WITH LOVE ❤ MADE WITH LOVE ❤ MADE WITH LOVE ❤ MADE WITH LOVE

      <animate attributeName="startOffset" from="-100%" to="0%" dur="15s" repeatCount="indefinite" />

    </textPath>

  </text>

</svg>

 

 

<p id="dev">Developed with <span >❤</span> by <a href="https://codepen.io/designfenix/" target="_blank">Fernando Cohen</a> </p>

 

CSS 소스

body{

display: flex;

min-height:100vh;

justify-content: center;

align-items: center;

background: radial-gradient(circle at 50% 50%, #F4C6A5 0%, #F9D9C2 10%, #FFF3E9 30%);

}

 

svg{

max-width: 70vw;

max-height: 80vh;

aspect-ratio: 1/1;

#blobClip{

    transform-origin: center;

transition: ease-out transform .4s;

}

&:hover{

#blobClip{

transform: scale(1.15) translate(0%, 0%);

}

.text-content{

fill: white;

mix-blend-mode: overlay;

}

}

}

.text-content {

font: 700 10px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

letter-spacing: 1.5px;

text-transform: uppercase;

fill: black;

mix-blend-mode: normal;

transition: ease fill .5s;

}

 

/*Dev*/

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,750,700");

#dev {

font-family: "Montserrat", sans-serif;

position: fixed;

font-size: 14px;

top: 10px;

left: 10px;

padding: 1em;

color: #333;

background-color: white;

border-radius: 25px;

cursor: pointer;

a {

text-decoration: none;

font-weight: bold;

color: #333;

transition: ease all 0.4s;

&:hover {

color: #ef5350;

text-decoration: underline;

}

}

span {

display: inline-block;

transition: ease all 0.4s;

color: pink;

&:hover {

transform: scale(1.2);

}

}

}