生成复杂而漂亮的SVG多边形图案和动画

Generate beautiful SVG polygons 可在线生成SVG图案，并导出为文件。

SVG

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 4381
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
  transition: all .4s 0.2s;
}

*:hover {
  transition: all .4s 0;
}

body {
	width: 100%;
  margin: 0;
  padding: 0;
  background: #111;
}

svg {
  background: #000;
}

.dashboard {
  padding: 0 5px;
  text-transform: uppercase;
  font-weight: 200;
  letter-spacing: 2px;
	width: 100%;
}
.dashboard__regererate {
  padding: 4px;
  border-radius: 2px;
  border: 0 solid orange;
background: goldenrod;
	color: #333;
}
.dashboard__regererate:hover {
  cursor: pointer;
  opacity: 1;
}
label {
	color: goldenrod;
	font-family: monospace;
	font-size: 1em;
	line-height: 1.25em;
	margin-left: 1em;
	border-left: dotted 1px #999;
	padding-left: 5px;
}
[type="range"] {
	
}
[type="checkbox"] {
	margin: 0 0 0 5px;
	font-size: 3em;
	height: 14px;
}

input[type=range] {
  -webkit-appearance: none;
}

input[type=range]::-webkit-slider-thumb {
	  -webkit-appearance: none;
 background: orange;
  height: 1.25em;
  width: 10px;
  border-radius: 0;
}

input[type=range]:focus {
  outline: none; 
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1.25em;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #000000;
  background: #555;
  border-radius: 0;
}

/* NO-BEAUTIFY */

HTML

<label for="edgeWidth">Edge width</label>
    <input type="range" id="edgeWidth" min="0" max="4" step="1" value="1" />
    <label for="ctrlSpeed" title="Speed">Animate</label>
    <input type="checkbox" id="doAnimate" title="Animate?" />
    <input type="range" id="ctrlSpeed" min="1" max="6" step=".2" value="2" title="Speed" />
    <input type="checkbox" id="colorfull" />
    <button id="getSVG">Get SVG</button>
</div>
<svg width="3000" height="3000">
    <rect id="bg" x="0" y="0" width="1478.86" height="522.414" style="fill:rgb(0,0,0);" />
    <g id="main">

</svg>
<script>
var svg = document.querySelector('svg'),
  regenerate = document.querySelector('#regenerate'),
  pointGroup = document.querySelector('#points'),
  polygons = document.querySelector('#polygons'),
  dashboard = document.querySelector('.dashboard'),
  noOfPoints = document.querySelector('#noOfPoints'),
  polygonEdges = document.querySelector('#polygonEdges'),
  showCircle = document.querySelector('#showCircle'),
  edgeWidth = document.querySelector('#edgeWidth'),
  btnGetSVG = document.querySelector('#getSVG'),
  ctrlSpeed = document.querySelector('#ctrlSpeed'),
  doAnimate = document.querySelector('#doAnimate'),
  colorfull = document.querySelector('#colorfull'),
  bg = document.querySelector('#bg'),
  svgNS = svg.namespaceURI,
  points = [],
  themes = [],
  theme = [],
  padding = 20,
  width, height, rr, gg, bb;

function setColor() {
  // rr = parseInt(Math.random() * 200 + 55);
  // gg = parseInt(Math.random() * 200 + 55);
  // bb = parseInt(Math.random() * 200 + 55);
  var c = theme.swatches[parseInt(Math.random() * theme.swatches.length)];
  rr = c.r;
  gg = c.g;
  bb = c.b;
}

temp = temp.filter(function(e, i) {
    if (i < polygonEdges.value) {
      e.angle = getAngleFromPoint(e, activePoint);
      return e;
    }
  });

temp.sort(function(a, b) {
    return (a.angle > b.angle) ? 1 : -1;
  });

//temp.splice(0,1);

var d = " ";
  for (var i = 0; i < temp.length; i++) {
    d += (i === 0) ? "M " : ((i === 1) ? "L " : " ");
    d += temp[i].X + " " + temp[i].Y + " ";
  }
  d += " L " + temp[0].X + " " + temp[0].Y + " ";
  var currentPath = d + " Z";
  if (!!colorfull.checked) {
    setColor();
  }
  var polygon = document.createElementNS(svgNS, "path");
  polygon.setAttribute("d", currentPath);
  polygon.setAttribute("stroke", "rgba(" + rr + "," + gg + "," + bb + ",.2)");
  polygon.setAttribute("stroke-width", edgeWidth.value + "px");
  polygon.setAttribute("fill", "rgba(" + rr + "," + gg + "," + bb + ",.2)");
  polygons.appendChild(polygon);
}

function setSVG() {
  var dashboardDimentions = getElementHeight(dashboard);
  width = Math.abs(dashboardDimentions.width); // window.innerWidth;
  width = Math.abs((width > window.screen.availWidth) ? window.screen.availWidth : width);
  height = Math.abs(window.innerHeight - dashboardDimentions.height);
  height = Math.abs((height > window.screen.availHeight) ? window.screen.availHeight : height);
  svg.setAttribute("width", width);
  svg.setAttribute("height", height);
  bg.setAttribute("width", width);
  bg.setAttribute("height", height);
  svg.setAttribute("viewbox", "0 0 " + width + " " + height);
}

