generators

Generators

Page & elements generators

Live

🪪 Badges

Enter your meeting/conference attenders and generate a badge for each one.

🔵 Circle Slices

Enter your #groups and items and generate a nice circle slice for each group. (Examples: groups, school teams + members, title + sub categories, etc.)

Include Circle Slices to your page

<div id="groups"></div>

<script src="https://nmatei.github.io/generators/docs/circle-slices.js"></script>

<script>
const options = CircleSlices.render({
  renderTo: "#groups",
  groupSize: 420,
  slicesSize: 350,
  centerSize: 100,
  default: 'logic',
  text: `
# 🔵 HTML
elements
structure
semantics

# 🎨 CSS
styles
layout
responsiveness

# ⚡ JS
logic
interaction
behavior
`,
  centerText: `# 🚀 Web`
});
 
console.info("options", options);

document.querySelector("#groups").addEventListener("rotate", event => {
    const { angle, slice } = event.detail;
    console.info("rotate %o deg [ %o ]", angle, slice.innerText, slice);
});

</script>