SVG/HTML 5キャンバス - 円のパターンのずれ、stripe.comのアプローチ

stripe.comのWebサイト[pageの例を参照してください]を参照しながら、私の注意を引く1つのことは、HTML 5を使ったsvgパターン描画キャンバス。SVG/HTML 5キャンバス - 円のパターンのずれ、stripe.comのアプローチ

私は、円のパターン（オレンジ色）が一見避けられていて、私たちが通常見ているようにキャンバス内にタイル張りされていないように見えます。円はキャンバス内でランダムに配置されているように見えますが、限界には決して達しないように、このパターンの配置には自由度があります（斜めの外観などのCSS変換ではなく、パターン自体を構成する個々の円）。 texture.jsを試すことで

は、類似したパターンモデルを達成することができますが、素敵な効果にもかかわらず、それは一般的な「タイル張り」スタイルになります。

私は例Penを作成しました。そのような効果は、texture.jsと追加のCSS変換またはjs関数で達成できますか？

<div class="pattern"> 
    <div id="myCanvas" class="pattern-circles"></div> 
</div> 

<script type="text/javascript"> 
var w = '100%', 
    h = '100%'; 

// The svg element 
var svg = d3.select("#myCanvas") 
    .append("svg") 
    .attr("width", w) 
    .attr("height", h); 


// the texture 
var t = textures.circles() 
    //.thinner() 
    .radius(4) 
    .stroke("Orange") 
    .fill("transparent") 
    .strokeWidth(2); 


svg.call(t); 

// Creat the shape to add fill 
svg.append("rect") 
    .attr({ 
    "x": 0, 
    "y": 0, 
    "width": "1200", 
    "height": "1200", 
    "rx": 0, 
    "ry": 0 
    }) 
    .style({ 
    "fill": t.url(), 
    }); 
</script>

出典

2017-06-07 Adriano Monecchi

これがあなたの後であるかどうかはわかりませんが、このようなパターンを作成することはあまり難しくありません。

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <script> 
 
    
 
     var w = 500, 
 
      h = 500; 
 
     
 
     var svg = d3.select('body') 
 
     .append('svg') 
 
     .attr('width', w) 
 
     .attr('height', h); 
 
     
 
     var p = svg.append('defs') 
 
     .append('pattern') 
 
     .attr('id', 'chaos') 
 
     .attr('patternUnits', 'userSpaceOnUse') 
 
     .attr('width', w) 
 
     .attr('height', h); 
 
     
 
     var space = 20, 
 
      radius = 5, 
 
      col = 1, 
 
      row = 1; 
 
      
 
     for (var i = 0; i < 1000; i++){ 
 
     
 
     var cx = (col * space) + (Math.random() * radius + space), 
 
      cy = (row * space) + (Math.random() * radius + space); 
 
      
 
     col += 1; 
 
     
 
     if (cy > (h - space)) { 
 
      break; 
 
     } 
 
     
 
     if (cx > (w - space)) { 
 
      
 
      col = 1; 
 
      row += 1 
 
      
 
     } else { 
 
      
 
      p.append('circle') 
 
      .style('stroke', 'orange') 
 
      .style('fill', 'none') 
 
      .attr('r', radius) 
 
      .attr('cx', cx) 
 
      .attr('cy', cy); 
 
     } 
 
     } 
 
     
 
     svg.append('rect') 
 
     .attr('width', w) 
 
     .attr('height', h) 
 
     .style('fill', 'url(#chaos)') 
 
     .style('stroke', 'steelblue'); 
 

 
     
 
    </script> 
 
    </body> 
 

 
</html>

：ここで簡単にスイングだ、あなたは radiusと spaceは、パターンの「密度」を調整するために調整することができます

出典

2017-06-07 17:25:49 Mark

SVG/HTML 5キャンバス - 円のパターンのずれ、stripe.comのアプローチ

答えて

関連する問題