…image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewbox="0 0 90 90" stroke="%23ff4444" stroke-width="5" fill="%23ffff44"><path d="M 7 7 L 30 20,45 3,60 20,83 7,70 30,87 45,70 60,83 83,60 70,45 87,30 70,7 83…

…image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewbox="0 0 90 90" stroke="none" fill="%23ddddff"><circle cx="30" cy="45" r="30"/><circle cx="60" cy="45" r="30"/><circle cx="45" cy="30" r="30"/><circle cx=…

…マホアプリを作る時のXMLでレイアウトを作る際に、そっちでは「sweep」という名前で同様のグラデーションがありました！ スマホアプリ用のXMLと、Web用のHTML+CSS、結構同じような事ができるんですね^^ 今回、conic-gradientの存在を知ったのは、 developer.mozilla.org のサイトからでした。 ３種類のgradient（それぞれrepeating-もあるから６種類といってもいいかも）、組み合わせる事もできるので、さらに表現の幅がひろがり…

…xt+='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" viewbox="0 0 '+(Math.floor(xmax/2)+0.2)+' '+(Math.floor(ymax/2)+0.2)+'">';txt+='<defs>';txt+='<path id="svgs" d="M 0.9,0.2 L 0.3,0.4 0.8,0.…

…TML的…というよりXML形式ですが、ここでは気にしない事にしますｗ そうすると、こんな感じになります。 <波平> <サザエ> <タラオ></タラオ> </サザエ> <カツオ></カツオ> <ワカメ></ワカメ></波平> …波平に、サザエ・カツオ・ワカメという３人の子がおり、サザエにはタラオという子がいる、という関係性ですね。 スッキリ…しないでしょう？ｗ フネさんは？マスオさんは？ってｗ つまり、HTMLの親子関係（XMLもそう）の「親」は常に一人で、配偶者の存在を表現す…

…データのカタマリとしてxml形式で記述されており、その中に更新日時も書かれています。 <pubDate>Mon, 12 Jul 2021 23:33:31 +0900</pubDate> のように書かれている部分ですね。 あとはこのデータの形式を理解すれば、プログラムで取り扱って見やすく表示したりもできそうですし、JavaScriptでRSSリーダーを作る事も出来ちゃうかもですね（使った事もないくせにｗ） ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

… コード <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="-40 -500 1040 540" stroke="black"><path d="M 0,-500 L 0,40" stroke-width="3"></path><path d="M -40,0 L 1040,0" stroke-width="3"></path><path d="M -40 -100 L 1040,-100" strok…

…ード []<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 200 40"><defs><path id="pt1" d="M 4,35 Q 60,5 100,25 Q 140,40 195,15"></path></defs><use x="0" y="0" xlink:href="#pt1" stroke="lightgreen" stroke-width="3" fill="none" s…

…ード []<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 200 40"><defs><path id="pt1" d="M 4,35 Q 60,5 100,25 Q 140,40 195,15"></path></defs><use x="0" y="0" xlink:href="#pt1" stroke="pink" stroke-width="3" fill="none"></use><…

線の色 背景色 点の位置 線の太さ サイズ こんな模様になります^^ // (Math.floor(a/2)%2)*20; zhmj=a=>(a>3?ichi[a%2+2]+','+zhmj0(a):zhmj0(a)+','+ichi[a%2]); icr.addEventListener('input',gw,false); bcr.addEventListener('input',gw,false); btn.addEventListener('click',sfl,fa…

…image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" stroke="'+icr.value.replace(/#/,'%23')+'" stroke-width="0.2" fill="none">';for(i=0;i<4;i++){txt+='<path d="M '+zhmj(tg[i*2])+' L '+zhmj(tg…

…image/svg+xml;utf8,'); background-size:10px; } .ptn2{ padding:0.6em; background-image: url('data:image/svg+xml;utf8,'); background-size:20px; } --> そうすると、こんな感じのパターンになります！横一直線の線になっているのがちょっとつまらないですが、ナナメ線はうまく繋がって見えますね^^ 上記はCSS+SVGで表現しています。 コード…

…xt+='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" viewbox="0 0 '+(Math.floor(xmax/2)+0.2)+' '+(Math.floor(ymax/2)+0.2)+'">';txt+='<defs>';txt+='<path id="svgs" d="M 0.9,0.2 L 0.3,0.4 0.8,0.…

…<br/><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 '+xmax+' '+ymax+'">';for(j=0;j<ymax;j++){for(i=0;i<xmax;i++){if(mz(i,j)==1){txt+='<rect x="'+i+'" y="'+j+'" width="1" height="1" fill="black" stroke-width="0.1" stroke="…

…image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80" viewbox="0 0 80 80" stroke="none" stroke-width="0"><defs><linearGradient id="rggrd" x1="0%" y1="0%" x2="100%" y2="1…

…image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewbox="0 0 40 40" stroke="none" stroke-width="0" fill="%23eeeeee"><rect x="-20" y="0" width="38" height="19" ></rect><rect x="20" y="0" width="38" height="1…

