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-dot-rect3x2.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-cross4-dia.svg',
'sample-line-path-cross8.svg',
'sample-line-path-cross8-hisigata.svg',
'sample-line-path-chain-ko.svg',
'sample-line-path-arrow.svg',
'sample-line-path-x.svg',
'sample-line-path-plus.svg',
'sample-line-path-kazaguruma.svg',
'sample-line-path-kazaguruma2.svg',
'sample-line-path-gusya.svg',
'sample-line-path3.svg',
'sample-line-path3-siba.svg',
'sample-line-target.svg',
'sample-line-path-stripes.svg',
'sample-line8-path-dot.svg',
'sample-line8-path-sewing.svg',
'sample-line-width.svg',
'sample-line-circle.svg',
'sample-line-circle-cross.svg',
'sample-rect.svg',
'sample-rect-stroke.svg',
'sample-rect-stroke-naname.svg',
'sample-rect2.svg',
'sample-rect4-3.svg',
'sample-rect4-3-stroke.svg',
'sample-rect4-3-naname.svg',
'sample-rect8.svg',
'sample-rect8-stroke.svg',
'sample-rect8-belt.svg',
'sample-rect8-6-stroke.svg',
'sample-rect8-in-rect.svg',
'sample-rect8-cross.svg',
'sample-rect8-chain.svg',
'sample-rect8-diamond.svg',
'sample-rect8-ta.svg',
'sample-rect-rope.svg',
'sample-rect2-zure.svg',
'sample-rect2-stroke-kasane.svg',
'sample-checkered2.svg',
'sample-checkered4.svg',
'sample-checkered8.svg',
'sample-circle.svg',
'sample-circle-stroke.svg',
'sample-circle-stroke-width.svg',
'sample-circle-stroke-in.svg',
'sample-circle-stroke-cross.svg',
'sample-circle-naname.svg',
'sample-circle-naname-stroke.svg',
'sample-circle-min.svg',
'sample-circle-min-stroke.svg',
'sample-circle-mask-shichihou.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-half.svg',
'sample-circle-path.svg',
'sample-circle-arc-uroko.svg',
'sample-circle-seiganha.svg',
'sample-circle-seiganha-mask.svg',
'sample-circle-clip.svg',
'sample-circle-foot-cat.svg',
'sample-peke-hex.svg',
'sample-line-sankuzushi.svg',
'sample-line-sankuzushi-scale4.svg',
'sample-tri.svg',
'sample-tri-min.svg',
'sample-tri-kazaguruma.svg',
'sample-tri2.svg',
'sample-tri2-scale05.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-twist.svg',
'sample-path-wave.svg',
'sample-path-wave-high.svg',
'sample-path-wave-high2.svg',
'sample-path-wave-dense.svg',
'sample-path-wave-lambda',
'sample-path-wave4-chain.svg',
'sample-path-gizagiza.svg',
'sample-path-rect-chain.svg',
'sample-path-hishigata.svg',
'sample-path-diamond.svg',
'sample-path-dia-cross.svg',
'sample-path-moon2.svg',
'sample-path-arrow.svg',
'sample-path-arrow2.svg',
'sample-path-arrow3.svg',
'sample-path-arrow-sakushi.svg',
'sample-path-arrow-sayu.svg',
'sample-path-cross8.svg',
'sample-path-branch.svg',
'sample-path-stroke-dasharray.svg',
'sample-path-stroke-dasharray8.svg',
'sample-path-stroke-dasharray-grid.svg',
'sample-path4-line.svg',
'sample-path4-tri.svg',
'sample-path4-line-zig.svg',
'sample-path-jigsaw.svg',
'sample-path4-saw-miss.svg',
'sample-path4-saw2-miss.svg',
'sample-path4-cross.svg',
'sample-path4-bundou.svg',
'sample-path4-wave4.svg',
'sample-path4-arc-flower3.svg',
'sample-path4-polygon5.svg',
'sample-path4-polygon5-star.svg',
'sample-path4-flower.svg',
'sample-path4-flower3.svg',
'sample-path4-flower4.svg',
'sample-path4-flower4-wave.svg',
'sample-path4-flower6.svg',
'sample-path4-flower6-bold.svg',
'sample-path4-flower-sakura.svg',
'sample-path4-flower-sakura-star.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-raimon.svg',
'sample-path-rect-uzu.svg',
'sample-path-curl.svg',
'sample-path-curl-twin.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-path-eye.svg',
'sample-path-chip.svg',
'sample-path-yinyang.svg',
'sample-path-y.svg',
'sample-path-wave-weight.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-line8-path-mask-parallel.svg',
'sample-line8-path-mask-parallel2.svg',
'sample-line8-path-linework.svg',
'sample-line8-path-linework2.svg',
'sample-polygon-star.svg',
'sample-polygon-heart.svg',
'sample-polygon-syuriken.svg',
'sample-path-face-smile.svg',
'sample-text.svg',
'sample-grad.svg',
'sample-ani-dot.svg',
'sample-ani-dot4.svg',
'sample-ani-dot4-line.svg',
'sample-ani-dot4-line2.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-check-width.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-wave2.svg',
'sample-ani-wave3.svg',
'sample-ani-clock.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',
'sample-xolor-line-naname.svg',
];
$(function(){
var back = $('<div>');
back.on('click', function(){
document.body.requestFullscreen();
});
back.on('dblclick', function(){
window.open(v);
});
$('#demo').append(back);
var svgs = $('<div>',{id:'svgs'});
$('#demo').append(svgs);
svgFiles.forEach(function(v){
var img = $('<img>', {src:v,title:v,loading:'lazy'}).css({
})
img.on('dblclick', 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);
});
});
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廃止等で動かないページもあります。