小编enx*_*eta的帖子

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="210mm"
   height="297mm"
   viewBox="0 0 210 297"
   version="1.1"
   id="svg5"
   inkscape:version="1.1 (1:1.1+202105261517+ce6663b3b7)"
   sodipodi:docname="test.svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <sodipodi:namedview
     id="namedview7"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:document-units="mm"
     showgrid="false"
     inkscape:zoom="0.92648709"
     inkscape:cx="382.08843"
     inkscape:cy="460.88068"
     inkscape:window-width="1920"
     inkscape:window-height="1143"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer1" />
  <defs
     id="defs2">
    <marker
       style="overflow:visible;"
       id="Arrow2Lend"
       refX="0.0"
       refY="0.0"
       orient="auto"
       inkscape:stockid="Arrow2Lend"
       inkscape:isstock="true">
      <path
         transform="scale(1.1) rotate(180) translate(1,0)"
         d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
         style="fill-rule:evenodd;fill:context-stroke;stroke-width:0.62500000;stroke-linejoin:round;"
         id="path899" />
    </marker> …

svg{
width:300px; 
border:1px solid;
fill:none;
stroke:black;
}

<svg viewBox="-100 -100 200 200">

<path d="M-36.911,0C-36.911,-19.833,-19.833,-35.911,0,-35.911C19.833,-35.911,35.911,-19.833,35.911,0C35.911,19.833,19.833,35.911,0,35.911C-19.833,35.911,-36.911,19.833,-36.911,0z">

     <animateTransform
      attributeType="xml" 
      attributeName="transform"
      type="translate"
      dur="5s"
      values="0,0; 0,-50; 0,0; 0,50;0,0"
      repeatCount="indefinite"/>
   <animateTransform 
     attributeType="xml" 
     attributeName="transform" 
     type="scale"
     dur='5s'
     values="1;1.2;1;1.2;1"
     repeatCount="indefinite"/>
            
  </path>
  
  <circle r="1" />
</svg>

    var canvasElement = document.querySelector("#canvas");\r\n    var ctx = canvasElement.getContext("2d");\r\n\r\n    // Sides: a = 30 \xe2\x80\x83 b = 30 \xe2\x80\x83 c = 59\r\n\r\n    var triangle = {\r\n        x1: 30, \r\n        y1: 0, \r\n        x2: 0, \r\n        y2: 59, \r\n        x3: 30, \r\n        y3: 59 \r\n    }\r\n\r\n    ctx.strokeStyle = \'red\';\r\n    \r\n    ctx.beginPath();\r\n    ctx.moveTo(triangle.x1, triangle.y1);\r\n    ctx.lineTo(triangle.x2, triangle.y2);\r\n    ctx.lineTo(triangle.x3, triangle.y3);\r\n    ctx.lineTo(triangle.x1, triangle.y1);\r\n    ctx.closePath();\r\n    ctx.stroke();

<canvas id="canvas" width="300" height="300"></canvas>\r\n    

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap");

*,
*::before,
*::after {
	box-sizing: border-box;
	position: relative;
}

html,
body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "Open Sans", sans-serif;
}

:root {
	--easing: cubic-bezier(0.87, 0.08, 0.23, 0.91);
	--duration: 0.3s;
	--pink: #770946;
}

#app {
	height: 100vh;
	width: 100%;
	background: #1e0238;
	position: relative;
	overflow: hidden;
}

.circle-pink {
	transform: scale(1);
	fill: none;
	stroke: var(--pink);
	stroke-width: 6;
}

.circle-fill {
	transform: scale(1); …

    .image-container {
        width: 100px;
        height: 100px;
        background-size: 100%;
        background-color: #E1A95F;
        -webkit-mask-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg");
        -webkit-mask-size: cover;
        filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75));
    }

   <div class="image-container"></div>
    


 

 <section class="hero">
      <div class="svg-container">
         <a class="magic-link" href="#">
            <svg class="gradient" height="60" width="320" xmlns="http://www.w3.org/2000/svg">
              <defs>
                <linearGradient id="gradient">
                  <stop offset="0%" stop-color="#EB3349" />
                  <stop offset="95%" stop-color="#EB3349" />
                </linearGradient>
              </defs>
              <rect class="rect-shape" height="60" width="320" />
              <div class="text">Hover me</div>
            </svg>
         </a>
      </div>
    </section>

function getArrayDepth(ry){
  // number of levels: how deep is the array
  let levels = 1;
  // previous length
  let prev_length = 1;
  // current length
  let curr_length = ry.length;
  //if the resulting array is longer than the previous one  add a new level
  while(curr_length > prev_length){
  ry = ry.flat();
  prev_length = curr_length
  curr_length = ry.length;
  levels ++
  }
  return levels;
}



let testRy = [1,2,[3,4,[5,6],7,[8,[9,91]],10],11,12]

console.log(testRy);

console.log(getArrayDepth(testRy))

console.log(testRy);