…txt='<svg xmlns="http://www.w3.org/2000/svg" width="300px" viewbox="0 0 100 100" stroke="black" style="border: 1px solid black;">';for(i=0;i<objs.length;i++){txt+=objs[i].svgtxt;}txt+='</svg>';gamen.innerHTML=txt;gamenc.innerHTML=txt.replac…

…image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewbox="0 0 100 100" stroke="green" stroke-width="5"><path d="M 5,65 Q 5,75 10,70 Q 65,15 60,10 Q 35,5 20,80 Q 15,93 12,85 Q 10,70 70,90 Q 85,95 90,80" fil…

sound GAME STARTGAME STOP // 0){oc0p(0,999,0.7);}} } function gstop(){ if(gmst){gmst=false;for(i=0;i3){ms[i]=2};break; case 2:mw[i]++;if(mw[i]>3){ms[i]=3}break; case 3:m[i]--;if(m[i]0){oc0p(440,550,0.5);}};break; } document.getElementById('…

… コード <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 100 100" stroke="black" style="border: 1px solid black; background-color: green;"><path d="M 26,41 l 0,9 6,0 0,3 -6,0 0,3 9,0 0,-9 -6,0 0,-3 6,0 0,-3 -9,0" stroke="red" …

どうも！LSSです！！ に続き、もぐらたたきを作っています。 まだ、もぐらのSVG絵をいろいろ描かなきゃなんですが、今回はシステム的な面で手を加えてみました、の中間報告です^^ もぐらたたき 説明 ゲージ レベル もぐら 倍速もぐら 超速もぐら 未実装の要素 スコア タイトル画面 もぐらをたたいた時の演出 金もぐら メカもぐら 難易度設定 もぐら画像のバリエーション あとがき もぐらたたき // 3){ms[i]=2};break; case 2:mw[i]++;if(mw[…

どうも！LSSです！！ 昨日に続き、もぐらたたきに手を加えてみました！ 動きます！ とりあえず動く様子だけ見られるようにしようと ランダムにぴょこぴょこ出てきますね^^ 動きます！ // 3){ms[i]=2;};break; case 2:mw[i]++;if(mw[i]>3){ms[i]=3;}break; case 3:m[i]--;if(m[i] とりあえず動く様子だけ見られるようにしようと 青空も入れてみました。 で、JavaScriptで「とりあえず動く様子」を見…

… コード <svg xmlns="http://www.w3.org/2000/svg" width="70%" viewbox="0 0 500 500" style="border: 1px solid black;"><!--穴上段--><ellipse cx="175" cy="300" rx="50" ry="20" fill="black"></ellipse><ellipse cx="325" cy="300" rx="50" ry="20" fill="bla…

… コード <svg xmlns="http://www.w3.org/2000/svg" width="70%" viewbox="0 0 20 20" stroke="black" style="border: 1px solid black;"><path d="M 10,20 L 0,10 5,5 10,10 15,5 20,10 10,20" fill="pink" stroke-width="0.1"></path> </svg> ベジェ曲線で丸みを与えてみよう！ …

…d="gamen" xmlns="http://www.w3.org/2000/svg" width="70%" viewbox="0 0 100 100" stroke="black" stroke-width="1" style="border: 1px solid black;"><path d="M 100,0 L 0,100"></path></svg><script>pt=document.createElementNS('http://www.w3.org/20…

…しても使えて、HTMLの中にも埋め込める。 一番の利点はコードであるが故に、JavaScriptから変更をかけられる（お絵かきソフトがJavaScriptで作れてしまうほどに）ところですが、その利点を最大活用したなにかを、ここでそのうちお披露目したいですね^^ SVGコーディングの基本―XMLベースの標準グラフィックスSVGの基本を解説 作者:日向 俊二 発売日: 2018/05/01 メディア: 単行本 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewbox="0 0 6 6" stroke="rgb(230,255,230)" stroke-width="1.1"><path d="M -1,1 L 3,1 3,5 1,5 1,3 5,3 5,7" fill="none"></path><path d="M 5,-1 L 5,1 7,1" fill="no…

… コード <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 20 12"> <rect x="3" y="1.5" width="15" height="7" fill="white" stroke="gray" stroke-width="0.1"></rect><!--この四角はあとで消す--> <path d="M 0.1,8 q 1.5,0.1 2.4,-1.5 q -2,-1.5 0,…

…VGタグを書きます xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" stroke="black" 座標の話 絵描き歌 まーるかいて ちょん まーるかいて ちょん おまめに根が出て うえきばち～うえきばち 以下省略 まず、SVGタグを書きます コード <svg xmlns="http://www.w3.org/2000/svg" width="70%" viewbox="0 0 20 20" stroke="blac…

…image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" stroke="rgb(0,0,0)"><path d="M 1,10 l 10,-7 2,0 -5,5 10,0 2,2 -2,2 -6,0 0,6 -2,2 -6,0 -6,-3" fill="none"></path></svg>');background-size:2…