view source

JavaScript

document.title = 'モノクロ模様パターン背景デザイン フリー素材画像 幾何学模様文様 SVG';

var svgFiles = [
  'sample0.svg',
  'sample0-opacity01.svg',
  'sample0-opacity05.svg',
  'sample0-opacity09.svg',
  'sample-dot-rect2.svg',
  'sample-dot-rect3.svg',
  'sample-dot-rect4.svg',
  'sample-line-path.svg',
  'sample-line.svg',
  'sample-line-tate.svg',
  'sample-line-naname.svg',
  'sample-line-path-shadow.svg',
  'sample-line-path-cross.svg',
  'sample-line-path-cross4.svg',
  'sample-line-path-cross8.svg',
  'sample-line8-path-dot.svg',
  'sample-line8-path-sewing.svg',
  'sample-line-circle.svg',
  'sample-line-circle-cross.svg',
  'sample-rect.svg',
  'sample-rect2.svg',
  'sample-rect8.svg',
  'sample-rect8-stroke.svg',
  'sample-rect8-cross.svg',
  'sample-rect8-chain.svg',
  'sample-rect8-diamond.svg',
  'sample-rect8-ta.svg',
  'sample-rect2-zure.svg',
  'sample-rect2-stroke-kasane.svg',
  'sample-checkered2.svg',
  'sample-checkered4.svg',
  'sample-checkered8.svg',
  'sample-circle.svg',
  'sample-circle2.svg',
  'sample-circle-min.svg',
  'sample-circle-min-stroke.svg',
  'sample-circle4-in.svg',
  'sample-circle4-rect.svg',
  'sample-circle4-in-in.svg',
  'sample-circle4-in-in2.svg',
  'sample-circle4-shirokuro.svg',
  'sample-circle4-chain.svg',
  'sample-circle4-line.svg',
  'sample-circle4-shichihou.svg',
  'sample-circle-hex.svg',
  'sample-circle-hex-zure.svg',
  'sample-circle2-ellipse.svg',
  'sample-circle-arc-uroko.svg',
  'sample-circle-seiganha.svg',
  'sample-circle-seiganha-mask.svg',
  'sample-circle-clip.svg',
  'sample-peke-hex.svg',
  'sample-line-sankuzushi.svg',
  'sample-tri.svg',
  'sample-tri-min.svg',
  'sample-tri2.svg',
  'sample-tri2-stroke.svg',
  'sample-tri3.svg',
  'sample-tri-in.svg',
  'sample-tri4-naname.svg',
  'sample-tri3-asanoha.svg',
  'sample-tri6-hex-star.svg',
  'sample-tri-mask.svg',
  'sample-path-gizagiza.svg',
  'sample-path-rect-chain.svg',
  'sample-path-hishigata.svg',
  'sample-path-diamond.svg',
  'sample-path-arrow.svg',
  'sample-path-arrow2.svg',
  'sample-path-arrow3.svg',
  'sample-path-cross8.svg',
  'sample-path4-line.svg',
  'sample-path4-tri.svg',
  'sample-path4-saw.svg',
  'sample-path4-saw2.svg',
  'sample-path4-saw3.svg',
  'sample-path4-cross.svg',
  'sample-path4-bundou.svg',
  'sample-path4-wave4.svg',
  'sample-path4-arc-flower3.svg',
  'sample-path4-flower.svg',
  'sample-path4-flower4.svg',
  'sample-path4-flower4-wave.svg',
  'sample-path4-flower6.svg',
  'sample-path4-flower6-bold.svg',
  'sample-rect8-iriko.svg',
  'sample-rect-higaki.svg',
  'sample-rect4-hochikisu.svg',
  'sample-rect4-train.svg',
  'sample-rect4-hebi.svg',
  'sample-rect4-kaidan.svg',
  'sample-stroke.svg',
  'sample-check2.svg',
  'sample-wave.svg',
  'sample-wave2-tatewaku.svg',
  'sample-plus.svg',
  'sample-hex.svg',
  'sample-swirl.svg',
  'sample-brick.svg',
  'sample-arrow.svg',
  'sample-path.svg',
  'sample-path-cross.svg',
  'sample-path-uroko.svg',
  'sample-path-circle-half.svg',
  'sample-path-uneune.svg',
  'sample-path-uneune2.svg',
  'sample-path-uneune4.svg',
  'sample-path-hex.svg',
  'sample-path-tri.svg',
  'sample-path-zig.svg',
  'sample-pattern2-line.svg',
  'sample-pattern2-line-naname.svg',
  'sample-pattern4-line-naname2.svg',
  'sample-pattern4-dot-mosaic.svg',
  'sample-pattern2-circle-dot.svg',
  'sample-pattern3-line-rad.svg',
  'sample-pattern3-line-rad4.svg',
  'sample-pattern4-path-karakusa.svg',
  'sample-path-raimon.svg',
  'sample-path-curl.svg',
  'sample-polygon-star.svg',
  'sample-polygon-heart.svg',
  'sample-polygon-syuriken.svg',
  'sample-text.svg',
  'sample-grad.svg',
  'sample-ani-dot.svg',
  'sample-ani-dotdot.svg',
  'sample-ani-line.svg',
  'sample-ani-line2.svg',
  'sample-ani-line3.svg',
  'sample-ani-rotate.svg',
  'sample-ani-rect.svg',
  'sample-ani-rect-rotate.svg',
  'sample-ani-rect-rotate2.svg',
  'sample-ani-rect-scale.svg',
  'sample-ani-stroke-width.svg',
  'sample-ani-check-up.svg',
  'sample-ani-circle.svg',
  'sample-ani-circle-stroke.svg',
  'sample-ani-circle-rotate.svg',
  'sample-ani-cross-rotate.svg',
  'sample-ani-vortex-rotate.svg',
  'sample-ani-wave.svg',
  'sample-ani-motion.svg',
  'sample-ani-pattern.svg',
  'sample-ani-pattern2.svg',
  'sample-leaf.svg',
  'sample-img-floral.svg',
  'sample-ani-img-rotate.svg',
  'sample-color.svg',
  'sample-color-rgb.svg',
  'sample-color-rgb2.svg',
  'sample-ani-pikapika.svg',
  'sample-color-rect-google.svg',
  'sample-color-rect-sick.svg',
  'sample-test-mask.svg',
  'sample-test-mask2.svg',
];

