Published
Edited
Aug 28, 2020
1 fork
10 stars
Insert cell
Insert cell
Insert cell
Insert cell
html`
<svg>
<filter id="noise">
<feTurbulence numOctaves="2" baseFrequency="0.02"/>
</filter>
<rect filter="url(#noise)" width="200px" height="200px"/>
</svg>
`
Insert cell
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>
`
Insert cell
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>
`
Insert cell
{
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>
`
}
Insert cell
Insert cell
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>
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html`
<style>
.flex-auto {
max-width: 1020px
}
</style>
<p>Set styles for this page</p>
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
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>
`
}
Insert cell
{
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)}

`;
}
Insert cell
{
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)}
`
}
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more