function toFloat(styleValue) {
  return parseFloat(styleValue.replace(/\D/g, ""));
}

function getElementHeight(ele) {
  var cs = window.getComputedStyle(ele);
  var height = toFloat(cs.height);
  height += toFloat(cs.paddingTop);
  height += toFloat(cs.paddingBottom);
  var width = toFloat(cs.width);
  width += toFloat(cs.paddingRight);
  width += toFloat(cs.paddingLeft);
  return {
    height: height,
    width: width
  };
}

function generateNew() {
  delete points;
  points = [];
  for (var i = 0; i < noOfPoints.value; i++) {
    points.push(new Point(parseInt(Math.random() * (width - padding) + padding / 2), parseInt(Math.random() * (height - padding) + padding / 2), i))
  };
  drawCircles();
  pointGroup.innerHTML = '';
  polygons.innerHTML = "";
  drawAll();
  animate();
}

function drawAll() {
  polygons.innerHTML = '';
  for (var i = 0; i < points.length; i++) {
    drawPolygons(i);
  };
}

// Credits goes to https://snipplr.com/view/47207/
function getDistance(point1, point2) {
  var xs = 0;
  var ys = 0;

xs = point2.X - point1.X;
  xs = xs * xs;

ys = point2.Y - point1.Y;
  ys = ys * ys;

return Math.sqrt(xs + ys);
}

// Credits goes to Stackoverflow: https://stackoverflow.com/a/14413632
function getAngleFromPoint(point, centerPoint) {
  var dy = (point.Y - centerPoint.Y),
    dx = (point.X - centerPoint.X);
  var theta = Math.atan2(dy, dx);
  var angle = (((theta * 180) / Math.PI)) % 360;
  angle = (angle < 0) ? 360 + angle : angle;
  return angle;
}

function getSVG() {
  var w = window.open();
  w.document.write("<h1>Copy SVG into say Affinity Designer</h1><textarea style='width: 100%; height: " + window.outerHeight + "px'>" + svg.outerHTML + "</textarea>");
}

setSVG();
window.onresize = setSVG;
regenerate.onclick = noOfPoints.oninput = polygonEdges.oninput = edgeWidth.oninput = generateNew;
showCircle.onchange = drawCircles;
colorfull.onchange = function() {
  getKulerTheme();
  drawAll();
};
setSVG();
btnGetSVG.onclick = getSVG;

/**Adding Kuler colors */
function Kuler(kulerObj) {
  var me = this;
  me.title = kulerObj.querySelector("themeTitle").textContent;
  me.id = kulerObj.querySelector("themeID").textContent;
  me.link = kulerObj.querySelector("guid").textContent;
  me.editLink = "https: //color.adobe.com/en/%name%-color-theme-%id%/edit/?copy=true"
    .replace(/%name%/ig, me.title.split(" ").join("-"))
    .replace(/%id%/ig, me.id)
    .replace(/ /ig, "");
  me.swatches = [];
  forEach(kulerObj.querySelectorAll("swatch"), function(e, i) {
    var alpha = parseInt(Math.random() * 100) / 100;
    alpha = 1;
    var r = parseInt(parseFloat(e.querySelector('swatchRGB1').textContent) * 255);
    var g = parseInt(parseFloat(e.querySelector('swatchRGB2').textContent) * 255);
    var b = parseInt(parseFloat(e.querySelector('swatchRGB3').textContent) * 255);
    var col = 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')';
    me.swatches.push({
      rgb: col,
      r: r,
      g: g,
      b: b
    });
  });
  return this;
}

function forEach(domNodes, cb) {
  return Array.prototype.forEach.call(domNodes, function(item, i) {
    cb(item, i);
  });
}

function getThemes(noOfSets, cb) {
  noOfSets = (typeof noOfSets !== "undefined") ? noOfSets : parseInt(sets.textContent);
  var me = this;
  me.cb = cb;

function reqListener(resp) {
    var dom = document.createElement('div');
    dom.innerHTML = oReq.responseText.replace(/kuler:/gi, '');
    forEach(dom.querySelectorAll("item"), function(ele) {
      themes.push(new Kuler(ele));
    });
    cb();
  }
  var oReq = new XMLHttpRequest();
  oReq.addEventListener('load', reqListener);
  oReq.open('GET', 'https://kuler-api.adobe.com/rss/get.cfm?listType=popular&itemsPerPage=' + noOfSets + '&key=mykey');
  oReq.send();
}

function getKulerTheme() {
  theme = themes[parseInt(Math.random() * themes.length)];
  colorfull.setAttribute("title", "Using " + theme.title)
}

getThemes(30, function() {
  getKulerTheme();
  setColor();
  generateNew();
})
</script>

Generate beautiful SVG polygons 可在线生成SVG图案，并导出为文件。

SVG

编辑器支持Emmet

快捷键

Generate beautiful SVG polygons 可在线生成SVG图案，并导出为文件。

SVG

SVG+CSS3漂亮的花束成形动画

SVG/CSS3 很棒的低多边形404字符构造动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：