)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

Rectangle Path with SVG

  1. const rectPath = rect =>
  2.   `M ${rect.left} ${rect.top}
  3.   L ${rect.right} ${rect.top}
  4.     ${rect.right} ${rect.bottom}
  5.     ${rect.left} ${rect.bottom}
  6.     ${rect.left} ${rect.top} `;
  7.  
  8. const el = document.body.appendChild(
  9.   document.createElement('div'));
  10.  
  11. el.innerHTML = `
  12.   <svg width="100%" height="100%" viewBox="0 0 550 496">
  13.     <path d="
  14.     ${rectPath({left: 20, top: 10, right: 100, bottom: 100})}
  15.     ${rectPath({left: 50, top: 50, right: 200, bottom: 200})}
  16.     ${rectPath({left: 150, top: 20, right: 250, bottom: 100})}
  17.     ${rectPath({left: 150, top: 120, right: 250, bottom: 230})}
  18.     " stroke="black" fill="red" fill-rule="evenodd" vector-effect="non-scaling-stroke"/>
  19.  
  20.     <path d="
  21.     ${rectPath({left: 10, top: 220, right: 100, bottom: 300})}
  22.     ${rectPath({left: 20, top: 250, right: 150, bottom: 350})}
  23.     " stroke="white" fill="#64a7ff" fill-rule="nonzero" vector-effect="non-scaling-stroke"/>
  24.  
  25.     <path d="
  26.     ${rectPath({left: 350, top: 10, right: 450, bottom: 150})}
  27.     " fill="#2e9997" />
  28.   </svg>
  29.   <style>
  30.     svg, div, body, html {
  31.       overflow: visible; 
  32.       height: 100%; 
  33.       width: 100%;
  34.       margin: 0; padding: 0;
  35.     }
  36.   </style>
  37. `;

In this snippet rectPath creates a rectangle with “move to” and “line to” commands to be used in conjunction with SVG paths.

// javascript // paths // svg

Wobbling Ball With Canvas

  1. // same as yesterday but with canvas instead of svg
  2. const canvas = document.createElement('canvas'),
  3.       c = canvas.getContext('2d');
  4. document.body.appendChild(canvas);
  5. document.body.style.margin = 0;
  6.  
  7. let w = window.innerWidth,
  8.     h = window.innerHeight,
  9.     x = w / 2,
  10.     y = h / 2,
  11.     vx = vy = dx = dy = 0,
  12.     damp = 0.99, div = 8, ticks = 0, 
  13.     wobbleChance = 0.03,
  14.     startTick = 50;
  15.  
  16. function loop() {
  17.  
  18.   w = window.innerWidth;
  19.   h = window.innerHeight;
  20.   radius = w * 0.05;
  21.   diam = radius * 2;
  22.   diam2x = diam * 2;
  23.  
  24.   if (x > w){
  25.     vx *= -1;
  26.     dx *= -1;
  27.     x = w;
  28.   } else if (x < 0){
  29.     vx *= -1;
  30.     dx *= -1;
  31.     x = 0;
  32.   }
  33.  
  34.   if (y > h) {
  35.     vy *= -1;
  36.     dy *= -1;
  37.     y = h;
  38.   } else if (y < 0) {
  39.     vy *= -1;
  40.     dy *= -1;
  41.     y = 0
  42.   } 
  43.  
  44.   if (
  45.     Math.random() < wobbleChance || 
  46.     ticks === startTick) {
  47.       dx += Math.random() * 10 - 5;
  48.       dy += Math.random() * 10 - 5;
  49.   }
  50.  
  51.   dx *= damp;
  52.   dy *= damp;
  53.  
  54.   vx += (dx - vx) / div;
  55.   vy += (dy - vy) / div;
  56.  
  57.   x += vx;
  58.   y += vy;
  59.  
  60.   // in most cases these days you
  61.   // just clear the whole canvas, but for
  62.   // this example we clear a rectangle around 
  63.   // the circle 
  64.   c.clearRect(
  65.     x - diam, 
  66.     y - diam, 
  67.     diam2x, 
  68.     diam2x
  69.   );
  70.  
  71.   // draw the path
  72.   c.fillStyle = 'red'
  73.   c.beginPath();
  74.   c.arc(x, y, radius, 0, Math.PI * 2, false);
  75.   c.fill();
  76.  
  77.   ticks++;
  78.   window.requestAnimationFrame(loop);
  79. }
  80. loop();
  81.  
  82. function resize() {
  83.   canvas.width = window.innerWidth;
  84.   canvas.height = window.innerHeight;
  85. }
  86. resize();
  87. window.addEventListener('resize', resize);

