SVG / HTML 5 canvas - смещение по кругу, подход stripe.com

Question

SVG / HTML 5 canvas - смещение по кругу, подход stripe.com

1

Во время просмотра веб-сайта stripe.com [см. Эту страницу, например, изображение ниже], одна вещь, которая привлекла мое внимание, - это их подход к рисованию шаблонов svg с использованием холста HTML 5.

Я заметил, что шаблон кругов (оранжевый цвет) немного смещен и, кажется, не выглядит черепицей в его полотне, как мы обычно видим. Там определенная свобода в этом расположении шаблона (а не css-преобразование, такое как искаженное внешнее видение, а отдельные круги, которые составляют сам шаблон), таким образом круги, кажется, расположены случайным образом внутри холста, но никогда не достигают своих границ.

Попробовав texture.js, подобная модель шаблонов может быть выполнена, но, несмотря на хороший эффект, это приводит к общему стильному стилю.

Я сделал пример Пен. Может ли такой эффект быть достигнут с помощью 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>

Adriano Monecchi 07 июнь 2017, в 07:17

Источник

Теги:

javascript

d3.js

svg

html5-canvas

1 ответ

Ещё вопросы

Mark · Answer 1 · 2017-06-07T15-15-00.000Z

Не уверен, что это то, что вам нужно, но создание такого шаблона не слишком сложно. Здесь быстро качайте его, вы можете настроить radius и space чтобы настроить "плотность" рисунка:

<!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>