Published
Edited
Aug 28, 2020
1 fork
10 stars
html`
<svg>
<filter id="noise">
<feTurbulence numOctaves="2" baseFrequency="0.02"/>
</filter>
<rect filter="url(#noise)" width="200px" height="200px"/>
</svg>
`
html`
<svg width="500px" height="250px">
<filter id="displacementFilter">
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="5" seed="2" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15"/>
</filter>
<circle cx="100" cy="110" r="100px" filter="url(#displacementFilter)"/>
</svg>
`
html`
<style>
#circle {
fill: rgba(239,116,148, 0.5);
}
#circle2 {
fill: rgba(55,91,173, 0.5);
}
</style>
<svg width="500px" height="250px">
<filter id="displacementFilter">
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="5" seed="2" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2"/>
</filter>
<circle id="circle" cx="100" cy="110" r="100px" filter="url(#displacementFilter)"/>
<circle id="circle2" cx="200" cy="110" r="100px" filter="url(#displacementFilter)"/>
</svg>
`
{
return html`
<h3>Make the circles move</h3>
<style>
#circle-moving {
fill: rgba(239,116,148, 0.5);
animation: moveCircle 4s linear infinite;
}
#circle-moving2 {
fill: rgba(55,91,173, 0.5);
animation: moveCircle2 5s linear infinite;
}
@keyframes moveCircle {0% {cy: 100;} 50% {cy: 75;} 100% {cy: 100;} }
@keyframes moveCircle2 {0% {cy: 100;} 50% {cy: 150;} 100% {cy: 100;} }
</style>
<svg width="500px" height="250px">
<filter id="displacementFilter">
<feTurbulence type="turbulence" baseFrequency="0.1" numOctaves="1" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2"/>
</filter>
<circle id="circle-moving" cx="100" cy="110" r="100px" filter="url(#displacementFilter)"/>
<circle id="circle-moving2" cx="200" cy="110" r="100px" filter="url(#displacementFilter)"/>
</svg>
`
}
html`
<svg width="300" height="300">
<radialGradient id="GradientReflect" cx="0.9" cy="0.5" r="0.4" fx="0.7" fy="0.72" spreadMethod="reflect">
<stop offset="0%" stop-color="red"/>
<stop offset="33%" stop-color="blue"/>
<stop offset="66%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
<rect id="witness" width="300" height="300" fill="url(#GradientReflect)"/>
</svg>
<filter id="f" primitiveUnits="objectBoundingBox" >
<feImage result="pict2" xlink:href="#witness"></feImage>
<feDisplacementMap scale=".05" xChannelSelector="R" yChannelSelector="R" in2="pict2" in="SourceGraphic">
</feDisplacementMap>
</filter>
<svg width="300" height="300">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://d29xw0ra2h4o4u.cloudfront.net/assets/logo_square-051508b5ecf8868635aea567bb86f423f4d1786776e5dfce4adf2bc7edf05804.png" width="300" height="300"></image>
</svg>
`
html`
<style>
.flex-auto {
max-width: 1020px
}
</style>
<p>Set styles for this page</p>
`
{
return html`
<h2>Create Different SVG patterns</h2>
<br>
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width="300" height="300">
<radialGradient id="GradientReflect" cx="0.9" cy="0.5" r="0.4" fx="0.7" fy="0.72" spreadMethod="reflect">
<stop offset="0%" stop-color="red"/>
<stop offset="33%" stop-color="blue"/>
<stop offset="66%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
<rect id="witness" width="300" height="300" fill="url(#GradientReflect)"/>
</svg>
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width="300" height="300">
<radialGradient id="GradientReflect2" cx="0.62" cy="0.7" r="0.17" fx="0.6" fy="0.7" spreadMethod="reflect">
<stop offset="0%" stop-color="red"/>
<stop offset="33%" stop-color="blue"/>
<stop offset="66%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
<rect id="witness" width="300" height="300" fill="url(#GradientReflect2)"/>
</svg>
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width="300" height="300">
<radialGradient id="GradientReflect3" cx="0.5" cy="1.1" r="0.5" fx="0.5" fy="0.8" spreadMethod="reflect">
<stop offset="0%" stop-color="red"/>
<stop offset="33%" stop-color="blue"/>
<stop offset="66%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
<rect id="witness" width="300" height="300" fill="url(#GradientReflect3)"/>
</svg>
`
}
{
return html`
${createImage(rc2, radial1, 0)}
${createImage(rc2, radial3, 20)}
${createImage(rc2, radial3, 40)}
${createImage(rc2, radial1, 15)}
${createImage(rc2, radial2, 25)}
${createImage(rc2, radial3, 60)}
${createImage(rc2, radial1, 30)}
${createImage(rc2, radial1, 60)}
${createImage(rc2, radial2, 50)}
`;
}
{
return html`
<h2>A gradient of "glitch"!</h2>
${createImage(rc2, radial2, 0)}
${createImage(rc2, radial2, 5)}
${createImage(rc2, radial2, 10)}
${createImage(rc2, radial2, 15)}
${createImage(rc2, radial2, 20)}
${createImage(rc2, radial2, 25)}
${createImage(rc2, radial2, 30)}
${createImage(rc2, radial2, 35)}
${createImage(rc2, radial2, 40)}
${createImage(rc2, radial2, 45)}
${createImage(rc2, radial2, 50)}
${createImage(rc2, radial2, 55)}
${createImage(rc2, radial2, 60)}
${createImage(rc2, radial2, 65)}
${createImage(rc2, radial2, 70)}
`
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
