Snippets Collections
// icons.svg file containing all svg icons with 'symbol' referrenced with an ID
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-monitor" viewBox="0 0 24 24">
<title>monitor</title>
<path d="M20 2h-16c-1.7 0-3 1.3-3 3v10c0 1.7 1.3 3 3 3h7v2h-3c-0.6 0-1 0.4-1 1s0.4 1 1 1h8c0.6 0 1-0.4 1-1s-0.4-1-1-1h-3v-2h7c1.7 0 3-1.3 3-3v-10c0-1.7-1.3-3-3-3zM21 15c0 0.6-0.4 1-1 1h-16c-0.6 0-1-0.4-1-1v-10c0-0.6 0.4-1 1-1h16c0.6 0 1 0.4 1 1v10z"></path>
</symbol>
<symbol id="icon-moon" viewBox="0 0 24 24">
<title>moon</title>
<path d="M21.5 11.9c-0.3-0.2-0.8-0.2-1.1 0.1-2.1 1.6-5 1.6-7.1 0-2.7-2-3.3-5.7-1.3-8.4 0.2-0.3 0.3-0.7 0.1-1.1-0.2-0.3-0.6-0.5-1-0.5-4.8 0.4-8.6 4.2-9 9-0.5 5.5 3.5 10.4 9 10.9 0.3 0 0.6 0 0.9 0 2.3 0 4.6-0.8 6.4-2.3 2.1-1.7 3.3-4.1 3.6-6.8 0-0.3-0.2-0.7-0.5-0.9zM17.2 18.1c-1.6 1.4-3.7 2-5.8 1.8-4.4-0.4-7.6-4.3-7.2-8.7 0.3-3.1 2.4-5.8 5.2-6.8-1.2 3.2-0.1 7 2.8 9.2 2.2 1.6 5 2 7.5 1.1-0.6 1.3-1.4 2.5-2.5 3.4z"></path>
</symbol>
<symbol id="icon-more-horizontal" viewBox="0 0 24 24">
<title>more-horizontal</title>
<path d="M14 12c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
<path d="M21 12c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
<path d="M7 12c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
</symbol>
<symbol id="icon-more-vertical" viewBox="0 0 24 24">
<title>more-vertical</title>
<path d="M14 12c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
<path d="M14 5c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
<path d="M14 19c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
</symbol>
<symbol id="icon-move" viewBox="0 0 24 24">
<title>move</title>
<path d="M22.9 12.4c0.1-0.2 0.1-0.5 0-0.8-0.1-0.1-0.1-0.2-0.2-0.3l-3-3c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l1.3 1.3h-6.6v-6.6l1.3 1.3c0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.4-0.4 0.4-1 0-1.4l-3-3c-0.1-0.1-0.2-0.2-0.3-0.2-0.2-0.1-0.5-0.1-0.8 0-0.1 0.1-0.2 0.1-0.3 0.2l-3 3c-0.4 0.4-0.4 1 0 1.4s1 0.4 1.4 0l1.3-1.3v6.6h-6.6l1.3-1.3c0.4-0.4 0.4-1 0-1.4s-1-0.4-1.4 0l-3 3c-0.1 0.1-0.2 0.2-0.2 0.3-0.1 0.2-0.1 0.5 0 0.8 0.1 0.1 0.1 0.2 0.2 0.3l3 3c0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.4-0.4 0.4-1 0-1.4l-1.3-1.3h6.6v6.6l-1.3-1.3c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l3 3c0.1 0.1 0.2 0.2 0.3 0.2 0.1 0.1 0.3 0.1 0.4 0.1s0.3 0 0.4-0.1c0.1-0.1 0.2-0.1 0.3-0.2l3-3c0.4-0.4 0.4-1 0-1.4s-1-0.4-1.4 0l-1.3 1.3v-6.6h6.6l-1.3 1.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3l3-3c0.1-0.1 0.2-0.2 0.2-0.3z"></path>
</symbol>
<symbol id="icon-music" viewBox="0 0 24 24">
<title>music</title>
<path d="M21.6 2.2c-0.2-0.2-0.5-0.2-0.8-0.2l-12 2c-0.4 0.1-0.8 0.5-0.8 1v11h-3c-1.7 0-3 1.3-3 3s1.3 3 3 3h2c1.7 0 3-1.3 3-3v-13.2l10-1.7v9.9h-3c-1.7 0-3 1.3-3 3s1.3 3 3 3h2c1.7 0 3-1.3 3-3v-14c0-0.3-0.1-0.6-0.4-0.8zM8 19c0 0.6-0.4 1-1 1h-2c-0.6 0-1-0.4-1-1s0.4-1 1-1h3v1zM20 17c0 0.6-0.4 1-1 1h-2c-0.6 0-1-0.4-1-1s0.4-1 1-1h3v1z"></path>
</symbol>
</defs>
</svg>



// html file using svg and use tags to pull the correct icon from the icons.svg
// animations do not work using this method

  <svg width="100" height="100">
    <use xlink:href="icons.svg#icon-custom"></use>
  </svg>


// using an object for animation use
   <object
          data="./img/bouncing-circles.svg"
          type="image/svg+xml"
          class="preloader-animation"
        >
          <h5 class="fallback">Loading...</h5>
        </object>

/**

 * Allow SVG uploads for administrator users.

 *

 * @param array $upload_mimes Allowed mime types.

 *

 * @return mixed

 */

add_filter(

    'upload_mimes',

    function ( $upload_mimes ) {

        // By default, only administrator users are allowed to add SVGs.

        // To enable more user types edit or comment the lines below but beware of

        // the security risks if you allow any user to upload SVG files.

        if ( ! current_user_can( 'administrator' ) ) {

            return $upload_mimes;

        }

​

        $upload_mimes['svg']  = 'image/svg+xml';

        $upload_mimes['svgz'] = 'image/svg+xml';

​

        return $upload_mimes;
<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

Thu Jul 11 2024 04:07:33 GMT+0000 (Coordinated Universal Time)

#svg #use
star

Fri Feb 16 2024 11:48:23 GMT+0000 (Coordinated Universal Time)

#undefined #svg #allow-svg
star

Thu May 04 2023 13:52:40 GMT+0000 (Coordinated Universal Time) https://mavo.io/demos/svgpath/

#svg #path #vector
star

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

#svg #dynamicsvg
star

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

#svg #patterns
star

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

#css #svg
star

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

#js #svg #hover
star

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

#js #svg #svg-viewbox
star

Mon Feb 14 2022 01:17:26 GMT+0000 (Coordinated Universal Time)

#html #css #javascript #svg
star

Sun Feb 13 2022 01:49:16 GMT+0000 (Coordinated Universal Time) 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