Snippets Collections
<svg viewbox="0 0 00 300" xmlns="http://www.w3.org/000/svg"> 
2
  <defs> 
3
   <!-- ##### SYMBOLS  ##### -->

      <symbol id="wavebase">

          <path fill="none" d="M -4 4 C -4 47 25 75 50 75 C 75 75 5 25 0 25 C 5 25 204 53 204 53"/>

      </symbol>
7
   

   <symbol id="filligree">

     

      <rect class="hide" x="0" y="0" width="4" height="12" />     

      <path stroke="#337700" stroke-width="0.3" fill="none"  
12
             d="M -2 9 

                C -4 9 2 1 0 1

                C -2 1 4 9 2 9
15
                C  0 9 6 1 4 1

                C  2 1 8 9 6 9"></path>
17
    </symbol>

   

   <pattern id="cardio-1" patternUnits="userSpaceOnUse" width="4"  height="10" patternTransform="rotate(0) skewX(0) scale(1 3)"> 
.holder {
  position: relative;
}
.holder:after {
  left: 0;
  right: 0;
  width: 100%;
  bottom: -21px;
  content: "";
  height: 21px;
  display: block;
  position: absolute;
  /* Here's the SVG embedded into the CSS BG using https://yoksel.github.io/url-encoder/ */
  background: url("data:image/svg+xml, %3Csvg width='1166' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='1166' height='21'%3E%3Crect width='1166' height='21' fill='url(%23paint0_linear)'/%3E%3C/mask%3E%3Cg mask='url(%23mask0)'%3E%3Crect width='1166' height='21' fill='url(%23paint1_radial)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear' x2='1' gradientUnits='userSpaceOnUse' gradientTransform='matrix(-1166 -7 2608 -438157 -138 219063)'%3E%3Cstop offset='0' stop-color='%23333' stop-opacity='0'/%3E%3Cstop offset='0.5' stop-color='%23000' stop-opacity='1'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='paint1_radial' cx='0.5' cy='0.5' r='0.5' gradientUnits='userSpaceOnUse' gradientTransform='translate(1453 -10) scale(1740 62) rotate(90)'%3E%3Cstop offset='0.0' stop-opacity='0'/%3E%3Cstop offset='0.5' stop-opacity='0'/%3E%3Cstop offset='1'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}
/*JS*/
const handleButtonWithSvgHover = (buttonId, svgWrapperId, svgFillColorNew, svgFillColorOld) => {
	const button = $(`#${buttonId}`);
	const svgWrapper = $(`#${svgWrapperId}`);
	const svgPath = svgWrapper[0].children[0].children[0];
	svgPath.style.transition = "0.6s";

	button.mouseenter(() => {
		svgPath.setAttribute("fill", svgFillColorNew);
	})
	button.mouseleave(() => {
		svgPath.setAttribute("fill", svgFillColorOld);
	})
}

handleButtonWithSvgHover("arrow-down-btn", "arrow-down-svg", "white", "black");
/*JS*/


/*HTML markdown example*/
<button id="arrow-down-btn">
  <div id="arrow-down-svg">
    <svg width="22" height="28" viewBox="..." fill="none">
		<path d="..." fill="black"></path>
	</svg>
  </div>
</buton>
/*HTML markdown example*/
const svg = document.getElementsByTagName("svg")[SVG_INDEX];
const bbox = svg.getBBox();
const viewBox = [bbox.x, bbox.y, bbox.width, bbox.height].join(" ");
svg.setAttribute("viewBox", viewBox);
prompt("Copy to clipboard: Ctrl+C, Enter", svg.outerHTML);
// NOTAS 
 /*
 1) SVG , PNG ,JPG: 
 para una misma imagen, puede pasar que el peso de svg sea mayor que png o jpg; porque
 dependera de que grafica se lleva a svg, si son figuras simples -> svg pesa poco; pero si son
 muchas imagenes intrincadas entonces svg terminara pesando mas, ya que jpg y png cuardan bits y svg guarda codigo vectorias.
 */

/*
2) -webkit-mask-img "solo funciona para firefox" 
   por lo tanto para enmascarar es mejor usar SVG
   -donde se usara "<image> con width y height obligatorios" y no <img>  
   -aplicar stdDeviation="10" entre 1 y 10 se pasa como que va perdiendo espacio
*/

/*
3) es mejor mover la mascara modificando cx y cy , sera mas simple.

  NOTA: las forma de escalar para un mismo tamaño con  background-image  y <img src=""/>
        No son iguales. es mejor usar un mismo tipo si quiere sobreponer imagenes parecidas y dar           efecto collage
*/

/*
  ENMASCARAR CON 	clipPath esta muy bien, incluso para moverlo con el mousemove es simple; pero 
  "no tiene forma de difuminar los bordes de lamascara con la función gauss"
*/
let box = document.querySelector(".box");
let img1 = document.querySelector(".img1");
const t = img1.getBoundingClientRect();
let bg = img1.querySelector('image');

function moverCursor(e) {
  let x = e.pageX - t.left - (t.width / 2);
  let y = e.pageY - t.top - (t.height / 2);
  
  img1.style.setProperty(`top`, `${y}px`);
  img1.style.setProperty(`left`, `${x}px`);
  
  bg.style.setProperty(`x`, `${-x}px`);
  bg.style.setProperty(`y`, `${-y}px`);
}
box.addEventListener("mousemove", moverCursor);

/*CSS*/
.box {
  width: 500px;
  height: 250px;
  border: 2px solid red;
  position: relative;
  background-image: url(https://picsum.photos/600/250);
  overflow: hidden;
}

.img1 {
  position: absolute;
}



/*HTML*/
<div class="box">
  <svg class="img1"  width="150" height="150">
    <defs>
      <filter id="filter">
        <feGaussianBlur stdDeviation="10" />
      </filter>
      <mask id="mask">
        <ellipse cx="50%" cy="50%" rx="40%" ry="40%" fill="white" filter="url(#filter)"></ellipse>
      </mask>
    </defs>
    <image href="https://picsum.photos/500/250" width="500" height="250" mask="url(#mask)"></image>
  </svg>
</div>

star

Fri Jun 10 2022 07:32:47 GMT+0000 (UTC) https://jsfiddle.net/w91sn1dk/3/

#svg #dynamicsvg
star

Thu Apr 21 2022 06:07:41 GMT+0000 (UTC) https://codepen.io/alexmwalker/pen/gOGPPXz

#svg #patterns
star

Thu Apr 21 2022 04:10:19 GMT+0000 (UTC) https://codepen.io/alexmwalker/pen/ZMVNbo

#css #svg
star

Sun Mar 20 2022 17:28:54 GMT+0000 (UTC) https://agency-website-c0d1e7.webflow.io/

#js #svg #hover
star

Sun Mar 20 2022 17:13:46 GMT+0000 (UTC) https://agency-website-c0d1e7.webflow.io/

#js #svg #svg-viewbox
star

Sun Feb 13 2022 01:49:16 GMT+0000 (UTC) https://es.stackoverflow.com/questions/514611/c%c3%b3mo-difuminar-el-borde-de-clip-path-en-un-enmascaramiento

#html #css #javascript #svg

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension