【SVGで簡単に解決！】円弧の作成方法｜アニメーションも解説

<p class="intro">スクロールしてください<br>↓↓↓</p>
<div class="container">
  <div class="message">
    <!-- 円弧 -->
    <svg class="gradient-circle-container" width="500" height="500" viewBox="0 0 500 500">
      <defs>
        <!-- グラデーションの始点(x1,y1)　終点(x2,y2) -->
        <linearGradient id="linear-gradient" x1="0" y1="0.5" x2="1"  y2="0.5">
          <!-- 始点の色 -->
          <stop offset="0" stop-color="#FD9BB8"></stop>
          <!-- 中間の色 -->
          <stop offset="0.5" stop-color="#CF8BF3"></stop>
          <!-- 終点の色 -->
          <stop offset="1" stop-color="#A770EF"></stop>
        </linearGradient>
      </defs>
      <circle class="gradient-stroke-circle" cx="250" cy="250" r="225" stroke="url(#linear-gradient)"></circle>
    </svg>
    <!-- 文章エリア -->
    <div class="message__content">
        <h2 class="message__title">TITLE</h2>
        <p class="message__text">
            Lorem ipsum dolor sit amet,<br>
            consectetur adipiscing elit,<br>
            sed do eiusmod tempor incididunt<br>
            ut labore et dolore magna aliqua
        </p>
    </div>
  </div>
</div>

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.intro{
  font-size:40px;
  text-align:center;
}
.container{
    width: 100%;
    min-height: 100vh;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ===============================================
# message
=============================================== */
.message{
    width: 100%;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.message__title{
    font-size: 50px;
    text-align: center;
    font-family: 'Signika Negative';
}
.message__text{
    font-size: 18px;
    text-align: center;
    font-family: 'Signika Negative';
    margin-top: 24px;
}
/* ===============================================
# circle
=============================================== */
.gradient-circle-container{
    max-width: 540px;
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 0 20px;
    z-index: -1;/*テキストを選択できるように */
}
.gradient-stroke-circle {
    fill: none;/* 塗りつぶしをなしにする */
    stroke-width: 50;/* 円の線の太さ50 */
    stroke-dasharray: 1060 1413;/* 円の線のスタイルを指定。ここでは、線を75%(1060)と円周を(1413)に設定 */
    stroke-linecap: round;/* 円の線端を丸くする */
    /* transform: rotate(-90deg); /* 円を-90度回転させる 反転させたいときに使用 */
    /* transform-origin: center center; /* 回転の中心点を円の中心に設定 */
}

.gradient-stroke-circle {
    fill: none;/* 塗りつぶしをなしにする */
    stroke-width: 50;/* 円の線の太さ50 */
    stroke-dasharray: 1060 1413;/* 円の線のスタイルを指定。ここでは、線を75%(1060)と円周を(1413)に設定 */
    stroke-linecap: round;/* 円の線端を丸くする */
    /* transform: rotate(-90deg); /* 円を-90度回転させる 反転させたいときに使用 */
    /* transform-origin: center center; /* 回転の中心点を円の中心に設定 */
}

window.addEventListener('DOMContentLoaded',function(){
    const tl = gsap.timeline({
        scrollTrigger:{
        trigger:'.message',
        start:'center center',
    }});
    tl
    .fromTo('.message__content > *',{autoAlpha:0,y:20},{autoAlpha:1,y:0,stagger:.3})
    .fromTo('.gradient-circle-container',{rotate:'-120deg',x:'-50%',y:'-50%'},{duration:1.5,rotate:'0deg',x:'-50%',y:'-50%'},'<')
    .fromTo('.gradient-stroke-circle',{autoAlpha:0,'stroke-dasharray':'0 1256'},{autoAlpha:1,'stroke-dasharray':'942 1256',duration:1},'<')
})

tl
.fromTo('.message__content > *',{autoAlpha:0,y:20},{autoAlpha:1,y:0,stagger:.3})
.fromTo('.gradient-circle-container',{rotate:'-120deg',x:'-50%',y:'-50%'},{duration:1.5,rotate:'0deg',x:'-50%',y:'-50%'},'<')
.fromTo('.gradient-stroke-circle',{autoAlpha:0,'stroke-dasharray':'0 1413'},{autoAlpha:1,'stroke-dasharray':'1060 1413',duration:1},'<')

'stroke-dasharray':'1060 1413'

const tl = gsap.timeline({
    scrollTrigger:{
    trigger:'.message',
    start:'center center',
}});