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

230

19 марта 2018, 23:42

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

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

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

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

Answer 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; 
}

<svg id="svg1" style="width:510px; height:100px; background-color: pink;" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <clipPath id="myClip"> 
        <text x="10" y="70" font-size="70"> 
            СОТВОРЕНИЕ 
        </text> 
    </clipPath> 
 
    <g clip-path="url(#myClip)"  > 
       <rect x="0" y="0" width="100%" height="100%" fill="green" /> 
       <g id="svgBack"> 
        
       </g> 
    </g> 
</svg> 
 
<br> 
<button onclick="generateBack('svgBack');">залить ещё раз</button>

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

var pattern = `<radialGradient id="grad[number]"> 
                <stop offset="0%" stop-color="[color1]"></stop> 
                <stop offset="40%" stop-color="[color1]"></stop> 
                <stop offset="100%" stop-color="[color1]" stop-opacity="0"></stop> 
            </radialGradient> 
            <circle cx="[x]" cy="[y]" r="[rad]" fill="url(#grad[number])"></circle>`; 
 
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; 
}

<svg id="svg1" style="width:510px; height:100px; background-color: pink;" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <clipPath id="myClip"> 
        <text x="10" y="70" font-size="70"> 
            СОТВОРЕНИЕ 
        </text> 
    </clipPath> 
 
    <g clip-path="url(#myClip)"  > 
       <rect x="0" y="0" width="100%" height="100%" fill="green" /> 
       <g id="svgBack"> 
        
       </g> 
    </g> 
</svg> 
 
<br> 
<button onclick="generateBack('svgBack');">залить ещё раз</button>

Answer 2

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

var pattern = `<radialGradient id="grad[number]"> 
                <stop offset="0%" stop-color="[color1]"></stop> 
                <stop offset="40%" stop-color="[color1]"></stop> 
                <stop offset="100%" stop-color="[color1]" stop-opacity="0"></stop> 
            </radialGradient> 
            <circle cx="0" cy="0" r="[rad]" fill="url(#grad[number])"> 
                <animateMotion dur="[seconds]s" repeatCount="indefinite"> 
                    <path id="path[number]" d="M[x1],[y1] [x2],[y2] L[x3],[y3] Z" ></path> 
                    <mpath xlink:href="#path[number]"/> 
                </animateMotion> 
            </circle>`; 
 
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; 
}

<svg id="svg1" style="width:450px; height:70px;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <g clip-path="url(#myClip)" x="0" y="0" width="100%" height="100%"> 
        <rect x="0" y="0" width="100%" height="100%" fill="green"/> 
        <g id="svgBack"> 
 
        </g> 
    </g> 
 
    <clipPath id="myClip"> 
        <text x="0" y="45" font-size="55" fill="url(#pattern1)"> 
            СОТВОРЕНИЕ 
        </text> 
    </clipPath> 
</svg> 
 
<div><button onclick="generateBack('svgBack');">Залить цвет</button></div>

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

var pattern = `<circle cx="0" cy="0" r="[rad]" fill="[color1]"> 
                <animateMotion dur="[seconds]s" repeatCount="indefinite"> 
                    <path id="path[number]" d="M[x1],[y1] [x2],[y2] L[x3],[y3] Z" ></path> 
                    <mpath xlink:href="#path[number]"/> 
                </animateMotion> 
            </circle>`; 
 
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; 
}

<svg id="svg1" style="width:450px; height:70px;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <g clip-path="url(#myClip)" x="0" y="0" width="100%" height="100%"> 
        <rect x="0" y="0" width="100%" height="100%" fill="green"/> 
        <g id="svgBack"> 
 
        </g> 
    </g> 
 
    <clipPath id="myClip"> 
        <text x="0" y="45" font-size="55" fill="url(#pattern1)"> 
            СОТВОРЕНИЕ 
        </text> 
    </clipPath> 
</svg> 
 
<div><button onclick="generateBack('svgBack');">Залить цвет</button></div>