Rounded Polygon Creator with SVG

samuel SVG Tutorial 210 , ,

Create any size of regular rounded polygon with the help of javascript and svg.

Demo: Javascript

(function(){
var NS = {
xmlns: 'http://www.w3.org/2000/svg'
},
SVG_VERSION = '1.1';
 
function createSvgElement(tagName, attrs) {
var svg = document.createElementNS(NS.xmlns, tagName);
if (attrs) {
setAttrs(svg, attrs);
}
return svg;
}
 
function setAttrs(elem, attrs) {
for (var key in attrs) {
if (attrs.hasOwnProperty(key)) {
elem.setAttribute(key, attrs[key]);
}
}
}
 
var svg = createSvgElement('svg');
 
var path = createSvgElement('path', {
stroke: 'none',
fill: '#20be86'
});
 
svg.appendChild(path);
 
document.querySelector('#container').appendChild(svg);
 
var description = document.querySelector('#description'),
textareaSvg = document.querySelector('#textareaSvg');
 
window.formChanged = function(){
var elements = document.forms.options.elements,
n = +elements.N.value,
l = +elements.L.value,
r = +elements.R.value,
padding = +elements.padding.value;
elements._N.value = n;
elements._L.value = l;
elements._R.value = r;
elements._padding.value = padding;
var polygon = roundedPolygon(n, l, r, padding),
width = polygon.width,
height = polygon.height;
// console.log(width, height);
setAttrs(svg, {
xmlns: NS.xmlns,
width: width,
height: height
});
setAttrs(path, {
d: polygon.path
});
description.innerHTML = width + 'x' + height;
 
textareaSvg.value = svg.outerHTML;
};
 
window._formChanged = function(){
var elements = document.forms.options.elements;
elements.N.value = elements._N.value;
elements.L.value = elements._L.value;
elements.R.value = elements._R.value;
elements.padding.value = elements._padding.value;
window.formChanged();
};
 
window.formChanged();
})();
Related Post

Recharts is a redefined chart library built with React and D3. Recharts makes it easy to integrate charts into your Read more

three.js       JavaScript 3D library The aim of the project is to create an easy to use, lightweight, 3D library Read more

Today we’re going to create an animated SVG drum kit that can be played by clicking, tapping or using your Read more

This tutorial will show you how the clever use of HTML, CSS sequenced animations, and SVG filters can bring to life one Read more

Some little ideas for bouncy and playful tooltip shapes and animations with SVG and anime.js. Among other styles, shape morphing Read more

Fitter Happier Text is a javascript library for performant and fully fluid heading inspired by FitText. Fitter Happier Text replaces Read more

A tutorial about creating cool temperature slider using svg, css and javascript.

RRSSB is a solution for responsive social share buttons that you can easily customize it by tweaking a few variables. SVGs Read more

Go