$(function(){

  var tag = '<path d="M 0,0 l 2,2" id="d" />';
  var use = '<use xlink:href="#d" transform=" translate({r},{r}) rotate({rad})" transform-origin="0 0" />';
  var html = '';

  changeSvg = function(){
  
    html = '';

    var matchRad = [...use.matchAll('{rad}')];
    var matchR = [...use.matchAll('{r}')];
    for(i=0;i<99;i++){
      var tag1= use;
      matchR.some(function(v, i){
        r = Math.floor(Math.random()*10)+1;
        //if(i > 1 && Math.random()>0.5){r=-r}
        tag1 = tag1.replace(v,r);
      });
      matchRad.some(function(v, i){
        r = Math.floor(Math.random()*360);
        tag1 = tag1.replace(v,r);
      });
      html += tag1 + '\n';
    }
    html = tag +'\n'+ html;
    html ='<g id="g" fill="none" stroke="#000000">\n' + html + '\n</g>';
    html ='<svg viewbox="0 0 10 10">\n' + html + '\n</svg>';
    console.log(html);
    $textarea.val(html);
  }

  $input = $('<input>').val(tag).css({display:'block',width:400,height:40});
  $('#demo').append($input);
  $textarea = $('<textarea>').val(html).css({display:'block',width:400,height:400});
  $('#demo').append($textarea);
  $svgArea = $('<div>').css({width:400,height:400});
  $('#demo').append($svgArea);

  $textarea.on('keyup',function(){
    $svgArea.html($(this).val());
  });

  $input.on('change',function(){
    tag = $(this).val();
    changeSvg();
    $textarea.trigger('keyup');
  });

  changeSvg();
  $textarea.trigger('keyup');

});

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-svg/svg-random/