Заливка текста фоном из пятен различных цветов

#javascript #css #svg

Хочу на SVG красиво сделать логотип сайта.

Логотип это слово текста, его необходимо залить фоном. Фон должен состоять из цветных
пятен разного цвета случайно расположенных на холсте, цвета задаются заранее заданной
палитрой цветов.

Необходимо два варианта:


Пятна имеют чёткую границу
Граница пятен уходит в прозрачный цвет через градиент

    

Ответы

Ответ 1

Вариант с чёткими границами



var svg = document.getElementById("svg1");

var width = svg.clientWidth;
var height = svg.clientHeight;
var sircleNumber = 100;
var minRadius = 20;
var maxRadius = 30;

var colors = ["red", "orange", "yellow", "blue", "green"];

var svgNS = "http://www.w3.org/2000/svg";

function generateBack(id) {
  var parent = document.getElementById(id);
  parent.innerHTML = "";

  for (var i = 1; i <= sircleNumber; i++) {
    generateTwo(i);
  }

  function generateTwo() {
    var circle = document.createElementNS(svgNS, "circle");

    var x = random(0, width);
    var y = random(0, height);
    var rad = random(minRadius, maxRadius);
    var color = randomColor();

    circle.setAttributeNS(null, "cx", x);
    circle.setAttributeNS(null, "cy", y);
    circle.setAttributeNS(null, "r", rad);
    circle.setAttributeNS(null, "fill", color);

    parent.appendChild(circle);
  }

}

function randomColor() {
  return colors[random(0, colors.length - 1)];
}

function random(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

generateBack("svgBack");
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
body {
  font-family: Open Sans;
}









Вариант с границами градиентно исчезающими



var pattern = `
                
                
                
            
            `;

var svg = document.getElementById("svg1");

var width = svg.clientWidth;
var height = svg.clientHeight;
var sircleNumber = 100;
var minRadius = 15;
var maxRadius = 50;

var colors = ["red", "orange", "yellow", "blue", "green"];

var svgNS = "http://www.w3.org/2000/svg";

function generateBack(id) {
  var parent = document.getElementById(id);
  parent.innerHTML = "";
  
  for (var i = 1; i <= sircleNumber; i++) {
    generateOne(i);
  }

  function generateOne(number) {

    var g = document.createElementNS(svgNS, "g");

    var x = random(0, width);
    var y = random(0, height);
    var rad = random(minRadius, maxRadius);
    var color = randomColor();

    var html = replace(pattern, "number", number);
    html = replace(html, "x", x);
    html = replace(html, "y", y);
    html = replace(html, "rad", rad);
    html = replace(html, "color1", color);

    g.innerHTML = html;

    parent.appendChild(g);
  }

}

function replace(str, patternText, value) {
  var pattern = new RegExp("\\[" + patternText + "\\]", "g");
  var rez = str.replace(pattern, value);
  return rez;
}

function randomColor() {
  return colors[random(0, colors.length - 1)];
}

function random(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

generateBack("svgBack");
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
body {
  font-family: Open Sans;
}







Ответ 2

Версия с анимацией с градиентными краями



var pattern = `
                
                
                
            
            
                
                    
                    
                
            `;

var svg = document.getElementById("svg1");

var width = svg.clientWidth;
var height = svg.clientHeight;
var sircleNumber = 200;
var minRadius = 15;
var maxRadius = 35;
var minSeconds = 17;
var maxSeconds = 40;
var zazor = 25;

var colors = ["red", "orange", "yellow", "blue", "green", "#ff00a1", "#ffcb00", "#ff8600"];

var svgNS = "http://www.w3.org/2000/svg";

function generateBack(id) {
  var parent = document.getElementById(id);
  parent.innerHTML = "";

  for (var i = 1; i <= sircleNumber; i++) {
    generateOne(i);
  }

  function generateOne(number) {

    var g = document.createElementNS(svgNS, "g");

    var rad = random(minRadius, maxRadius);
    var color = randomColor();
    var xx = new Array(3);
    var yy = new Array(3);
    for (var i = 0; i < 3; i++) {
      xx[i] = random(-zazor, width + zazor);
      yy[i] = random(-zazor, height + zazor);
    }
    var seconds = randomFloat(minSeconds, maxSeconds);


    var html = replace(pattern, "number", number);
    html = replace(html, "rad", rad);
    html = replace(html, "color1", color);
    for (var i = 0; i < 3; i++) {
      var ii = i + 1;
      html = replace(html, "x" + ii, xx[i]);
      html = replace(html, "y" + ii, yy[i]);
    }
    html = replace(html, "seconds", seconds);

    g.innerHTML = html;

    parent.appendChild(g);
  }

}

function replace(str, patternText, value) {
  var pattern = new RegExp("\\[" + patternText + "\\]", "g");
  var rez = str.replace(pattern, value);
  return rez;
}

function randomColor() {
  return colors[random(0, colors.length - 1)];
}

function random(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function randomFloat(min, max) {
  return Math.random() * (max - min) + min;
}

generateBack("svgBack");
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
body {
  font-family: Open Sans;
}







Версия с анимацией с чёткими краями



var pattern = `
                
                    
                    
                
            `;

var svg = document.getElementById("svg1");

var width = svg.clientWidth;
var height = svg.clientHeight;
var sircleNumber = 180;
var minRadius = 15;
var maxRadius = 25;
var minSeconds = 17;
var maxSeconds = 40;
var zazor = 25;

var colors = ["red", "orange", "yellow", "blue", "green", "#ff00a1", "#ffcb00", "#ff8600"];

var svgNS = "http://www.w3.org/2000/svg";

function generateBack(id) {
  var parent = document.getElementById(id);
  parent.innerHTML = "";

  for (var i = 1; i <= sircleNumber; i++) {
    generateOne(i);
  }

  function generateOne(number) {

    var g = document.createElementNS(svgNS, "g");

    var rad = random(minRadius, maxRadius);
    var color = randomColor();
    var xx = new Array(3);
    var yy = new Array(3);
    for (var i = 0; i < 3; i++) {
      xx[i] = random(-zazor, width + zazor);
      yy[i] = random(-zazor, height + zazor);
    }
    var seconds = randomFloat(minSeconds, maxSeconds);


    var html = replace(pattern, "number", number);
    html = replace(html, "rad", rad);
    html = replace(html, "color1", color);
    for (var i = 0; i < 3; i++) {
      var ii = i + 1;
      html = replace(html, "x" + ii, xx[i]);
      html = replace(html, "y" + ii, yy[i]);
    }
    html = replace(html, "seconds", seconds);

    g.innerHTML = html;

    parent.appendChild(g);
  }

}

function replace(str, patternText, value) {
  var pattern = new RegExp("\\[" + patternText + "\\]", "g");
  var rez = str.replace(pattern, value);
  return rez;
}

function randomColor() {
  return colors[random(0, colors.length - 1)];
}

function random(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function randomFloat(min, max) {
  return Math.random() * (max - min) + min;
}

generateBack("svgBack");
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
body {
  font-family: Open Sans;
}