A wobbling ball with canvas.

// animation // canvas // graphics // javascript // random

Wobbling Ball with SVG

  1. const el = document.body.appendChild(
  2.   document.createElement('div'));
  3.  
  4. el.innerHTML = `
  5.   <svg width="100%" height="100%">
  6.     <circle 
  7.      id="circ" 
  8.      cx="0" cy="0" r="50"
  9.      fill="red" style="will-change: transform;"/>
  10.   </svg>
  11.   <style>
  12.     svg, div, body, html {
  13.       overflow: visible; 
  14.       height: 100%; 
  15.       width: 100%;
  16.       margin: 0; padding: 0;
  17.     }
  18.   </style>
  19.   `;
  20.  
  21. let w = window.innerWidth,
  22.     h = window.innerHeight,
  23.     x = w / 2,
  24.     y = h / 2,
  25.     vx = vy = dx = dy = 0,
  26.     damp = 0.99, div = 8, ticks = 0, 
  27.     wobbleChance = 0.03,
  28.     startTick = 50;
  29.  
  30. function loop() {
  31.   w = window.innerWidth;
  32.   h = window.innerHeight;
  33.  
  34.   if (x > w){
  35.     vx *= -1;
  36.     dx *= -1;
  37.     x = w;
  38.   } else if (x < 0){
  39.     vx *= -1;
  40.     dx *= -1;
  41.     x = 0;
  42.   }
  43.  
  44.   if (y > h) {
  45.     vy *= -1;
  46.     dy *= -1;
  47.     y = h;
  48.   } else if (y < 0) {
  49.     vy *= -1;
  50.     dy *= -1;
  51.     y = 0
  52.   } 
  53.  
  54.   if (
  55.     Math.random() < wobbleChance || 
  56.     ticks === startTick) {
  57.       dx += Math.random() * 10 - 5;
  58.       dy += Math.random() * 10 - 5;
  59.   }
  60.  
  61.   dx *= damp;
  62.   dy *= damp;
  63.  
  64.   vx += (dx - vx) / div;
  65.   vy += (dy - vy) / div;
  66.  
  67.   x += vx;
  68.   y += vy;
  69.  
  70.   circ.setAttribute('transform', `translate(${x} ${y})`);
  71.  
  72.   ticks++;
  73.   window.requestAnimationFrame(loop);
  74. }
  75. loop();
  76.  
  77. function resize() {
  78.   const radius = Math.min(w, h) * .05;
  79.  
  80.   // `window.circ` is the global id (⌐■_■)
  81.   circ.r.baseVal.value = radius;
  82. }
  83. resize();
  84. window.addEventListener('resize', resize);

A wobbling ball with svg.

// animation // graphics // javascript // math // random // svg

