revision:
<div class="grid_A">
<svg height="200" width="200">
<circle cx="145" cy="85" r="80" stroke="black" stroke-width="3" fill="red" />
</svg>
<svg height="300" width="300">
<rect width="250" height="200" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"/>
</svg>
<svg width="200" height="200">
<rect x="120" y="5" rx="30" ry="30" width="200" height="190" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
<svg height="150" width="600">
<ellipse cx="220" cy="100" rx="220" ry="30" style="fill:purple" />
<ellipse cx="210" cy="70" rx="190" ry="20" style="fill:lime" />
<ellipse cx="200" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>
<div>
<svg height="210" width="600">
<polygon points="300,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
<line x1="340" y1="0" x2="440" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple; stroke-width:5; fill-rule:nonzero;"/>
<polyline points="420,20 440,25 460,40 480,120 520,140 600,180" style="fill:none;stroke:black; stroke-width:3" />
</svg>
</div>
<div>
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
<path d="M300 0 L200 200 L400 200 Z" />
</svg>
<svg height="400" width="450">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g font-size="30" font-family="sans-serif" fill="black" stroke="none" text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>
</div>
<div>
<svg height="80" width="200">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="black" d="M5 40 l215 0" />
<path stroke="blue" d="M5 60 l215 0" />
</g>
</svg>
<svg height="80" width="200">
<g fill="none" stroke="black">
<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>
<svg height="80" width="200">
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</svg>
</div>
<div class="grid_A">
<svg id="svg01" width="300" height="300" style="margin-left: 1vw; background-color: orangered;">
<path id="one" d="M10,10 L250,250 L10,250 L250 10" fill="seagreen" transform="translate(10,10)"></path>
</svg>
<svg id="svg01" width="300" height="300" style="margin-left: 1vw; background-color: lightgreen;">
<path id="one"d="M 0 0 300 300 L 0 300 L300 0" transform="translate(1,1)"></path>
</svg>
</div>
<div class="grid_A">
<svg id="svg03" width="300" height="300" style="margin-left: 1vw; background-color: green;">
<clipPath id="gfg1"></clipPath>
<path id="star" d=" M 85.000 105.000 L 105.000 119.641 L 102.321 95.000 L 125.000 85.000 L 102.321 75.000 L 105.000 50.359 L 85.000 65.000 L 65.000 50.359 L 67.679 75.000 L 45.000 85.000
L 67.679 95.000 L 65.000 119.641 z" transform="translate(50,50)" fill="red"/>
<use clip-path="url(#gfg1)" href="#star" fill="red" />
</svg>
<svg id="svg03" width="300" height="300" style="margin-left: 1vw; background-color: red;">
<clipPath id="gfg2"></clipPath>
<path id="star2" d=" M 85.000 105.000 L 105.000 119.641 L 102.321 95.000 L 125.000 85.000 L 102.321 75.000 L 105.000 50.359 L 85.000 65.000 L 65.000 50.359 L 67.679 75.000 L 45.000 85.000
L 67.679 95.000 L 65.000 119.641 z" transform="translate(50,50)" fill="green"/>
<use clip-path="url(#gfg2)" href="#star2" fill="red" />
</svg>
</div>
<svg id="svg04" width="300" height="300" viewBox="-70.5 -70.5 300 300" style="margin-left: 1vw; background-color: blue;">
<rect fill="grey" stroke="darkblue" stroke-width="8" x="-70" y="-70" width="300" height="300"/>
<g opacity="0.7">
<rect x="25" y="25" width="200" height="200" fill="green" stroke-width="4" stroke="pink" />
<circle cx="125" cy="125" r="75" fill="orange" />
<polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
<line x1="50" y1="50" x2="200" y2="200" stroke="deepskyblue" stroke-width="4" />
</g>
</svg>
<svg id="svg06" width="300" height="300" style="margin-left: 1vw; background-color: skyblue;">
<!-- Using g to inherit presentation attributes -->
<g fill="white" stroke="green" stroke-width="5">
<circle cx="60" cy="60" r="50" />
<circle cx="120" cy="120" r="50" />
<circle cx="180" cy="180" r="50" />
<circle cx="240" cy="240" r="50" />
</g>
</svg>
<svg id="svg07" width="300" height="300" stroke="red" fill="burlywood" style="margin-left: 1vw; background:grey";>
<circle cx="50" cy="60" r="40" />
<circle cx="150" cy="150" r="8" />
<svg viewBox="0 0 10 10" x="200" width="100" style="background-color:pink";>
<circle cx="5" cy="5" r="4" />
</svg>
</svg>
<svg id="svg0" viewBox="0 0 100 100" width="300" height="300" style="margin-left:1vw; width:20vw; height:20vw; background-color: skyblue;">
<circle cx="50" cy="50" r="45" stroke="#000" stroke-width="3" fill="red"/>
<animate attributeName="opacity" from="0.2" to="1" dur="2s" repeatCount="10"/>
</svg>
<div>
<h3>full circles</h3>
<svg id="svg1" width="200" height="200" viewBox="50 0 100 100" style="margin-left:1vw; background-color: skyblue;">
<circle cx="50" cy="50" r="45" stroke="#000" stroke-width="13" fill="gold"/>
</svg>
</div>
<div>
<h3>circles cut</h3>
<div class="grid">
<svg id="svg2" width="200" height="200" viewBox="50 50 100 100"style="margin-left:1vw; background-color: skyblue;">
<circle cx="50" cy="50" r="45" stroke="#000" stroke-width="13" fill="gold"/>
</svg>
</div>
<div>
<h3>text curved along a line</h3>
<div class="grid">
<svg id="svg08" width="200" height="300" style="margin-left: 1vw; background:darkgrey;">
<!-- to hide the path, it is usually wrapped in a <defs> element -->
<!-- <defs> -->
<path id="MyPath" fill="none" stroke="red"
d="M10,110 Q100,100 90,25 Q70,5 40,0 Q-5,0 0,20 Q10,80 20,80 Q20,70 20,60" transform="translate(50,50) scale(2)"/>
<!-- </defs> -->
<text style="font-size: 2vw; font-family: arial; fill: darkblue; text-shadow: 0.5vw 0.5vw 0.1vw brown;">
<textPath href="#MyPath"> Quick brown fox jumps over the lazy dog.</textPath>
</text>
</svg>
</div>
<div>
<h3>highlighted text</h3>
<svg id="svg09" width="200" height="100" style="margin-left: 1vw; background:pink;">
<style>
tspan {font: bold 3vw sans-serif; fill: red; }
</style>
<text x="10" y="30" class="large" style="font-size:1.5vw;">
You are
<tspan>not</tspan>
a banana!
</text>
</svg>
</div>
<div class="grid_C">
<svg height="90" width="150">
<text x="10" y="15" fill="red">I love SVG!</text>
</svg>
<svg height="90" width="150">
<text x="0" y="15" fill="green" transform="rotate(10 20,30)">I love SVG</text>
</svg>
<svg height="90" width="140">
<text x="0" y="20" style="fill:darkblue;">Several lines:
<tspan x="10" y="45" style="font-size: 1vw;">First line.</tspan>
<tspan x="10" y="70" style="font-size: 1vw;">Second line.</tspan>
</text>
</svg>
<svg height="90" width="150">
<a xlink:href="https://www.lwitters.com" target="_blank">
<text x="0" y="15" fill="red">my website!</text>
</a>
</svg>
</div>
<div>
<h3>text moving along an ellipse</h3>
<svg id="svg05" id="tutorial" data-name="tutorial" width="300" height="300" style="margin-left: 1vw; background-color: orangered;">
<path class="shape" id="shape" d="M242.93,123A71.74,71.74,0,1,1,171.2,51.22,71.73,71.73,0,0,1,242.93,123Z" transform="translate(-20 -30) scale(1.3, 1.6)"/>
<text>
<textPath xlink:href="#shape">use SVG to move text around circle.</textPath>
<animate attributeName="font-size" dur="15s" values="2;32" repeatCount="indefinite"></animate>
</text>
</svg>
</div>
<div>
<h3>animated curved line</h3>
<svg id="svg10" width="300" height="300" style="margin-left: 1vw; background-color: orange;">
<path fill="transparent" stroke="#000000" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>
<path fill="transparent" stroke="#FF2851" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="line2"></path>
<path fill="transparent" stroke="#000000" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="line1"></path>
<style>
.line1 {stroke-dasharray: 340; stroke-dashoffset: 40; animation: dash 1.5s linear alternate
infinite;}
.line2 {stroke-dasharray: 320; stroke-dashoffset: 320; animation: dash2 1.5s linear alternate
infinite;}
@keyframes dash {
from {stroke-dashoffset: 360;}
to {stroke-dashoffset: 40;}
}
@keyframes dash2 {
from {stroke-dashoffset: 280;}
to {stroke-dashoffset: -40;}
}
</style>
</svg>
</div>
<div>
<h3>circle and square animation</h3>
<div class="first">Click on the circle to animate it. The rectangle will animate after it.</div>
<svg id="svg11" width="300" height="200" style="display: inline-block; border: 3px solid #eee; ">
<circle id="orange-circle" r="30" cx="30" cy="70" fill="orange" name="click"/>
<rect id="blue-rectangle" width="50" height="50" x="10" y="100" fill="#0099cc"></rect>
<animate xlink:href="#orange-circle" attributeName="cx" from="30" to="300" dur="5s" begin="click" fill="freeze" id="circ-anim"/>
<animate xlink:href="#blue-rectangle" attributeName="x" from="30" to="280" dur="5s" begin="circ-anim.begin + 1s" fill="freeze" id="rect-anim"/>
</svg>
</div>
<div>
<h3>square changing into circle</h3>
<svg id="svg3" viewBox="-5 -3 20 20" width="200" height="300" style="margin-left:1vw; background-color: skyblue;">
<rect width="15" height="15" fill="green" stroke="darkblue" stroke-width="1">
<animate attributeName="rx" values="0;10;0" dur="4s" repeatCount="10" />
</rect>
</svg>
</div>
<div>
<h3>animated heart</h3>
<svg id="heart">
<defs>
<style>.cls-1{fill:none;stroke:#be1622;stroke-miterlimit:10; }</style>
</defs>
<title>heart</title>
<path class="cls-1" d="M340.67,131.25c18.71-30.63,56.59-48.3,92.07-43s66.5,33.36,75.38,68.13c6.22,24.37,2.19,50.32-5.52,74.26-3.88,12.06-8.72,23.89-15.53,34.57s-15.51,20.05-24.35,29.15a861.3,861.3,0,0,1-120.45,103c-32.42-26.2-66.67-45.07-97.36-71.12-14.78-12.55-27.69-27.18-39.75-42.36-15.45-19.44-29.86-40.37-36.88-64.19-8.22-27.87-5.39-59.21,9.37-84.24C194.56,106.85,227,88,260.28,87.45s63.31,15.29,81.13,43.43Z" transform="translate(-131.24 -76.84)"/>
</svg>
<style>
#heart{width:26vw; height: 25vw;}
.cls-1{stroke-width: 5px;stroke-dasharray: 1200;stroke-dashoffset: 1200; animation: draw 3s linear forwards infinite;}
@keyframes draw {
to { stroke-dashoffset: 0;}
}
</style>
</div>
<div>
<h3>from square to circle to square</h3>
<svg id="svg4" viewBox="-5 -3 40 40" width="300" height="300" style="margin-left:1vw; background-color: skyblue;">
<rect width="30" height="30" fill="green" stroke="darkblue" stroke-width="2">
<animate attributeName="rx" values="0;20;0" dur="4s" repeatCount="10" />
</rect>
</svg>
</div>
<div>
<h3>time laps - from circle to square</h3>
<svg id="svg5" viewBox="-3 -3 50 50" width="300" height="300" style="margin-left:1vw; background-color: skyblue;">
<rect width="40" height="40" fill="green" stroke="darkblue" stroke-width="2">
<animate attributeName="rx" values="40;0;50" dur="4s" repeatCount="10" />
</rect>
</svg>
</div>
<div>
<h3>square's opacity changing </h3>
<svg id="svg6" viewBox="0 -5 50 50" width="300" height="300" style="margin-left:1vw; background-color: skyblue;">
<rect width="40" height="40" fill="green" stroke="darkblue" stroke-width="2">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="4s" repeatCount="indefinite" />
</rect>
</svg>
</div>
<div>
<h3>square's opacity changing </h3>
<svg id="svg6" viewBox="0 -3 50 50" width="300" height="300" style="margin-left:1vw; background-color: skyblue;">
<rect width="40" height="40" fill="green" stroke="darkblue" stroke-width="2">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="4s" repeatCount="indefinite" />
</rect>
</svg>
</div>
<div>
<h3>time laps - square's opacity changing</h3>
<svg id="svg7" viewBox="0 -3 50 50" width="300" height="300" style="margin-left:1vw; background-color: skyblue;">
<rect width="40" height="40" fill="green" stroke="darkblue" stroke-width="2">
<animate attributeType="CSS" attributeName="opacity" from="0" to="1" dur="4s" repeatCount="indefinite" />
</rect>
</svg>
</div>
<div>
<h3>rectangle that repeatedly fade away over 5 seconds</h3>
<svg width="300" height="300">
<rect x="20" y="20" width="250" height="250" style="fill:blue">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
</rect>
</svg>
</div>
<div>
<h3>a growing rectangle that will change color </h3>
<svg width="300" height="300">
<rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime">
<animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0" />
<animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0" />
<animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800" />
<animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300" />
<animate attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze" />
</rect>
</svg>
</div>
<div>
<h3>three rectangles that will change color</h3>
<svg width="300" height="300">
<rect x="10" y="20" width="90" height="60">
<animate id="a1" attributeName="fill" from="red" to="blue" dur="3s" fill="freeze" />
</rect>
<rect x="10" y="120" width="90" height="60">
<animate id="a2" attributeName="fill" from="blue" to="yellow" begin="a1.end" dur="3s" fill="freeze" />
</rect>
<rect x="10" y="220" width="90" height="60">
<animate id="a3" attributeName="fill" from="yellow" to="green" begin="a2.end" dur="3s" fill="freeze" />
</rect>
</svg>
</div>
<div>
<h3>move text along a motion path </h3>
<svg width="300" height="300">
<g transform="translate(50,50)">
<text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24"> It's SVG!
<animateMotion path="M 0 0 L 200 200" dur="5s" fill="freeze" />
</text>
</g>
</svg>
</div>
<div>
<h3>move, rotate, and scale text along a motion path</h3>
<svg width="600" height="300">
<g transform="translate(10,10)">
<text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It's SVG!
<set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze" />
<animateMotion path="M 0 0 L 190 200" begin="1s" dur="5s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze" />
</text>
</g>
</svg>
</div>
<div>
<h3>SVG: move, rotate, and scale text along a motion path + a growing rectangle that will change color</h3>
<svg width="600" height="300">
<rect id="rec" x="100" y="100" width="300" height="100" style="fill:lime">
<animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0" />
<animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0" />
<animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800" />
<animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300" />
<animate attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze" />
</rect>
<g transform="translate(100,100)">
<text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It's SVG!
<set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze" />
<animateMotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze" />
<animate attributeName="fill" attributeType="CSS" from="red" to="blue" begin="1s" dur="5s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze" />
</text>
</g>
</svg>
</div>
<svg width="100%" height="40vw">
<g id="R1" transform="translate(250 250)">
<ellipse rx="100" ry="0" opacity=".3">
<animateTransform attributeName="transform" type="rotate" dur="7s" from="0"
to="360"
repeatCount="indefinite" />
<animate attributeName="cx" dur="8s" values="-20; 220; -20"
repeatCount="indefinite" />
<animate attributeName="ry" dur="3s" values="10; 60; 10"
repeatCount="indefinite" />
</ellipse>
</g>
<use xlink:href="#R1" transform="rotate(72 390 150)" />
<use xlink:href="#R1" transform="rotate(144 390 150)" />
<use xlink:href="#R1" transform="rotate(216 390 150)" />
<use xlink:href="#R1" transform="rotate(288 390 150)" />
</svg>
<div>
<svg width="970" height="100">
<circle id="circle1" cx="30" cy="30" r="30" style="stroke: black; fill: #ff0000;"/>
</svg>
<br/>
<input type="button" value="Start Animation" onclick="startAnimation();">
<input type="button" value="Stop Animation" onclick="stopAnimation();">
</div>
<script>
var timerFunction = null;
function startAnimation() {
if(timerFunction == null) {
timerFunction = setInterval(animate, 20);
}
}
function stopAnimation() {
if(timerFunction != null){
clearInterval(timerFunction);
timerFunction = null;
}
}
function animate() {
var circle = document.getElementById("circle1");
var x = circle.getAttribute("cx");
var newX = 2 + parseInt(x);
if(newX > 900) {
newX = 20;
}
circle.setAttribute("cx", newX);
}
</script>
<style>
svg{width: 100%;}
.filled-heading {text-transform: uppercase; font-family: 'Source Sans Pro', sans-serif;font-size: 5em;line-height: 0.9;}
#background path {animation: pulse 4s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite; transform-origin: 50% 50%;transform-box: fill-box;}
#textClip text {display: none;}
#textClip text:nth-of-type(n + 1):nth-of-type(-n + 3) {display: inline;}
@keyframes pulse {
0%, 100% { transform: scale(0) rotate(33deg); }
35%, 65% { transform: scale(1) rotate(0deg); }
}
</style>
<svg viewbox="0 0 700 225">
<clipPath id="textClip" class="filled-heading">
<text y="70">We are</text>
<text y="140">the champions</text>
<text y="210">of the world</text>
<text y="70">We are</text>
<text y="140">pushing for </text>
<text y="210">a better world</text>
<text y="70">We are</text>
<text y="140">defending a</text>
<text y="210">fair society</text>
</clipPath>
<g id="background" clip-path="url(#textClip)">
<path d="m445.62-26.657c-19.58 20.137-3.6309 59.698 27.377 73.932 31.007 14.234 67.049-14.123 72.974-27.02 5.9253-12.875-13.142-59.988-24.058-65.022-10.937-
5.012-42.19-16.996-76.294 18.11z" stroke-width=".22275"/>
<path d="m449.78 166.4c20.137 19.58 59.698 3.6309 73.932-27.377 14.234-31.007-14.123-67.071-27.02-72.974-12.875-5.9253-3.5418 38.759-20.382 59.364-15.704
19.201-61.636 6.8608-26.53 40.987z" stroke-width=".22275"/>
<path d="m299.4 7.4916c15.704-7.5959-10.269-35.128-31.297-38.002-20.983-2.8513-44.395 14.835-51.969 26.597-10.848 16.863 2.3389 30.785 9.7344 31.787 7.3954
1.0024 53.238-10.581 73.531-20.382z" stroke-width=".22275"/>
<path d="m-23.125 15.756c-25.35 12.096-24.124 54.709 0 78.833 24.124 24.124 67.806 10.024 77.83 0 10.024-10.024 8.4869-60.834 0-69.321-8.487-8.487-33.658-30.584-
77.83-9.5116z" stroke-width=".22275"/>
<path d="m354 213.43c9.378-26.463-21.629-55.755-55.755-55.755-34.126 0-55.02 40.853-55.02 55.02 0 14.167 37 49.028 49.028 49.028 12.006 0 45.397-2.1607 61.748-
48.293z" stroke-width=".22275"/>
<path d="m269.57 39.746c-26.463-9.3557-55.756 21.629-55.756 55.755 0 34.126 40.853 55.02 55.02 55.02s-12.964-36.71-6.2816-62.438c6.2594-24.013 53.149-31.988
7.0167-48.338z" stroke-width=".22275"/>
<path d="m396.7 253.28c22.676 16.551 42.123-41.187 30.272-73.197-11.851-32.01-54.686-51.857-77.118-53.706-32.188-2.6508-41.967 26.641-37.802 37.913 4.1878
11.271 55.355 67.584 84.647 88.99z" stroke-width=".22275"/>
<path d="m368.92 42.13c-17.442 0.33414-5.3461 36.22 12.563 47.58 17.909 11.36 46.556 5.0788 58.339-2.4503 16.907-10.804 10.737-28.958 4.4328-32.968-6.3039-
3.9873-52.793-12.586-75.336-12.162z" stroke-width=".22275"/>
<path d="m409.18 183.25c-17.442 0.33413-5.3461 36.22 12.563 47.58 17.887 11.383 46.556 5.0788 58.34-2.4503 16.907-10.804 10.737-28.958 4.4328-32.968-6.304-
3.9873-52.771-12.586-75.336-12.162z" stroke-width=".22275"/>
<path d="m110.44 135.06c-25.349 12.096-24.124 54.709 0 78.833 24.124 24.124 67.806 10.024 77.83 0 10.024-10.024 8.4869-60.834 0-69.321-8.5093-8.487-33.658-30.584-
77.83-9.5116z" stroke-width=".22275"/>
<path d="m134.41-33.696c-25.35 12.096-24.124 54.709 0 78.833 24.124 24.124 67.806 10.024 77.83 0 10.024-10.024 8.4869-60.834 0-69.321-8.5092-8.4869-33.658-30.584-
77.83-9.5116z" stroke-width=".22275"/>
<path d="m71.301 148.81c12.096 25.349 54.708 24.124 78.833 0 24.124-24.124 10.024-67.807 0-77.83-10.024-10.024-16.774 35.128-39.717 48.583-21.407 12.586-60.188-
14.925-39.116 29.248z" stroke-width=".22275"/>
<path d="m132.74 79.753c3.4973 27.844 50.031 16.194 74.155-7.9301 24.124-24.124 17.553-32.789 7.5291-42.836-10.024-10.046-24.303 0.13365-47.246 13.588-21.407
12.608-38.18 7.3955-34.438 37.178z" stroke-width=".22275"/>
<path d="m52.501 109.18c-27.844 3.4972-16.194 50.031 7.9301 74.155 24.124 24.124 32.79 17.553 42.836 7.5291 10.046-10.024-0.1337-24.303-13.588-47.246-12.608-
21.429-7.3955-38.18-37.178-34.438z" stroke-width=".22275"/>
<path d="m137.44 89.51c23.389-15.504-20.939-25.951-55.065-25.951-34.126 0-70.68 5.4352-80.192 25.817-13.655 29.27 10.425 48.605 22.431 48.605s82.575-28.423
112.83-48.471z" stroke-width=".22275"/>
<path d="m171.61 118.56c23.389-15.504-20.939-25.951-55.065-25.951-34.126 0-70.68 5.4352-80.192 25.817-13.655 29.27 10.425 48.605 22.431 48.605s82.575-28.423
112.83-48.471z" stroke-width=".22275"/>
<path d="m273.56 120.12c23.389-15.504-20.939-25.951-55.065-25.951s-70.68 5.4352-80.192 25.817c-13.655 29.27 10.425 48.605 22.431 48.605 12.006 0.0223 82.575-
28.423 112.83-48.471z" stroke-width=".22275"/>
<path d="m102.51 97.173c15.504 23.389 53.795-24.013 53.795-58.139 0-34.126-33.28-67.606-53.684-77.14-29.27-13.655-48.605 10.425-48.605 22.431 0 12.006 28.446
82.597 48.494 112.85z" stroke-width=".22275"/>
<path d="m15.1 236.39c15.504 23.389 53.795-24.013 53.795-58.139s-33.28-67.606-53.662-77.118c-29.27-13.655-48.605 10.425-48.605 22.431 0 12.006 28.424 82.575
48.471 112.83z" stroke-width=".22275"/>
<path d="m38.601 4.2171c-16.484-5.7471-17.575 32.099-4.7447 48.984 12.831 16.885 41.9 20.917 55.555 17.954 19.602-4.2546 20.115-23.434 15.593-29.381-4.5219-5.9253
-45.108-30.139-66.403-37.556z" stroke-width=".22275"/>
<path d="m48.068 156.65c-16.484-5.7471-17.575 32.099-4.7447 48.984 12.831 16.885 41.9 20.917 55.555 17.954 19.602-4.2546 20.115-23.434 15.593-29.381-4.522-5.9253
-45.13-30.139-66.403-37.556z" stroke-width=".22275"/>
<path d="m430.43 67.056c9.3779-26.463-21.63-55.755-55.756-55.755s-55.02 40.853-55.02 55.02c0 14.167 37 49.028 49.028 49.028 12.006 0.0223 45.397-2.1384 61.748-
48.293z" stroke-width=".22275"/>
<path d="m251.62 77.147c9.378-26.463-21.63-55.755-55.756-55.755s-55.02 40.853-55.02 55.02c0 14.167 37 49.051 49.006 49.051 12.029 0 45.42-2.1607 61.77-48.315z"
stroke-width=".22275"/>
<path d="m274.94 132.01c-22.164-17.219-46.823 23.924-46.823 58.028s10.781 35.596 24.971 35.596 17.108-17.263 23.79-43.014c6.2371-24.013 21.785-32.166-1.938-
50.61z" stroke-width=".22275"/>
<path d="m310.9 54.493c17.219-22.164-23.924-46.823-58.028-46.823-34.104 0-35.618 10.781-35.618 24.949 0 14.167 17.263 17.108 43.014 23.79 24.035 6.2594 32.21
21.785 50.632-1.9157z" stroke-width=".22275"/>
<path d="m264.74 128.47c-5.5689 27.51 33.146 3.5418 57.27-20.583 24.124-24.124 46.132-53.84 38.447-74.979-11.026-30.361-41.722-26.998-50.209-18.511-8.4869 8.487
-38.314 78.499-45.509 114.07z" stroke-width=".22275"/>
<path d="m220.03 132.08c-5.5689 27.51 33.146 3.5418 57.27-20.583 24.124-24.124 46.132-53.818 38.448-74.979-11.026-30.361-41.722-26.998-50.209-18.511-8.5093 8.487
-38.292 78.499-45.509 114.07z" stroke-width=".22275"/>
<path d="m162.34 234.95c-5.7316 28.402 34.114 3.6566 58.943-21.25 24.829-24.906 47.48-55.562 39.571-77.409-11.348-31.322-42.941-27.873-51.698-19.111-8.7119 8.785
-39.387 81.043-46.815 117.77z" stroke-width=".22962"/>
<path d="m284.01 98.331c-27.51-5.5689-21.073 55.02 3.074 79.145 24.147 24.124 71.348 24.28 92.488 16.573 30.339-11.026 26.998-41.722 18.511-50.231-8.487-8.487-
78.499-38.269-114.07-45.487z" stroke-width=".22275"/>
<path d="m281.49-61.362c-27.51-5.5689-21.073 55.02 3.074 79.145 24.147 24.124 71.348 24.28 92.488 16.573 30.339-11.026 26.998-41.722 18.511-50.231-8.487-8.5092-
78.499-38.292-114.07-45.486z" stroke-width=".22275"/>
<path d="m394.94 118.87c15.704-7.5959-10.269-35.128-31.297-38.002-21.006-2.8513-44.417 14.835-51.991 26.597-10.848 16.863 2.3389 30.785 9.7344 31.809 7.4177
1.0024 53.261-10.581 73.554-20.404z" stroke-width=".22275"/>
<path d="m315.04 74.385c-19.58 20.137-3.6309 59.698 27.376 73.932 31.007 14.234 67.071-14.123 72.974-27.02 5.9253-12.875-13.142-59.988-24.058-65.022-10.915
-5.0342-
42.167-16.974-76.293 18.11z" stroke-width=".22275"/>
<path d="m483.42 148.49c-19.58 20.137-3.6309 59.698 27.376 73.932 31.008 14.256 67.072-14.123 72.974-27.02 5.9252-12.875-13.143-59.988-24.058-65.022-10.915-5.012-
42.167-16.996-76.293 18.11z" stroke-width=".22275"/>
<path d="m483.42 80.31c12.942 24.904 52.548-2.1607 66.782-33.168 14.256-31.007 5.0788-36.844-7.8187-42.769-12.875-5.9253-22.743 8.5538-39.584 29.136-15.682 19.224-
33.213 20.159-19.38 46.801z" stroke-width=".22275"/>
<path d="m418.38 135.75c-24.904 12.942 2.1608 52.548 33.168 66.782 31.007 14.234 36.844 5.0788 42.769-7.8187 5.9253-12.898-8.5538-22.743-29.136-39.584-19.224-
15.704-20.137-33.235-46.801-19.38z" stroke-width=".22275"/>
<path d="m491.22 87.817c16.551-22.676-28.646-17.063-60.634-5.2347-31.988 11.828-64.398 29.626-66.247 52.058-2.6508 32.188 26.641 41.967 37.913 37.801 11.249-
4.1655 67.562-55.332 88.968-84.624z" stroke-width=".22275"/>
<path d="m533.34 103.21c16.551-22.676-28.646-17.063-60.634-5.2347-31.988 11.828-64.398 29.626-66.247 52.058-2.6508 32.188 26.641 41.967 37.913 37.801 11.249-
4.1655 67.562-55.31 88.968-84.624z" stroke-width=".22275"/>
<path d="m625.47 49.548c16.551-22.676-28.646-17.063-60.634-5.2347-32.01 11.851-64.398 29.626-66.247 52.058-2.6508 32.188 26.641 41.967 37.913 37.801 11.249-
4.1655 67.562-55.332 88.968-84.625z" stroke-width=".22275"/>
<path d="m461.12 107.13c22.676 16.551 42.123-41.187 30.272-73.197-11.85-32.01-54.686-51.835-77.118-53.684-32.166-2.6508-41.945 26.619-37.779 37.891 4.1655 11.271
55.31 67.584 84.624 88.99z" stroke-width=".22275"/>
<path d="m601.9 237.96c-15.704 7.5959 10.269 35.128 31.297 38.002 20.983 2.8513 44.395-14.835 51.969-26.597 10.848-16.863-2.3389-30.785-9.7344-31.787-7.3954-
1.0024-53.238 10.581-73.531 20.382z" stroke-width=".22275"/>
<path d="m547.3 32.024c-9.378 26.463 21.629 55.755 55.755 55.755 34.126 0 55.02-40.853 55.02-55.02 0-14.167-37-49.028-49.028-49.028-12.006 0-45.397 2.1607-61.748
48.293z" stroke-width=".22275"/>
<path d="m631.73 205.71c26.463 9.3557 55.756-21.629 55.756-55.755 0-34.126-40.853-55.02-55.02-55.02s12.964 36.71 6.2816 62.438c-6.2594 24.013-53.149 31.988-7.0167
48.338z" stroke-width=".22275"/>
<path d="m626.36 113.44c22.164 17.219 46.823-23.924 46.823-58.028s-10.781-35.596-24.971-35.596-17.108 17.263-23.79 43.014c-6.2371 24.013-21.785 32.166 1.938
50.61z" stroke-width=".22275"/>
<path d="m590.41 190.96c-17.219 22.164 23.924 46.823 58.028 46.823 34.104 0 35.618-10.781 35.618-24.949 0-14.167-17.263-17.108-43.014-23.79-24.035-6.2594-32.21-
21.785-50.632 1.9157z" stroke-width=".22275"/>
<path d="m636.56 116.98c5.5689-27.51-33.146-3.5418-57.27 20.583-24.124 24.124-46.133 53.84-38.447 74.979 11.026 30.361 41.722 26.998 50.209 18.511 8.4869-8.487
38.314-78.499 45.509-114.07z" stroke-width=".22275"/>
<path d="m681.27 113.37c5.5689-27.51-33.146-3.5418-57.27 20.583-24.124 24.124-46.132 53.818-38.448 74.979 11.026 30.361 41.722 26.998 50.209 18.511 8.5093-8.487
38.292-78.499 45.509-114.07z" stroke-width=".22275"/>
<path d="m734.02 188.36c13.701-24.519-11.944-58.604-45.579-64.328-33.635-5.7237-61.109 30.995-63.495 44.987-2.391 13.97 28.221 54.542 40.067 56.58 11.862 2.0104
45.151 5.4976 69.007-37.239z" stroke-width=".22275"/>
<path d="m692.88 65.812c-24.519-13.701-58.604 11.944-64.328 45.579-5.7237 33.635 31.001 61.131 44.987 63.495 13.97 2.391-6.6105-38.355 4.323-62.617 10.199-22.612
57.76-22.58 15.018-46.457z" stroke-width=".22275"/>
<path d="m727.75 39.036c16.761-4.837-4.2105-36.369-24.45-42.708-20.224-6.3654-46.284 7.1438-55.717 17.466-13.535 14.811-2.876 30.75 4.2509 32.992 7.1212 2.2198
54.23-1.5013 75.916-7.7503z" stroke-width=".22275"/>
<path d="m731.16 87.29c20.706-18.947-15.688-50.198-49.322-55.922-33.635-5.7237-36.903 4.6301-39.288 18.622-2.3853 13.992 14.149 19.754 38.388 30.694 22.633
10.194 28.053 26.891 50.222 6.6064z" stroke-width=".22275"/>
<path d="m628.53 148.48c-10.118 26.187 32.086 9.0674 59.923-10.637 27.836-19.704 54.536-45.284 50.516-67.43-5.7704-31.777-36.595-33.642-46.405-26.701-9.7877
6.9351-50.944 70.912-64.034 104.77z" stroke-width=".22275"/>
<path d="m618.21 182.56c27.616-5.1225 37.462-46.601 20.403-76.147-17.058-29.546-62.902-27.232-75.178-20.144-12.277 7.088-23.943 56.565-17.942 66.959 6.0012
10.394 24.596 38.253 72.717 29.332z" stroke-width=".22275"/>
<path d="m569.35 72.75c27.801 3.8286 28.591-44.135 11.533-73.681-17.058-29.546-27.129-25.442-39.427-18.359-12.298 7.0822-6.1608 23.509 0.89676 49.153 6.
6322 23.962-2.7382 38.793 26.998 42.887z" stroke-width=".22275"/>
<path d="m555.61 177.73c14.435 9.8176 25.284-26.456 17.261-46.087-8.0234-19.63-35.059-31.049-49.015-31.721-20.036-0.96383-25.494 17.429-22.666 24.344 2.8342
6.8937 35.77 40.787 54.42 53.463z" stroke-width=".22275"/>
<path d="m250.61 235.97c27.616-5.1225 37.462-46.601 20.403-76.147-17.058-29.546-62.902-27.232-75.178-20.144-12.277 7.088-23.943 56.565-17.942 66.959 6.0012
10.394 24.596 38.253 72.717 29.332z" stroke-width=".22275"/>
</g>
</svg>
<script>
const colors = ['green','blue','red'];
const numLines = 3;
var currCount = numLines;
const texts = document.querySelectorAll("#textClip text");
const blobs = document.querySelectorAll("#background path");
function colorBlobs() {
blobs.forEach(blob => {
blob.style.fill = colors[Math.floor(Math.random() * colors.length)];
});
}
function nextIteration() {
// Change the color of all the blobs
colorBlobs();
// Hide the old set of lines
let startVal = currCount - numLines;
if(startVal < 0) {
startVal = texts.length - numLines;
}
for(let i = startVal; i < startVal + numLines; i++) {
texts[i].style.display = "none";
}
// Show new set of lines
for(let j = currCount; j < currCount + numLines; j++) {
texts[j].style.display = "inline";
}
currCount += numLines;
if(currCount >= texts.length) {
currCount = 0;
}
}
// Since all of our blobs are using the same animation, we only need to listen to one of them
blobs[0].addEventListener("animationiteration", nextIteration);
colorBlobs();
</script>
Magic
<style>
.kittencorn {height: 65vmin; min-height: 12em;}
.rainbow {fill: #a3e048;}
p:not(.date, h2~p) { font-size: calc(1.5em + 7vmin); writing-mode: vertical-rl; text-orientation: upright; letter-spacing: -0.3em; text-transform: uppercase; overflow: hidden; height: 0;}
.sparkle { position: absolute; opacity: 0; top: 30%; right: 35%; height: 2em;}
.animate .kittencorn {animation: spin 2s }
.animate .rainbow { animation: rainbow 2s; animation-fill-mode: forwards; }
p:not(.date, .first, h2~p) {animation: type 1s steps(60, end); animation-delay: 2.5s; animation-fill-mode: forwards;}
.sparkle {animation: sparkle 2s; animation-delay: 4s; animation-fill-mode: forwards;}
@keyframes type {
0% { height: 0 }
100% { height: 5em }
}
@keyframes rainbow {
0% { fill: #a3e048 }
14.3% { fill: #f7d038 }
28.6% { fill: #eb7532 }
42.9% { fill: #e6261f }
57.2% { fill: #49da9a }
71.5% { fill: #34bbe6 }
85.8% { fill: #4355db }
100% { fill: #d23be7 }
}
@keyframes spin {
100% { transform: rotate(720deg);}
}
@keyframes sparkle {
0% {opacity: 0; transform: rotate(0deg) scale(0);}
50% {opacity: 1; transform: rotate(360deg) scale(1.3);}
100% {opacity: 0; transform: rotate(720deg) scale(0);}
}
</style>
<div id="magic">
<svg class="kittencorn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 415 352" fill="none">
<path class="rainbow" stroke="#000" stroke-width="5" d="M123.877 230.922c3.406
2.175 6.516 6.728 8.244 12.418 1.715 5.643 1.948 12.021.031 17.572-1.888 5.468-5.891 10.25-12.963 12.885-7.165 2.669-17.684 3.205-32.61-.401-29.756-7.188-54.915-
26.626-69.709-46.127-7.404-9.76-12.078-19.362-13.534-27.273-1.455-7.906.345-13.544 5.04-16.585 2.651-1.719 4.958-2.45 7.019-2.553 2.056-.102 4.063.411 6.135 1.492
4.28 2.234 8.493 6.679 13.401 12.284.685.781 1.38 1.583 2.088 2.399 9.146 10.54 20.398 23.508 37.356 27.282 17.484 3.891 28.625 4.625 36.201 4.894 1.074.038
2.056.066 2.962.093 2.338.068 4.167.121 5.751.285 2.118.219 3.459.614 4.588 1.335z"/>
<path class="rainbow" fill-rule="evenodd" stroke="#000" stroke-linecap="square" stroke-width="5" d="M151.901 58.517S86.599 28.76 71.819 42.603c-14.78 13.845
9.153 90.422 9.153 90.422s11.039-23.8 29.824-42.843c18.785-19.043 41.105-31.665 41.105-31.665z" clip-rule="evenodd"/>
<path fill="#000" fill-rule="evenodd" d="M138 67.311S93.39 46.981 83.292 56.44c-10.097 9.458 6.253 61.771 6.253 61.771s7.54-16.259 20.374-29.268C122.752 75.933 138
67.31 138 67.31z" clip-rule="evenodd"/>
<path class="rainbow" fill-rule="evenodd" stroke="#000" stroke-linecap="square" stroke-width="5" d="M327 58.517s65.302-29.758 80.082-15.914c14.78 13.845-9.152 90.422-
9.152 90.422s-11.039-23.8-29.824-42.843C349.32 71.139 327 58.517 327 58.517z" clip-rule="evenodd"/>
<path fill="#000" fill-rule="evenodd" d="M340.451 67.311s44.611-20.33 54.707-10.871c10.097 9.458-6.252 61.771-6.252 61.771s-7.541-16.259-20.374-29.268c-12.833-13.01-
28.081-21.632-28.081-21.632z" clip-rule="evenodd"/>
<path class="rainbow" fill-rule="evenodd" stroke="#000" stroke-width="5" d="M239.5 319c95.269 0 172.5-30.225 172.5-112.067C412 125.091 364.154 43 239.5 43S67 125.091
67 206.933 144.231 319 239.5 319z" clip-rule="evenodd"/>
<path fill="#fff" fill-rule="evenodd" d="M269.421 85.475s-17.077-79.652-29.71-79.652C227.077 5.823 210 85.474 210 85.474s13.603 10.033 29.711 10.033c16.107 0 29.71-10.032
29.71-10.032z" clip-rule="evenodd"/>
<path stroke="#1CAFEF" stroke-linecap="round" stroke-width="5" d="M220.57 43.788s10.301 9.215 18.976 12.264c8.675 3.05 23.971 4.846 23.971 4.846M227.126 24.256s7.002
7.088 13.172 9.746c6.17 2.658 16.23 2.453 16.23 2.453"/>
<path stroke="#000" stroke-linecap="square" stroke-width="5" d="M269.421 85.475l1.484 2.012 1.299-.959-.338-1.578-2.445.525zm0 0l1.483 2.012-.002.002-.004.003-.012.008
-.039.029-.136.097c-.116.083-.284.2-.5.347a49.67 49.67 0 0 1-1.856 1.198 64.981 64.981 0 0 1-6.698 3.588c-5.598 2.593-13.398 5.248-21.946 5.248-8.549 0-16.349-2.655-
21.947-5.248a64.981 64.981 0 0 1-6.698-3.588 49.67 49.67 0 0 1-1.856-1.198 32.2 32.2 0 0 1-.5-.347l-.136-.097-.039-.029-.012-.008-.004-.003-.002-.002L210 85.475m59.421
0c2.445-.525 2.445-.525 2.444-.526v-.003l-.003-.011-.009-.045-.038-.174-.147-.672a648.068 648.068 0 0 0-2.682-11.6c-1.804-7.49-4.344-17.49-7.284-27.5-2.933-9.987-6.291-
20.077-9.742-27.706-1.719-3.8-3.515-7.114-5.364-9.517-1.725-2.242-4.031-4.398-6.885-4.398-2.855 0-5.16 2.156-6.886 4.398-1.849 2.403-3.645 5.717-5.364 9.517-3.451
7.629-6.809 17.719-9.742 27.706-2.94 10.01-5.48 20.01-7.284 27.5a662.824 662.824 0 0 0-2.682 11.6l-.147.672-.037.174-.01.044-.003.012v.003l2.444.526m0 0l-2.444-.525-
.339 1.578 1.299.959L210 85.475z"/>
<path class="rainbow" stroke="#000" stroke-width="5" d="M112.172 294.814c.162-.44.936-1.327 3.831-1.852 2.712-.491 6.499-.505 11.099-.061 9.159.885 20.929 3.525
32.386 7.041 11.461 3.517 22.442 7.861 30.052 12.086 3.835 2.128 6.632 4.129 8.23 5.859 1.691 1.831 1.355 2.513 1.273 2.66-3.557 6.449-6.703 10.517-10.829 13.38-
4.148 2.877-9.531 4.708-17.896 6.183-16.152 2.848-28.509-1.923-48.52-10.911-6.312-2.835-9.911-7.947-11.371-14.096-1.477-6.22-.747-13.496 1.745-20.289zM366.828
294.814c-.162-.44-.936-1.327-3.831-1.852-2.712-.491-6.499-.505-11.099-.061-9.159.885-20.929 3.525-32.386 7.041-11.461 3.517-22.442 7.861-30.052 12.086-3.835 2.128-
6.632 4.129-8.23 5.859-1.691 1.831-1.355 2.513-1.273 2.66 3.557 6.449 6.703 10.517 10.829 13.38 4.148 2.877 9.531 4.708 17.896 6.183 16.152 2.848 28.509-1.923 48.52-
10.911 6.312-2.835 9.911-7.947 11.371-14.096 1.477-6.22.747-13.496-1.745-20.289z"/>
<path fill="#000" fill-rule="evenodd" d="M142.729 141.367l52.56 22.575s-6.123 54.384-47.317 41.688c-23.433-7.223-5.243-64.263-5.243-64.263z" clip-rule="evenodd"/>
<path stroke="#000" stroke-linecap="round" stroke-width="5" d="M139.5 140.45l56 24"/>
<path fill="#fff" fill-rule="evenodd" d="M180 181.95c2.761 0 5-4.03 5-9 0-4.971-2.239-9-5-9s-5 4.029-5 9c0 4.97 2.239 9 5 9z" clip-rule="evenodd"/>
<path fill="#000" fill-rule="evenodd" d="M336.271 141.367l-52.56 22.575s6.123 54.384 47.317 41.688c23.433-7.223 5.243-64.263 5.243-64.263z" clip-rule="evenodd"/>
<path stroke="#000" stroke-linecap="round" stroke-width="5" d="M339.5 140.45l-56 24"/>
<path fill="#fff" fill-rule="evenodd" d="M332 181.95c-2.761 0-5-4.03-5-9 0-4.971 2.239-9 5-9s5 4.029 5 9c0 4.97-2.239 9-5 9z" clip-rule="evenodd"/>
<path fill="#000" fill-rule="evenodd" d="M231.498 213.403c2.378-2.079 13.645-1.791 16.729 0 3.084 1.791-3.754 9.199-8.09 9.199-4.335 0-11.017-7.119-8.639-9.199z"
clip-rule="evenodd"/>
<path stroke="#000" stroke-linecap="round" stroke-width="5" d="M247.756 262.45s-5.481-13.5-7.878-13.5c-2.398 0-7.878 13.5-7.878 13.5"/>
</svg>
<p class="magic">Magic</p>
<svg class="sparkle" viewBox="0.0 0.0 50.0 50.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10"
<clipPath id="p.0">
<path d="m0 0l50.0 0l0 50.0l-50.0 0l0 -50.0z" clip-rule="nonzero"></path>
</clipPath>
<g clip-path="url(#p.0)">
<path fill-opacity="0.0" d="m0 0l50.0 0l0 50.0l-50.0 0z" fill-rule="nonzero"></path>
<path fill="#fff" d="m0.62204725 25.0l20.068499 -4.323374l4.309454 -20.13332l4.309454 20.13332l20.068499 4.323374l-20.068499 4.323374l-4.309454 20.133318l-4.309454
-20.133318z" fill-rule="nonzero"></path>
<path stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m0.62204725 25.0l20.068499 -4.323374l4.309454 -20.13332l4.309454 20.13332l20.068499 4.323374l-
20.068499 4.323374l-4.309454 20.133318l-4.309454 -20.133318z" fill-rule="nonzero"></path>
</g>
</svg>
</div>
<script>
const magic = document.getElementById('magic')
magic.addEventListener('click', function(e) {
e.preventDefault
magic.classList.remove('animate')
void magic.offsetWidth
magic.classList.add('animate')
}, false)
</script>
<div>
<h3>blur effect</h3>
<svg height="100" width="300">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="9" />
</filter>
</defs>
<rect width="90" height="90" stroke="red" stroke-width="6" fill="yellow" filter="url(#f1)" />
</svg>
</div>
<div>
<h3>offset</h3>
<div class="grid_C">
<svg height="100" width="120">
<defs>
<filter id="filter" x="0" y="0">
<feGaussianBlur stdDeviation="5" />
<feOffset dx="5" dy="5" />
</filter>
</defs>
<rect width="90" height="90" fill="grey" filter="url(#filter)" />
<rect width="90" height="90" fill="yellow" stroke="black" />
</svg>
<svg height="120" width="120">
<defs>
<filter id="f2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)" />
</svg>
<svg height="120" width="120">
<defs>
<filter id="f3" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f3)" />
</svg>
<svg height="120" width="120">
<defs>
<filter id="f4" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feColorMatrix result = "matrixOut" in = "offOut" 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 result="blurOut" in="matrixOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f4)" />
</svg>
</div>
</div>
<svg width="1000" height="550">
<defs>
<linearGradient id="MyGradient" gradientUnits="userSpaceOnUse" x1="100"
y1="0" x2="300" y2="0">
<stop offset="0" style="stop-color:#000000" />
<stop offset=".33" style="stop-color:#ffffff" />
<stop offset=".67" style="stop-color:#ffff00" />
<stop offset="1" style="stop-color:#808080" />
</linearGradient>
<filter id="normal">
<feBlend mode="normal" in="SourceGraphic" />
</filter>
<filter id="multiply">
<feBlend mode="multiply" in="SourceGraphic" />
</filter>
<filter id="screen">
<feBlend mode="screen" in="SourceGraphic" />
</filter>
<filter id="darken">
<feBlend mode="darken" in="SourceGraphic" />
</filter>
<filter id="lighten">
<feBlend mode="lighten" in="SourceGraphic" />
</filter>
</defs>
<g style="enable-background:new">
<rect x="40" y="20" width="1000" height="450"
style="fill:url(#MyGradient)" />
<g style="font-size:75px;fill:#888888;fill-opacity:.6">
<text x="50" y="90" filter="url(#normal)">Normal</text>
<text x="50" y="180" filter="url(#multiply)">Multiply</text>
<text x="50" y="270" filter="url(#screen)">Screen</text>
<text x="50" y="360" filter="url(#darken)">Darken</text>
<text x="50" y="450" filter="url(#lighten)">Lighten</text>
</g>
</g>
</svg>
<div>
<h3>feGaussinaBlur</h3>
<svg width="400" height="200">
<defs>
<filter id="filter_1" filterUnits="userSpaceOnUse" x="0" y="0" width="300" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
</filter>
</defs>
<rect x="1" y="1" width="200" height="120" fill="darkgrey" />
<g filter="url(#filter_1)">
<path fill="none" stroke="#D90000" stroke-width="10" d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<text fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" x="52" y="76">SVG</text>
</g>
</svg>
</div>
<div>
<h3>feOffset</h3>
<svg width="400" height="200">
<defs>
<filter id="filter_2" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
<feOffset in="blur" dx="4" dy="4" result="offsetBlur" />
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#cccccc" />
<g filter="url(#filter_2)">
<path fill="none" stroke="#D90000" stroke-width="10" d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<text fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" x="52" y="76">SVG</text>
</g>
</svg>
</div>
<div>
<h3>feSpacularLighting</h3>
<svg width="400" height="200">
<defs>
<filter id="filter_3" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
<feOffset in="blur" dx="4" dy="4" result="offsetBlur" />
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#cccccc" />
<g filter="url(#filter_3)">
<path fill="none" stroke="#D90000" stroke-width="10" d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<text fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" x="52" y="76">SVG</text>
</g>
</svg>
</div>
<div>
<h3>fePointLight</h3>
<svg width="400" height="200">
<defs>
<filter id="filter_4" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#cccccc" />
<g filter="url(#filter_4)">
<path fill="none" stroke="#D90000" stroke-width="10" d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<text fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" x="52" y="76">SVG</text>
</g>
</svg>
</div>
<div>
<h3>feComposite</h3>
<svg width="400" height="200">
<defs>
<filter id="filter_5" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
<feOffset in="blur" dx="4" dy="4" result="offsetBlur" />
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint" />
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#cccccc" />
<g filter="url(#filter_5)">
<path fill="none" stroke="#D90000" stroke-width="10" d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<text fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" x="52" y="76">SVG</text>
</g>
</svg>
</div>
<div>
<h3>feMerge</h3>
<svg width="400" height="200">
<defs>
<filter id="filter_6" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
<feOffset in="blur" dx="4" dy="4" result="offsetBlur" />
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint" />
<feMerge>
<feMergeNode in="offsetBlur" />
<feMergeNode in="litPaint" />
</feMerge>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#cccccc" />
<g filter="url(#filter_6)">
<path fill="none" stroke="#D90000" stroke-width="10" d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<text fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" x="52" y="76">SVG</text>
</g>
</svg>
</div>
<div>
<h3>an ellipse with a horizontal linear gradient from yellow to red</h3>
<svg height="150" width="300">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="195" ry="65" fill="url(#grad1)" />
</svg>
</div>
<div>
<h3>an ellipse with a vertical linear gradient from yellow to red</h3>
<svg height="150" width="300">
<defs>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="195" ry="65" fill="url(#grad2)" />
</svg>
</div>
<div>
<h3>an ellipse with a horizontal linear gradient from yellow to red, and a text</h3>
<svg height="150" width="400">
<defs>
<linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="185" ry="55" fill="url(#grad3)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">SVG</text>
</svg>
</div>
<div>
<h3>an ellipse with a radial gradient from white to blue</h3>
<svg height="150" width="500">
<defs>
<radialGradient id="grad4" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="185" ry="55" fill="url(#grad4)" />
</svg>
</div>
<svg height="150" width="500">
<defs>
<radialGradient id="grad5" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad5)" />
</svg>
The SVG <pattern> element allows to define patterns inside of SVG markup and use those patterns as a fill. The basic process for patterns is as follows:
- define a <pattern> inside the SVG;
- define the shapes inside the pattern;
- use the shapes;
- create a new shape and fill it with the pattern
The <pattern> element should be put in the <defs> section of the SVG file.
<div>
<h3>circle pattern -01</h3>
<svg width="300" height="300">
<defs>
<linearGradient id="Gradient1">
<stop offset="5%" stop-color="white"/>
<stop offset="95%" stop-color="blue"/>
</linearGradient>
<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
<stop offset="5%" stop-color="red"/>
<stop offset="95%" stop-color="orange"/>
</linearGradient>
<pattern id="Pattern" x="0" y="0" width=".1" height=".1">
<rect x="0" y="0" width="70" height="70" fill="skyblue"/>
<rect x="0" y="0" width="35" height="35" fill="url(#Gradient2)"/>
<circle cx="25" cy="25" r="25" fill="url(#Gradient1)" fill-opacity="0.5"/>
</pattern>
</defs>
<rect fill="url(#Pattern)" stroke="green" stroke-width="4" width="600" height="600"/>
</svg>
</div>
<div>
<h3>circle pattern -02</h3>
<svg width="80%" height="80%">
<mask maskUnits="userSpaceOnUse" id="fade">
<linearGradient id="gradient-a" x1="0" y1="0" x2="0" y2="100%">
<stop offset ="0" style="stop-color: #FFFFFF" />
<stop offset ="1" style="stop-color: #000000" />
</linearGradient>
<rect fill="url(#gradient-a)" width="100%" height="100%" />
</mask>
<pattern id="pattern-circles" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
<circle id="one" mask="url(#fade)" cx="20" cy="20" r="20" />
</pattern>
<!-- The canvas with our applied pattern -->
<rect x="0" y="0" width="90%" height="90%" fill="url(#pattern-circles)" />
</svg>
<style>
circle#one{fill:green;}
</style>
</div>
<div>
<h3>checkerbord pattern</h3>
<svg width="100%" height="100%">
<pattern id="pattern-checkers" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse" >
<rect class="checker" x="0" width="100" height="100" y="0"/>
<rect class="checker" x="100" width="100" height="100" y="100"/>
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-checkers)" />
</svg>
<style>
.checker{fill:blue;}
</style>
</div>
<div>
<h3>hexagon pattern</h3>
<svg width="100%" height="100%" >
<pattern id="pattern-hex" x="0" y="0" width="112" height="190" patternUnits="userSpaceOnUse" viewBox="56 -254 112 190">
<g id="hexagon">
<path class="path-one" d="M168-127.1c0.5,0,1,0.1,1.3,0.3l53.4,30.5c0.7,0.4,1.3,1.4,1.3,2.2v61c0,0.8-0.6,1.8-1.3,2.2L169.3-0.3
c-0.7,0.4-1.9,0.4-2.6,0l-53.4-30.5c-0.7-0.4-1.3-1.4-1.3-2.2v-61c0-0.8,0.6-1.8,1.3-2.2l53.4-30.5C167-127,167.5-127.1,168-127.1
L168-127.1z"/>
<path class="path-one" d="M112-222.5c0.5,0,1,0.1,1.3,0.3l53.4,30.5c0.7,0.4,1.3,1.4,1.3,2.2v61c0,0.8-0.6,1.8-1.3,2.2l-53.4,30.5
c-0.7,0.4-1.9,0.4-2.6,0l-53.4-30.5c-0.7-0.4-1.3-1.4-1.3-2.2v-61c0-0.8,0.6-1.8,1.3-2.2l53.4-30.5
C111-222.4,111.5-222.5,112-222.5L112-222.5z"/>
<path class="path-one" d="M168-317.8c0.5,0,1,0.1,1.3,0.3l53.4,30.5c0.7,0.4,1.3,1.4,1.3,2.2v61c0,0.8-0.6,1.8-1.3,2.2L169.3-191
c-0.7,0.4-1.9,0.4-2.6,0l-53.4-30.5c-0.7-0.4-1.3-1.4-1.3-2.2v-61c0-0.8,0.6-1.8,1.3-2.2l53.4-30.5
C167-317.7,167.5-317.8,168-317.8L168-317.8z"/>
</g>
</pattern>
<rect x="0" y="0" width="90%" height="90%" fill="url(#pattern-hex)" />
</svg>
<style>
path.path-one {fill: #fff; stroke: orange; stroke-width: 12;}
</style>
</div>
<div>
<h3>cube pattern</h3>
<svg width="100%" height="80%">
<pattern id="pattern-cubes" x="0" y="126" patternUnits="userSpaceOnUse" width="100" height="100" viewBox="0 0 10 16">
<g id="cube">
<path class="left-shade" d="M0 0l5 3v5l-5 -3z" />
<path class="right-shade" d="M10 0l-5 3v5l5 -3z" />
</g>
<use x="5" y="8" href="#cube" />
<use x="-5" y="8" href="#cube" />
</pattern>
<rect x="0" y="0" width="90%" height="90%" fill="url(#pattern-cubes)" />
</svg>
<style>
.left-shade {fill: green;}
.right-shade {fill: lighten(green, 50%);}
</style>
</div>
<div>
<h3>triangle pattern</h3>
<svg width="400" height="400">
<defs>
<pattern id="pattern-triangle" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50" viewBox="0 0 4 4">
<path d="M 0 0 L 3 0 L 1.5 3 z" fill="blue" stroke="green" stroke-width=".1"/>
</pattern> 1
</defs>
<g>
<text x="15" y="15" >using triangle pattern</text>
<rect x="20" y="25" width="650" height="325" stroke="red" stroke-width="3" fill="url(#pattern-triangle)" />
</g>
</svg>
</div>
<div>
<h3>triangle pattern</h3>
<svg width="400" height="400">
<defs>
<pattern id="pattern-triangle1" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20" viewBox="0 0 4 4">
<path d="M 0 0 L 3 0 L 1.5 3 z" fill="blue" stroke="green" stroke-width=".1"/>
</pattern> 1
</defs>
<g>
<text x="5" y="15" >using triangle pattern</text>
<rect x="20" y="25" width="600" height="350" stroke="red" stroke-width="3" fill="url(#pattern-triangle1)" />
</g>
</svg>
</div>
<div>
<h3>chevron pattern</h3>
<svg width="90%" height="80%">
<pattern id="pattern-chevron" x="0" y="0" patternUnits="userSpaceOnUse" width="30" height="48" viewBox="0 0 10 18">
<g id="chevron">
<path class="left" d="M0 0l5 3v5l-5 -3z" />
<path class="right" d="M10 0l-5 3v5l5 -3" />
</g>
<use x="0" y="9" href="#chevron" />
</pattern>
<rect x="0" y="0" width="97%" height="97%" fill="url(#pattern-chevron)" />
</svg>
<style>
path.left, path.right{fill: orange;}
</style>
</div>
<div>
<h3>simple pattern</h3>
<svg width="400" height="400" viewbox="0 0 200 200">
<path d="M 0 0 Q 35 130 65 65 T 130 130" style="stroke: red; fill: burlywood;"/>
<path d="M 0 0 h130 v130 h-130 z" style="stroke: blue; stroke-width:2; fill: none;"/>
</svg>
<svg width="400" height="400" viewbox="0 0 200 200">
<pattern id="simple" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<path d="M 2 2 Q 7 20 10 10 T 20 20" style="stroke: red; fill: yellow;"></path>
</pattern>
<path d="M 0 0 h130 v130 h-130 z" fill="url(#simple)" stroke="blue" stroke-width="2";></path>
</svg>
</div>
<div>
<h3>using patternUnits attribute</h3>
<svg width="400" height="400">
<defs>
<pattern id="Pattern_A" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20" viewBox="0 0 10 10" >
<path d="M 0 0 h5 v5 h-5 z" style="stroke: black; fill: yellow;"/>
</pattern>
</defs>
<rect fill="url(#Pattern_A)" stroke="red" stroke-width="3" x="10" y="10" width="400" height="400" />
</svg>
</div>
<div>
<h3>using patternContentUnits attribute</h3>
<svg width="400" height="400">
<defs>
<pattern id="circle" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" x="0" y="0" width="36" height="36">
<circle cx="12" cy="12" r="12" style="fill: yellow; stroke: red; stroke-width:3; "/>
</pattern>
</defs>
<rect x="10" y="10" width="350" height="350" style="fill: url(#circle); stroke: black; stroke-width:4;"/>
</svg>
</div>
<div>
<h3>using patternTransform attribute</h3>
<svg width="360" height="360">
<defs>
<pattern id="rectangle" patternUnits="userSpaceOnUse" patternTransform = "rotate(45)" x="0" y="0" width="36" height="36">
<path d="M 2 2 h20 v20 h-20 z" style="stroke: yellow; stroke-width:4; fill: black;"/>
</pattern>
</defs>
<rect x="10" y="10" width="350" height="350" style="fill: url(#rectangle); stroke: red;" stroke-width="5"/>
</svg>
</div>
<div>
<h3>nested patterns</h3>
<svg width="400" height="400">
<defs>
<pattern id="tile" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10">
<path d="M 0 0 Q 3 10 5 5 T 10 10" style="stroke: red; fill: lime;"/>
</pattern>
<pattern id="nested" patternUnits="userSpaceOnUse" x="5" y="5" width="36" height="36">
<circle cx="12" cy="12" r="12" style="fill: url(#tile); stroke: black;"/>
</pattern>
</defs>
<rect x="10" y="10" width="550" height="350" style="fill: url(#nested); stroke: blue;stroke-width:14;"/>
</svg>
</div>
<div>
<h3>alternating pattern</h3>
<svg viewBox="0 0 400 200" width="350" height="350">
<pattern id="p" width="100" height="100" patternUnits="userSpaceOnUse">
<circle fill="blue" cx="50" cy="50" r="25" />
<circle r="25" /><!-- top left -->
<circle cx="100" r="25" /><!-- top right -->
<circle cy="100" r="25" /><!-- bottom left -->
<circle cx="100" cy="100" r="25" /><!-- bottom right -->
</pattern>
<rect fill="url(#p)" width="100%" height="100%"/>
</svg>
</div>
<div>
<h3>pattern with hexagonal tiles</h3>
<svg viewBox="0 0 800 240">
<pattern id="pa" width="180" height="104" patternUnits="userSpaceOnUse">
<g fill="none" stroke="#808" stroke-width="15">
<path id="a" d="M90 0H30L0 52l30 52h60l30-52z"/>
<path d="M120 52h60"/>
<use href="#a" x="180"/>
</g>
</pattern>
<rect fill="url(#pa)" width="100%" height="100%"></rect>
</svg>
</div>
<div>
<h3>pattern with hexagonal tiles</h3>
<svg viewBox="0 0 1800 540">
<pattern id="pttn" width="180" height="104" patternUnits="userSpaceOnUse">
<g fill="none" stroke="#808" stroke-width="15">
<path d="M120 0H60L30 52l30 52h60l30-52z"/>
<path d="M150 52h30"/>
<path d="M0 52h30"/>
</g>
</pattern>
<rect fill="url(#pttn)" width="100%" height="100%"></rect>
</svg>
</div>
<div>
<h3>doodle pattern</h3>
<svg viewBox='0 0 500 600'>
<rect fill='#46315d' width='800' height='600' />
<pattern id='c' width='800' height='600' patternUnits='userSpaceOnUse'patternTransform='scale(.4)'>
<g fill='none' stroke='#735098' stroke-width='30' stroke-linecap='round'>
<path
d='M109 57c0 41 20 60 60 60M439 128c40-6 56-28 51-68M523 138c35 21 61 14 82-20M405 294c-23 34-17 61 16 84M445 328c38-15 50-40 36-78M511 347c37-17 47-43 30-80M626
391c26-31 23-59-8-84M581 359c-32 25-35 52-10 84M752 415c3-40-15-61-56-64M252 139c-40 0-60 20-60 60M762 545c-4-40-25-58-66-54M584 562c40 0 60-19 60-60M624 179c-37
18-46 44-28 80M167 247c-30 27-32 54-5 85M425 241c-38-12-63 1-74 40M343 366c-9-40-32-55-72-46M622 445c39 12 64-1 76-40M512 458c15 37 40 49 78 34M111 349c-39 11-53
34-43 74M189 385c4 41 26 58 66 54M 314 442 c0-41-20-60-60-60M90 478c38-13 50-38 36-76M682 281c28 29 56 29 84 0M760 113c-27 29-26 57 4 84M245 255c-36 18-44 45-26
80M275 33c-40-1-60 17-62 58M325 149c0-40-19-60-60-60M714 89c-39 11-53 35-42 74M727 243c-25-32-53-35-84-10M345 197c38-13 50-38 36-76M524 214c-20-36-46-43-82-24M81
225c41 0 60-19 60-60M300 264c5-41-12-62-52-67M162 548c-28-29-55-30-84-2M496 398c-38 13-51 37-38 76M356 543c-8-40-30-55-70-48M242 529c-11-39-35-53-74-42M378 413c-17
37-7 63 30 80M410 552c38 15 63 3 78-34' />
<path id='a'
d='M5 325c40 8 63-8 70-48M39 478c-33 24-37 51-13 84M-23 459c36-18 45-44 26-80M46 184c-36 18-45 44-28 80M-29 53c25 31 53 34 84 9M90 157c-23-34-50-39-84-16M-17-9c27
30 54 32 84 5M-17 591c27 30 54 32 84 5' />
<path id='b'
d='M332-12c-13 39 0 63 38 76M578 13c-35 21-41 48-20 82M473 9c41 0 60-20 60-60M423 78c15-38 4-63-34-78M698 39c31-26 33-54 6-84M664-11c-36 19-44 46-25 82M163 65c11-39
-3-63-42-74M208-26c36 19 62 12 82-24' />
<use xlink:href='#a' x='800' />
<use xlink:href='#b' y='600' />
</g>
</pattern>
<rect fill='url(#c)' width='100%' height='100%' />
</svg>
</div>
<div>
<h3>brick pattern</h3>
<svg viewBox='0 0 500 300'>
<pattern id="pattern" width="99" height="70" patternUnits="userSpaceOnUse">
<path d="m0 67h96V35H0V32h47V0h3v32h49V0H0"/>
</pattern>
<filter id="filter">
<feDropShadow dx="0" dy="0" result="s"/>
<feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="9"/>
<feComposite in="s" operator="arithmetic" k2=".7" k3=".35"/>
<feDiffuseLighting lighting-color="#f84" surfaceScale="9">
<feDistantLight azimuth="225" elevation="9"/>
</feDiffuseLighting>
</filter>
<rect width="100%" height="100%" fill="url(#pattern)" filter="url(#filter)"/>
</svg>
</div>
<div>
<h3>pie design pattern</h3>
<svg width="90%" height="90%" viewBox="0 0 550 650" id="one">
<defs>
<pattern id="pie-design" x="0" y="0" width="60" height="70" patternUnits="userSpaceOnUse">
<path fill="crimson" d="M29 58.58l7.38-7.39A30.95 30.95 0 0 1 29 37.84a30.95 30.95 0 0 1-7.38 13.36l7.37 7.38zm1.4 1.41l.01.01h-2.84l-7.37-7.38A30.95 30.95 0 0 1 6.84 60H0v-1.02a28.9
28.9 0 0 0 18.79-7.78L0 32.41v-4.84L18.78 8.79A28.9 28.9 0 0 0 0 1.02V0h6.84a30.95 30.95 0 0 1 13.35 7.38L27.57 0h2.84l7.39 7.38A30.95 30.95 0 0 1 51.16 0H60v27.58-.01V60h-8.84a30.95
30.95 0 0 1-13.37-7.4L30.4 60zM29 1.41l-7.4 7.38A30.95 30.95 0 0 1 29 22.16 30.95 30.95 0 0 1 36.38 8.8L29 1.4zM58 1A28.9 28.9 0 0 0 39.2 8.8L58 27.58V1.02zm-20.2 9.2A28.9 28.9 0 0 0
30.02 29h26.56L37.8 10.21zM30.02 31a28.9 28.9 0 0 0 7.77 18.79l18.79-18.79H30.02zm9.18 20.2A28.9 28.9 0 0 0 58 59V32.4L39.2 51.19zm-19-1.4a28.9 28.9 0 0 0 7.78-18.8H1.
41l18.8 18.8zm7.78-20.8A28.9 28.9 0 0 0 20.2 10.2L1.41 29h26.57z">
</path>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pie-design)" />
</svg>
<style>
#one{background-color:greenyellow; }
</style>
</div>
<div>
<h3>pie design pattern</h3>
<svg width="90%" height="90%" viewBox="0 0 550 650" id="one">
<defs>
<pattern id="pie-design1" x="0" y="0" width="30" height="40" patternUnits="userSpaceOnUse">
<path fill="crimson" d="M29 58.58l7.38-7.39A30.95 30.95 0 0 1 29 37.84a30.95 30.95 0 0 1-7.38 13.36l7.37 7.38zm1.4 1.41l.01.01h-2.84l-7.37-7.38A30.95 30.95 0 0 1 6.84 60H0v-1.02a28.9
28.9 0 0 0 18.79-7.78L0 32.41v-4.84L18.78 8.79A28.9 28.9 0 0 0 0 1.02V0h6.84a30.95 30.95 0 0 1 13.35 7.38L27.57 0h2.84l7.39 7.38A30.95 30.95 0 0 1 51.16 0H60v27.58-.01V60h-8.84a30.95
30.95 0 0 1-13.37-7.4L30.4 60zM29 1.41l-7.4 7.38A30.95 30.95 0 0 1 29 22.16 30.95 30.95 0 0 1 36.38 8.8L29 1.4zM58 1A28.9 28.9 0 0 0 39.2 8.8L58 27.58V1.02zm-20.2 9.2A28.9 28.9 0 0 0 30.02
29h26.56L37.8 10.21zM30.02 31a28.9 28.9 0 0 0 7.77 18.79l18.79-18.79H30.02zm9.18 20.2A28.9 28.9 0 0 0 58 59V32.4L39.2 51.19zm-19-1.4a28.9 28.9 0 0 0 7.78-18.8H1.41l18.8
18.8zm7.78-20.8A28.9 28.9 0 0 0 20.2 10.2L1.41 29h26.57z">
</path>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pie-design1)" />
</svg>
<style>
#one{background-color:greenyellow; }
</style>
</div>
<div>
<h3>icon 1</h3>
<svg class="icon icon-tabler icon-tabler-components-off" width="240" height="240" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="skyblue"/>
<path d="M3 12l3 3l3 -3l-3 -3z" />
<path d="M18.5 14.5l2.5 -2.5l-3 -3l-2.5 2.5" />
<path d="M12.499 8.501l2.501 -2.501l-3 -3l-2.5 2.5" />
<path d="M9 18l3 3l3 -3l-3 -3z" />
<path d="M3 3l18 18" />
</svg>
</div>
<div>
<h3>icon 2</h3>
<svg width="240" height="240" viewBox="0 0 24 24" fill="lightyellow" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-coffee">
<path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
<path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
<line x1="6" y1="1" x2="6" y2="4"></line>
<line x1="10" y1="1" x2="10" y2="4"></line>
<line x1="14" y1="1" x2="14" y2="4"></line>
</svg>
</div>
<div>
<h3>icon 3</h3>
<svg width="320" height="320" viewBox="0 0 32 32">
<path d="M6.188 9.958c2.797 0.708 6.375 1.068 10.677 1.068 4.401 0 7.896-0.359 10.682-1.068 2.974-0.693 4.401-1.625 4.401-2.505 0-0.625-0.641-1.24-1.802-1.708 0.266 0.177 0.469 0.469
0.469 0.786 0 0.896-1.349 1.63-4.052 2.24-2.51 0.547-5.708 0.938-9.604 0.938-3.76 0-7.104-0.391-9.521-0.906-2.599-0.641-3.958-1.333-3.958-2.24 0-0.375 0.172-0.698 0.693-1.068-1.625 0.625-2.505
1.156-2.505 1.958 0.094 0.906 1.547 1.812 4.521 2.505zM12.438 7.078c3.031-0.266 3.911-2.214 7.458-2.531 1.745-0.135 2.849 0.214 2.969 0.828 0.109 0.573-0.76 0.958-1.813 1.036-1.453
0.151-2.052-0.37-2.172-0.865-1.078 0.12-1.255 0.573-1.198 0.891 0.12 0.615 1.422 1.229 3.667 1.016 2.531-0.198 3.385-1.198 3.172-2.198-0.266-1.307-2.214-2.401-5.708-2.068-4.479 0.401-4.453
2.479-7.505 2.734-1.255 0.12-1.948-0.177-2.068-0.667-0.078-0.495 0.531-0.734 1.255-0.786 0.667-0.068 1.479 0.052 1.865 0.266 0.281-0.146 0.375-0.297 0.349-0.469-0.135-0.464-1.057-0.667
-2.214-0.583-2.266 0.198-2.266 1.214-2.188 1.667 0.224 1.156 1.974 1.932 4.13 1.729zM27.667 12.198c-2.802 0.656-6.375 1.083-10.682 1.083-4.396 0-7.984-0.453-10.771-1.068-2.505-0.641-3.839
-1.349-4.307-2.078 0.24 1.635 0.656 3.224 1.188 4.729-0.641 0.401-1.214 0.896-1.734 1.563-0.953 1.161-1.438 2.635-1.359 4.135 0.099 1.38 0.786 2.656 1.896 3.49 1.156 0.906 2.411 1.177
3.839 0.906 0.547-0.094 1.161-0.37 1.719-0.557-1.172 0-2.161-0.375-3.146-1.161-1.083-0.75-1.802-1.922-1.99-3.224-0.266-1.255 0-2.417 0.708-3.443 0.161-0.198 0.333-0.375 0.521-0.531 0.401 0.974
0.828 1.932 1.307 2.823 1.078 1.641 2.161 3.068 3.24 4.615 0.469 0.906 0.771 1.802 0.984 2.693 0.724 1 1.776 1.708 2.974 2 1.536 0.536 3.135 0.776 4.776 0.682h0.172c1.667 0.073 3.339-0.161
4.922-0.693 1.146-0.339 2.156-1.036 2.88-1.99h0.094c0.172-0.891 0.464-1.786 0.891-2.693 1.068-1.557 2.161-2.974 3.229-4.615 1.469-2.719 2.479-5.667 2.984-8.719-0.573 0.802-1.922 1.505-4.333
2.052z"/>
</svg>
</div>
The h/H and v/V commands draw lines horizontally and vertically. The lowercase letter specifies relative coordinates, while the uppercase letter specifies absolute coordinates.
<svg height="200" width="300" viewBox="0 0 16 16">
<path
stroke="#000"
stroke-width="0.2"
fill="none"
d="M 2 2 v 4 h 8 v 4 h -3 v 4 h 8"
/>
</svg>
<svg height="200" width="300" viewBox="0 0 16 16">
<path
stroke="#000"
stroke-width="0.4"
fill="none"
d="M 1 1 V 4 h -8 v 4 h -3 v 4 h -8"
/>
</svg>
The CSS properties outline and box-shadow only apply to the bounding box of the shape or SVG, and so both are great solutions only for squares and rectangles. They also allow flexible colors using custom properties. Moreover, with box-shadow, we have to make sure that each shape has its own SVG as we can't apply box-shadow directly to the shapes.
<div class="grid_B spec">
<h5>With outline</h5>
<svg width="100" height="100" viewBox="500 0 100 100" overflow="visible" class="css-outline">
<polygon points="50 0, 100 20, 100 80, 50 100, 0 80, 0 20z" fill="pink" stroke="red"/>
<rect x="200" width="100" height="100" fill="green" stroke="orange" />
<circle cx="450" cy="50" r="50" fill="burlywood" stroke="skyblue" />
</svg><br>
<h5>With box-shadow</h5>
<div class="grid_B">
<svg width="100" height="100" viewBox="0 0 100 100" overflow="visible" class="css-boxshadow">
<polygon points="50 0, 100 20, 100 80, 50 100, 0 80, 0 20z" fill="pink" stroke="red"/>
</svg>
<svg width="100" height="100" viewBox="0 0 100 100" overflow="visible" class="css-boxshadow">
<rect width="100" height="100" fill="green" stroke="prange" />
</svg>
<svg width="100" height="100" viewBox="0 0 100 100" overflow="visible" class="css-boxshadow">
<circle cx="50" cy="50" r="50" fill="burlywood" stroke="skyblue" />
</svg>
</div>
</div>
<style>
svg {margin-left: 1vw; }
.css-outline circle, .css-outline rect, .css-outline polygon { outline: 0.5vw solid darkgrey; outline-offset: 0.5vw; }
.css-boxshadow, .css-boxshadow circle, .css-boxshadow rect, .css-boxshadow polygon {box-shadow: 0 0 0 0.3vw antiquewhite, 0 0 0 0.4vw red;}
</style>
SVG radial gradients only work on circles ☺️. We can directly apply the gradient on the stroke, but it's better to use variables as we have to declare the colors many times in the code.
<h5 class="spec">With gradients</h5>
<svg width="90" height="100" viewBox="0 0 100 100" overflow="visible" class="gradients">
<defs>
<radialGradient id="grad">
<stop offset="97%" stop-color="red"/>
<stop offset="97%" stop-color="var(--bg)"/>
<stop offset="100%" stop-color="var(--bg)"/>
<stop offset="100%" stop-color="red"/>
</radialGradient>
</defs>
<polygon points="50 0, 100 20, 100 80, 50 100, 0 80, 0 20z" fill="pink" stroke="url(#grad)" />
<rect x="200" width="100" height="100" fill="pink" stroke="url(#grad)" />
<circle stroke="url(#grad)" cx="50" cy="50" r="50" transform="translate(400)" />
</svg>
<style>
:root{--bg: antiquewhite;}
svg { margin: 1vw; }
.gradients { fill: pink; stroke-width: 9; margin-left: -15vw;}
</style>
Each shape must have in its own <svg> since the filter won't apply directly to the shapes.
<div class="grid_B">
<svg width="100" height="100" viewBox="0 0 100 100" overflow="visible" class="css-filter">
<polygon points="50 0, 100 20, 100 80, 50 100, 0 80, 0 20z" fill="pink" stroke="red"/>
</svg>
<svg width="100" height="100" viewBox="0 0 100 100" overflow="visible" class="css-filter">
<rect width="100" height="100" fill="pink" stroke="red" />
</svg>
<svg width="100" height="100" viewBox="0 0 100 100" overflow="visible" class="css-filter">
<circle cx="50" cy="50" r="50" fill="pink" stroke="red" />
</svg>
</div>
<style>
svg {margin: 1vw;}
.css-filter {filter: drop-shadow(0.2vw 0 0 antiquewhite) drop-shadow(-0.2vw 0 0 antiquewhite) drop-shadow(0 0.2vw 0 antiquewhite) drop-shadow(0 -0.2vw 0 antiquewhite) drop-shadow(0.1vw 0 0 red)
drop-shadow(-0.1vw 0 0 red) drop-shadow(0 -0.1vw 0 red) drop-shadow(0 0.1vw 0 red);}
</style>
This is a very flexible solution. We can create a filter and add it to the shapes through SVG's "filter attribute". The complicated part here is the filter itself. We'll need three paintings, one for the outside border, one for the background flood, and the last one to paint the shape on the front.
<h4>with SVG filters</h4>
<svg width="90" height="100" viewBox="0 0 100 100" overflow="visible" style="margin-left: -55vw;">
<defs>
<filter id='inset' x='-50%' y='-50%' width='200%' height='200%'>
<feFlood flood-color="red" result="outside-color"/>
<feMorphology in="SourceAlpha" operator="dilate" radius="1"/>
<feComposite in="outside-color" operator="in" result="outside-stroke"/>
<feFlood flood-color="antiquewhite" result="inside-color"/>
<feComposite in2="SourceAlpha" operator="in" result="inside-stroke"/>
<feMorphology in="SourceAlpha" radius="2"/>
<feComposite in="SourceGraphic" operator="in" result="fill-area"/>
<feMerge>
<feMergeNode in="outside-stroke"/>
<feMergeNode in="inside-stroke"/>
<feMergeNode in="fill-area"/>
</feMerge>
</filter>
</defs>
<polygon points="50 0, 100 20, 100 80, 50 100, 0 80, 0 20z" fill="pink" stroke="red" stroke-width="4" filter="url(#inset)"/>
<rect x="200" width="100" height="100" fill="green" stroke="orange" stroke-width="3" filter="url(#inset)" />
<circle cx="50" cy="50" r="50" transform="translate(400)" fill="burlywood" stroke="skyblue" stroke-width="4" filter="url(#inset)" />
</svg>
<h4>Simpler</h4>
<svg viewBox="0 0 100 100" width="90" height="100" overflow="visible" style="margin-left: -55vw;">
<filter id="outline">
<feMorphology in="SourceAlpha" result="expanded" operator="dilate" radius="1"/>
<feFlood flood-color="red"/>
<feComposite in2="expanded" operator="in"/>
<feComposite in="SourceGraphic"/>
</filter>
<polygon points="50 0, 100 20, 100 80, 50 100, 0 80, 0 20z" fill="pink" stroke="antiquewhite" stroke-width="4" filter="url(#outline)"/>
<rect x="200" width="100" height="100" fill="green" stroke="orange" stroke-width="3" filter="url(#outline)" />
<circle cx="50" cy="50" r="50" transform="translate(400)" fill="burlywood" stroke="skyblue" stroke-width="4" filter="url(#outline)" />
</svg>
<style>
svg { margin: 1vw;}
</style>
option 1: transforms: this solution requires transforms. We place one figure over the other, where the main figure has a fill color and a stroke color, and the other figure has no fill, a red stroke, and is scaled and repositioned to the center. We define our shapes on the <defs>. The trick is to translate half of the viewBox to the negative space so that, when we scale them, we can do it from the center of the figure.
<svg width="100" height="100" viewBox="0 0 100 100" overflow="visible" style="margin-left: -15vw;">
<defs>
<polygon id="polygon1" points="50 0, 100 20, 100 80, 50 100, 0 80, 0 20z" transform="translate(-50, -50)" />
<rect id="rect" width="100" height="100" transform="translate(-50, -50)" />
<circle id="circ" cx="50" cy="50" r="50" transform="translate(-50, -50)" />
</defs>
<g transform="translate(50, 50)">
<use xlink:href="#polygon1" class="outside" transform="scale(1.1)" />
<use xlink:href="#polygon1" class="inside" />
</g>
<g transform="translate(200, 50)">
<use xlink:href="#rect" class="outside" transform="scale(1.1)" />
<use xlink:href="#rect" class="inside" />
</g>
<g transform="translate(350, 50)">
<use xlink:href="#circ" class="outside" transform="scale(1.1)" />
<use xlink:href="#circ" class="inside" />
</g>
</svg>
<style>
svg { margin: 1vw;}
.outside {fill: none;stroke: red;}
.inside {fill: pink; stroke: red;}
</style>
option 2: use: it requires defining the shapes once and referring to them twice using <use>. This time the main shape has a bigger stroke. The second shape has half the stroke of the main shape, no fill, and a stroke matching the background color.
<svg width="100" height="100" viewBox="0 0 100 100" overflow="visible" style="margin-left: -15vw;">
<defs>
<polygon id="polygon" points="50 0, 100 20, 100 80, 50 100, 0 80, 0 20z" />
<rect id="rect" width="100" height="100" />
<circle id="circ" cx="50" cy="50" r="50" />
</defs>
<g>
<use xlink:href="#polygon" fill="pink" stroke="red" stroke-width="4" />
<use xlink:href="#polygon" fill="none" stroke="antiquewhite" stroke-width="2" />
</g>
<g transform="translate(200)">
<use xlink:href="#rect" fill="pink" stroke="red" stroke-width="4" />
<use xlink:href="#rect" fill="none" stroke="antiquewhite" stroke-width="2" />
</g>
<g transform="translate(400)">
<use xlink:href="#circ" fill="pink" stroke="red" stroke-width="4" />
<use xlink:href="#circ" fill="none" stroke="antiquewhite" stroke-width="2" />
</g>
</svg>
<style>
svg { margin: 1vw;}
</style>
<div class="timeline">
<svg id="grid1" width="400" height="400" viewBox="0 0 615 1200" fill="none">
<path d="M395 0V0C395 66.2742 341.274 120 275 120H140C73.7258 120 20 173.726 20 240V240" stroke="black" stroke-width="8" fill="black"/>
<path d="M395 480V480C395 413.726 341.274 360 275 360H140C73.7258 360 20 306.274 20 240V240" stroke="yellow" stroke-width="8" fill="yellow"/>
<path d="M395 480V480C395 546.274 341.274 600 275 600H140C73.7258 600 20 653.726 20 720V720" stroke="red" stroke-width="8" fill="red"/>
<path d="M20 720V720C20 786.274 73.7258 840 140 840H275C341.274 840 395 893.726 395 960V960" stroke="yellow" stroke-width="4" fill="yellow"/>
<path d="M395 960V960C395 1026.27 341.274 1080 275 1080H140C73.7258 1080 20 1133.73 20 1200V1200" stroke="black" stroke-width="8" fill="black"/>
</svg>
</div>
<style>
.timeline{display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(10, 1fr); }
svg#grid1 {width: 100%; height: auto; grid-column: 1/-1; grid-row: 1/11;}
</style>
<div class="spec wrapper">
<svg viewBox="0 0 500 200" preserveAspectRatio="none">
<path d="M0.00,92.27 C216.83,192.92 304.30,8.39 500.00,109.03 L500.00,0.00 L0.00,0.00 Z"></path>
</svg>
<div class="grid-a">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</div>
<style>
.wrapper {position:relative;}
.wrapper svg{position:absolute; top:0; right: 0; bottom: 0; left: 0; fill:red;}
.grid-a{display: grid; grid-template-rows: 5vw 5vw 5vw 5vw; grid-template-columns: 100%; gap: 1vw; position: relative;}
.item {background-color: rgba(0,0,0,0.5);}
</style>
<svg width="100%" height="100%">
<defs>
<pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
<path d="M 8 0 L 0 0 0 8" fill="none" stroke="red" stroke-width="0.5"/>
</pattern>
<pattern id="grid-b" width="80" height="80" patternUnits="userSpaceOnUse">
<rect width="80" height="80" fill="url(#smallGrid)"/>
<path d="M 80 0 L 0 0 0 80" fill="none" stroke="blue" stroke-width="1"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid-b)" />
</svg>
<div style="width:400px;height:300px">
<svg width="100%" height="100%">
<defs>
<pattern id="smallGrid-c" width="8" height="8" patternUnits="userSpaceOnUse">
<path d="M 8 0 L 0 0 0 8" fill="none" stroke="darkblue" stroke-width="0.5"/>
</pattern>
<pattern id="grid-c" width="80" height="80" patternUnits="userSpaceOnUse">
<rect width="80" height="80" fill="url(#smallGrid-c)"/>
<path d="M 80 0 L 0 0 0 80" fill="none" stroke="brown" stroke-width="1"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid-c)" />
</svg>
</div>