$(function(){
  

  var back = $('<div>');
  back.on('click', function(){
    document.body.requestFullscreen();
  });
  $('#demo').append(back);

  var svgs = $('<div>',{id:'svgs'});
  $('#demo').append(svgs);

  svgFiles.forEach(function(v){
    var img = $('<img>', {src:v,title:v,lazyload:'lazyload'}).css({
    })
    img.on('click', function(){
      fetch(v)
      .then(function(response){
        return response.text();
      })
      .then(function(svg){
        textarea.val(svg).trigger('change');
        if(v==='sample0.png'){return;}
        back.addClass('back');
        input2.trigger('change')
        $('html,body').scrollTop(0);
      });
    });
    img.on('dblclick', function(){
      window.open(v);
    });
    svgs.append(img);
  });

  var input1 = $('<input>', {type:'color', 'rgba':''})
  .on('change', function(){
    $('body').css({
      backgroundColor: $(this).val(),
    });
  });
  $('#demo').append(input1);

  var input2 = $('<input>', {type:'color', 'rgba':''})
  .on('change', function(){
    var v = $(this).val();
    v = v.replace(/#/img, '%23');
    var style = $('body').attr('style');
    style = style.replace(/%23000000/img, v);
    $('body').attr({style:style});
  });
  $('#demo').append(input2);


  var textarea = $('<textarea>');
  textarea
  .on('change', function(){
    var val =$(this).val();
    var encodeVal = encodeURIComponent(val);
    var header = 'data:image/svg+xml;charset=utf8,';
    var base64 = header + encodeVal;
    //console.log(base64);
    $('body').css({
      backgroundImage: 'url("'+base64+'")',
    });
  });
  $('#demo').append(textarea);
  var h1 = $('<h1>').text(document.title);
  var h2 = $('<h2>').text('無料で使えるシンプルな模様素材/SVG形式なので数値を変更するだけで色情報や角度・拡大率を好きにカスタマイズできる。無限ループで表示可能。');
  var a = $('<a>',{href:'/demo/-svg/svg-to-canvas-to-png/',target:'_blank'}).text('svg-to-canvas-to-png : [画像形式:SVGからPNGに変換]');

  $('#demo').append(h1).append(h2).append(a);
  var img = $('<img>',{src:'tile-svg.png',alt:document.title}).css({width:'100%'});
  $('#demo').append(img);


});

CSS

body{
  background-position:center;
  background-repeat:repeat;
  background-attachment: fixed;
  background-size:100%;
}
.back{
  height: 100vh;
  cursor:none;
}

textarea{
  width: 99%;
  height: 240px;
  background: rgba(255,255,255,0.9);
  border:none;
  margin-bottom:200px;
}

#demo{
  padding-bottom:900px;
}
#svgs{
  font-size:0;
}
#svgs img{
  width:120px;
  height:120px;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-svg/svg-pattern/

ABOUT

hi0a.com 「ひまアプリ」は無料でつかえる便利ツールやブラウザ上で遊べるミニゲームを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。ご了承下さい。