Drawing Gears With SVG

  1. const el = document.body.appendChild(
  2.   document.createElement('div'));
  3.  
  4. el.innerHTML = `
  5.   <svg id="svg" width="100%" height="100%" viewBox="0 0 550 496">
  6.     <path id='path' d="M 10 10 L 100 100" stroke="black" fill='none' vector-effect="non-scaling-stroke"/>
  7.   </svg>
  8.   <style>
  9.     svg, div, body, html {
  10.       overflow: visible; 
  11.       height: 100%; 
  12.       width: 100%;
  13.       margin: 0; padding: 0;
  14.     }
  15.   </style>
  16.   `;
  17.  
  18. // a variation on something from my old 
  19. // site https://actionsnippet.com/?p=1175
  20.  
  21. const TWO_PI = Math.PI * 2;
  22. let cmds = '';
  23.  
  24. // x, y, max radius, notch number
  25. drawVerts(calcGear(200, 200, 50, 6));
  26. drawVerts(calcGear(400, 200, 30, 3));
  27. drawVerts(calcGear(300, 350, 30, 20));
  28. drawVerts(calcGear(400, 400, 30, 2));
  29. dotVerts(drawVerts(calcGear(150, 400, 30, 6)));
  30.  
  31. // `<path id=...` becomes a global o_Ö
  32. window.path.setAttribute('d', cmds);
  33.  
  34. function calcGear(x, y, maxRad, notches) {
  35.   let verts = [],
  36.       step = TWO_PI / (notches * 8),
  37.       mod = 0, r;
  38.   for (let i = 0; i <= TWO_PI; i += step) {
  39.     r = (parseInt(mod) % 2 + 1) * maxRad;
  40.     mod += .25;
  41.     verts.push(x + r * Math.cos(i));
  42.     verts.push(y + r * Math.sin(i));
  43.   }
  44.   return verts;
  45. }
  46.   
  47. function drawVerts(verts) {
  48.   cmds += `M ${verts[0]} ${verts[1]} L`;
  49.     for (let i = 2; i < verts.length; i += 2) {
  50.     cmds += ` ${verts[i]} ${verts[i + 1]} `
  51.     }
  52.   cmds += 'z ';
  53.   return verts;
  54. }
  55.  
  56. function dotVerts(verts, rad = 3) {
  57.   let dots = '';
  58.   for (let i = 2; i < verts.length; i+=2) {
  59.     dots += `
  60.       <circle 
  61.         cx="${verts[i]}" cy="${verts[i + 1]}"
  62.         r="${rad}"
  63.         fill="red" />
  64.     `
  65.   }
  66.   // another global o_Ö 
  67.   window.svg.innerHTML += dots;
  68. }

Using yesterdays technique, this is a variation of an old snippet from ActionSnippet.com

// graphics // javascript // svg

Quick SVG

  1. const el = document.body.appendChild(
  2.     document.createElement('div'));
  3. el.innerHTML = `<svg style='overlow:visible'>
  4.   <circle cx="100" cy="20" r="20" fill="red" />
  5.   <rect x="100" y="60" width="20" height="20" fill="blue" />
  6. </svg>`;

Defining SVG like this in a template string is a fast and powerful way to start doing SVG that is controlled or generated by JavaScript. Here is another example:

  1. const scribble = document.body.appendChild(
  2.     document.createElement('div'));
  3. const d = (iter = 30) => {
  4.   // make sure the iter is odd
  5.   if (iter % 2 == 0) iter += 1;
  6.   // random cubic beziér
  7.   let path = 'M ';
  8.   for (let i = 0; i < iter; i++) {
  9.     const cmd = i == 1 ? 'C ' : ' '
  10.     path += cmd + Math.random() * 200 + ' ' + Math.random() * 200;
  11.   }
  12.   return path + 'z';
  13. }
  14. scribble.innerHTML = `<svg style='overlow:visible' viewBox="0 0 200 200">
  15.   <path d="${d()}" 
  16.     stroke="#295896" 
  17.     stroke-width="3"
  18.     fill="#ccc" 
  19.     fill-rule="even-odd"
  20.     vector-effect="non-scaling-stroke" />
  21. </svg>
  22. <style>
  23.   svg, div, body, html {
  24.     overflow: visible; 
  25.     height: 100%; 
  26.     width: 100%;
  27.     margin: 0; padding: 0;
  28.   }
  29. </style>
  30. `;

You’ll notice a somewhat hacky style tag as well… this is used to quickly fill the page with the SVG.

// graphics // javascript // paths // random // svg // tricks
Older Posts
Newer Posts

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}