icon.svg.base.js

const s = require('@reeywhaar/svgmaker')

module.exports = function icon(fill = '#4c4c4c') {
  const size = 128
  const piece = n => (size / 128) * n
  const prop = (x, n) => (x / 128) * n
  const borderWidth = piece(10)
  const smallWidth = size - borderWidth * 2
  const height = piece(110)
  const topHeight = piece(26)
  const innerheight = height - topHeight - borderWidth
  const radius = piece(22)
  const innerRadius = prop(radius, 60)
  const smallRadius = prop(radius, 20)
  const circleRadius = piece(6)
  const circleOffsetX = piece(76)
  const circleOffsetY = piece(22)
  const circleGap = piece(4)
  const colors = {
    white: '#fff',
    black: '#000',
  }

  function* range(max) {
    for (let i = 0; i < max; i++) yield i
  }

  const circle = x =>
    s.e('circle', {
      fill: colors.black,
      r: circleRadius,
      cy: circleOffsetY,
      cx: x,
    })

  const circles = () => Array.from(range(3)).map(x => circle(circleOffsetX + (circleGap + circleRadius * 2) * x))

  const mask = s.e(
    'mask',
    {
      id: 'icon',
    },
    [
      s.e('rect', {
        width: '100%',
        height: '100%',
        fill: colors.black,
      }),
      s.rrect(0, (piece(128) - height) / 2, size, height, radius, radius, radius, radius, {
        fill: colors.white,
      }),
      s.rrect(borderWidth, topHeight + (piece(128) - height) / 2, smallWidth, innerheight, smallRadius, smallRadius, innerRadius, innerRadius, {
        fill: colors.black,
      }),
      ...circles(),
    ]
  )

  const svg = s.svgFile(size, size, {}, [
    s.e('defs', {}, [mask]),
    s.e('rect', {
      width: '100%',
      height: '100%',
      fill: `context-fill ${fill}`,
      'fill-opacity': 'context-fill-opacity',
      mask: 'url(#icon)',
    }),
  ])

  return svg
}