SVG filters

...256.moderate {257    filter: blur(var(--moderate-blur));258}259.moderate.no-red {260    filter: url('svg-filters.svg#protanopia')  blur(var(--moderate-blur));261}262.moderate.low-red {263    filter: url('svg-filters.svg#protanomaly') blur(var(--moderate-blur));264}265.moderate.no-green {266    filter: url('svg-filters.svg#deuteranopia') blur(var(--moderate-blur));267}268.moderate.low-green {269    filter: url('svg-filters.svg#deuteranomaly') blur(var(--moderate-blur));270}271.moderate.no-blue {272    filter: url('svg-filters.svg#tritanopia') blur(var(--moderate-blur));273}274.moderate.low-blue {275    filter: url('svg-filters.svg#tritanomaly') blur(var(--moderate-blur));276}277.moderate.no-color {278    filter: url('svg-filters.svg#achromatopsia') blur(var(--moderate-blur));279}280.moderate.almost-no-color {281    filter: url('svg-filters.svg#achromatomaly') blur(var(--moderate-blur));282}283/* severe vision loss combinations */284.severe {285   filter: blur(var(--severe-blur));286}287.severe.no-red {288    filter: url('svg-filters.svg#protanopia') blur(var(--severe-blur));289}290.severe.low-red {291    filter: url('svg-filters.svg#protanomaly') blur(var(--severe-blur));292}293.severe.no-green {294    filter: url('svg-filters.svg#deuteranopia') blur(var(--severe-blur));295}296.severe.low-green {297    filter: url('svg-filters.svg#deuteranomaly') blur(var(--severe-blur));298}299.severe.no-blue {300    filter: url('svg-filters.svg#tritanopia') blur(var(--severe-blur));301}302.severe.low-blue {303    filter: url('svg-filters.svg#tritanomaly') blur(var(--severe-blur));304}305.severe.no-color {306    filter: url('svg-filters.svg#achromatopsia') blur(var(--severe-blur));307}308.severe.almost-no-color {309    filter: url('svg-filters.svg#achromatomaly') blur(var(--severe-blur));310}311/* blindness combinations */312.blindness {313    filter: brightness(0);314}315.blindness.no-red {316    filter: url('svg-filters.svg#protanopia') brightness(0);317}318.blindness.low-red {319    filter: url('svg-filters.svg#protanomaly') brightness(0);320}321.blindness.no-green {322    filter: url('svg-filters.svg#deuteranopia') brightness(0);323}324.blindness.low-green {325    filter: url('svg-filters.svg#deuteranomaly') brightness(0);326}327.blindness.no-blue {328    filter: url('svg-filters.svg#tritanopia') brightness(0);329}330.blindness.low-blue {331    filter: url('svg-filters.svg#tritanomaly') brightness(0);332}333.blindness.no-color {334    filter: url('svg-filters.svg#achromatopsia') brightness(0);335}336.blindness.almost-no-color {337    filter: url('svg-filters.svg#achromatomaly') brightness(0);338}339/* color blindness variations */340.no-red {341    filter: url('svg-filters.svg#protanopia');342}343.low-red {344    filter: url('svg-filters.svg#protanomaly');345}346.no-green {347    filter: url('svg-filters.svg#deuteranopia');348}349.low-green {350    filter: url('svg-filters.svg#deuteranomaly');351}352.no-blue {353    filter: url('svg-filters.svg#tritanopia');354}355.low-blue {356    filter: url('svg-filters.svg#tritanomaly');357}358.no-color {359    filter: url('svg-filters.svg#achromatopsia');360}361.almost-no-color {362    filter: url('svg-filters.svg#achromatomaly');363}364@media screen and (min-width: 768px) {365    .select-label {366        float: left;367        width: 50%;368    }369    .select-label:last-of-type {370        padding-left: 0.5rem;371    }372}373@media screen and (min-width: 1055px) {374    .toggle-controls {375        display: none;376    }...

...22			</header>23			<div class="content">24				<section class="section">25					<h3 class="section__title">01</h3>26					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">27						<defs>28							<filter id="filter-goo-1">29								<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />30								<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />31								<feComposite in="SourceGraphic" in2="goo" />32							</filter>33						</defs>34					</svg>35					<button id="component-1" class="button button--1">36						Click me37						<span class="button__container">38							<span class="circle top-left"></span>39							<span class="circle top-left"></span>40							<span class="circle top-left"></span>41							<span class="button__bg"></span>42							<span class="circle bottom-right"></span>43							<span class="circle bottom-right"></span>44							<span class="circle bottom-right"></span>45						</span>46					</button>47				</section>48				<section class="section">49					<h3 class="section__title">02</h3>50					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">51						<defs>52							<filter id="filter-goo-2">53								<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />54								<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />55								<feComposite in="SourceGraphic" in2="goo" />56							</filter>57						</defs>58					</svg>59					<button id="component-2" class="button button--2" style="filter: url('#filter-goo-2')">60						Click me61						<span class="button__bg"></span>62					</button>63				</section>64				<section class="section">65					<h3 class="section__title">03</h3>66					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">67						<defs>68							<filter id="filter-goo-3">69								<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />70								<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />71								<feComposite in="SourceGraphic" in2="goo" />72							</filter>73						</defs>74					</svg>75					<button id="component-3" class="button button--2 button--3" style="filter: url('#filter-goo-3')">76						Click me77						<span class="button__bg"></span>78					</button>79				</section>80				<section class="section">81					<h3 class="section__title">04</h3>82					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">83						<defs>84							<filter id="filter-goo-4">85								<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />86								<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />87							</filter>88						</defs>89					</svg>90					<button id="component-4" class="button button--4">91						click92						<span class="button__bg" style="filter: url('#filter-goo-4')">93						<span class="blob"></span>94						<span class="blob"></span>95						<span class="blob"></span>96						<span class="blob"></span>97						</span>98					</button>99				</section>100				<section class="section">101					<h3 class="section__title">05</h3>102					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">103						<defs>104							<filter id="filter-glitch-1">105								<feTurbulence type="fractalNoise" baseFrequency="0.000001" numOctaves="1" result="warp" />106								<feOffset dx="-90" dy="-90" result="warpOffset" />107								<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warpOffset" />108							</filter>109						</defs>110					</svg>111					<button id="component-5" class="button button--5">Click me</button>112				</section>113				<section class="section">114					<h3 class="section__title">06</h3>115					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">116						<defs>117							<filter id="filter-glitch-2">118								<feTurbulence type="fractalNoise" baseFrequency="0.000001" numOctaves="1" result="warp" />119								<feOffset dx="-90" dy="-90" result="warpOffset" />120								<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warpOffset" />121							</filter>122						</defs>123					</svg>124					<button id="component-6" class="button button--6">Click me</button>125				</section>126				<section class="section">127					<h3 class="section__title">07</h3>128					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">129						<defs>130							<filter id="filter-glitch-3">131								<feTurbulence type="fractalNoise" baseFrequency="0.000001" numOctaves="1" result="warp" />132								<feOffset dx="-90" dy="-90" result="warpOffset" />133								<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warpOffset" />134							</filter>135						</defs>136					</svg>137					<button id="component-7" class="button button--7">Click me</button>138				</section>139				<section class="section">140					<h3 class="section__title">08</h3>141					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">142						<defs>143							<filter id="filter-ripple-1">144								<feImage xlink:href="img/ripple.png" x="30" y="20" width="0" height="0" result="ripple"></feImage>145								<feDisplacementMap xChannelSelector="R" yChannelSelector="G" color-interpolation-filters="sRGB" in="SourceGraphic" in2="ripple" scale="20" result="dm" />146								<feComposite operator="in" in2="ripple"></feComposite>147								<feComposite in2="SourceGraphic"></feComposite>148							</filter>149						</defs>150					</svg>151					<button id="component-8" class="button button--8">Click me</button>152				</section>153				<section class="section">154					<h3 class="section__title">09</h3>155					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">156						<defs>157							<filter id="filter-ripple-2">158								<feImage xlink:href="img/ripple.png" x="30" y="20" width="0" height="0" result="ripple"></feImage>159								<feDisplacementMap xChannelSelector="R" yChannelSelector="G" color-interpolation-filters="sRGB" in="SourceGraphic" in2="ripple" scale="20" result="dm" />160								<feComposite operator="in" in2="ripple"></feComposite>161								<feComposite in2="SourceGraphic"></feComposite>162							</filter>163						</defs>164					</svg>165					<button id="component-9" class="button button--9" style="filter: url('#filter-ripple-2')">Click</button>166				</section>167				<section class="section">168					<h3 class="section__title">10</h3>169					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">170						<defs>171							<filter id="filter-music">172								<feTurbulence type="fractalNoise" baseFrequency="0.000001" numOctaves="1" result="warp" />173								<feOffset dx="0" dy="-90" result="warpOffset" />174								<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warpOffset" />175							</filter>176						</defs>177					</svg>178					<button id="component-10" class="button button--10">179						<span class="button__text">Play</span>180						<span class="button__bg"></span>181					</button>182				</section>183			</div>...