コピペでつかえるSVG

背景パターン集

コピペで使える、シンプルなSVG背景パターン

1
カラーとサイズを選択
2
お好みのパターンをコピー
3
sectionに貼り付け
詳しい使い方を見る
#7160e8
100%

シンプルドット


                    
                  

                


                

                  
                  
                

              


              
              

                

                  

                

                
サークルパターン


                
                

                  

                    

                    
                  

                


                

                  
                

              

            


            
            

            
            

            
            
          

        


        
        

          
詳しい使い方


          

            
            

              

                1. パターンをコピー
              

              

                カラーとサイズを調整して、お好みのパターンの「HTMLコピー」ボタンをクリック
              

            


            
            

              

                2. sectionに適用
              

              

                背景を適用したいsectionを以下のように修正してください：
              


              

                
<!-- sectionに relative クラスを追加 -->
<section class="... relative">
  
  <!-- コピーしたパターンコードをここに貼り付け -->
  <div class="absolute inset-0 opacity-30">
    <svg>...</svg>
  </div>
  
  <!-- コンテンツに relative z-10 を追加 -->
  <div class="... relative z-10">
    <!-- あなたのコンテンツ -->
  </div>
  
</section>

              

            


            
            

              

                重要なポイント
              

              
    
                
  • 
                  relativeをsectionタグに追加
                
    • 
                
  • 
                  relative z-10をコンテンツを囲むdivに追加
                
    • 
                
  • 
                  この順番で重ねることで、背景が後ろ・コンテンツが前に表示されます
                
    •