Svg

saalek110 · Feb 15, 2024

JavaScript:

<svg height="80" width="300" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" stroke="red">
    <path stroke-width="2" d="M5 20 l215 0" />
    <path stroke-width="4" d="M5 40 l215 0" />
    <path stroke-width="6" d="M5 60 l215 0" />
  </g>
</svg>

سه خط قرمز افقی با ضخامت های مختلف.

saalek110 · Feb 15, 2024

JavaScript:

<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
  <polygon points="55,10 10,190 110,190" fill="lime" stroke="red" stroke-width="4" stroke-opacity="0.4" />
  <rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red" stroke-width="4" stroke-opacity="0.4" />
  <circle r="45" cx="350" cy="100" fill="pink" stroke="blue" stroke-width="4" stroke-opacity="0.4" />
  <text x="420" y="100" fill="red" stroke="blue" stroke-width="4" stroke-opacity="0.4">I love SVG!</text>
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg height="80" width="300" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" stroke="red">
    <path stroke-width="2" stroke-opacity="0.4" d="M5 20 l215 0" />
    <path stroke-width="4" stroke-opacity="0.4" d="M5 40 l215 0" />
    <path stroke-width="6" stroke-opacity="0.4" d="M5 60 l215 0" />
  </g>
</svg>

سه خط افقی قرمز کم رنگ با ضخامت های مختلف.

saalek110 · Feb 15, 2024

JavaScript:

<svg height="120" width="300" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" stroke="red" stroke-width="16">
    <path stroke-linecap="butt" d="M10 20 l215 0" />
    <path stroke-linecap="round" d="M10 50 l215 0" />
    <path stroke-linecap="square" d="M10 80 l215 0" />
  </g>
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg height="100" width="400" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" stroke="red" stroke-width="6">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="35,10" d="M5 60 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 80 l215 0" />
  </g>
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
  <polygon points="55,10 10,190 110,190" fill="lime" stroke="red" stroke-width="4" stroke-dasharray="10,5" />
  <rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red" stroke-width="4" stroke-dasharray="10,5" />
  <circle r="45" cx="350" cy="100" fill="pink" stroke="blue" stroke-width="4" stroke-dasharray="10,5" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
  <polygon points="55,10 10,190 110,190" fill="lime" stroke="red" stroke-width="16" stroke-linejoin="round" />
  <rect width="150" height="100" x="140" y="50" fill="yellow" stroke="red" stroke-width="16" stroke-linejoin="round" />
</svg>

<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
  <polygon points="55,10 10,190 110,190" fill="lime" stroke="red" stroke-width="16" stroke-linejoin="miter" />
  <rect width="150" height="100" x="140" y="50" fill="yellow" stroke="red" stroke-width="16" stroke-linejoin="miter" />
</svg>

<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
  <polygon points="55,10 10,190 110,190" fill="lime" stroke="red" stroke-width="16" stroke-linejoin="bevel" />
  <rect width="150" height="100" x="140" y="50" fill="yellow" stroke="red" stroke-width="16" stroke-linejoin="bevel" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" fill="red" filter="url(#f1)" />
</svg>

کد:

SVG Filters

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

saalek110 · Feb 15, 2024

JavaScript:

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f1" x="0" y="0" xmlns="http://www.w3.org/2000/svg">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" fill="yellow" filter="url(#f1)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f2" x="0" y="0" xmlns="http://www.w3.org/2000/svg">
      <feGaussianBlur in="SourceGraphic" stdDeviation="55" />
    </filter>
  </defs>
  <rect width="90" height="90" fill="yellow" filter="url(#f2)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg height="110" width="110" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f1">
      <feDropShadow dx="12" dy="14" stdDeviation="1" flood-opacity="0.7"/>
    </filter>
  </defs>
  <rect width="90" height="90" fill="yellow" filter="url(#f1)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f1" width="120" height="120">
      <feOffset in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f2" width="120" height="120">
      <feOffset in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"  fill="yellow" filter="url(#f2)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f3" width="120" height="120">
      <feOffset in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f3)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f4" width="120" height="120">
      <feOffset in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix type="matrix" values = "0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>
      <feGaussianBlur stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f4)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad1" x1="0%" x2="100%" y1="0%" y2="0%">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad2" x1="0%" x2="100%" y1="0%" y2="0%">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad3)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad4" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad4)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad5" x1="0%" y1="100%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad5)" />
</svg>