<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="600" height="280" viewBox="0 0 839.49951171875 387.9498291015625">
<defs>
<filter id="master_svg0_0_7503" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="350.50048828125" height="839.4993896484375">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feColorMatrix in="SourceAlpha" type="matrix" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feOffset dy="0" dx="0" />
<feGaussianBlur stdDeviation="43.5" />
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
<feColorMatrix type="matrix" values="0 0 0 0 0.054901961237192154 0 0 0 0 0.6117647290229797 0 0 0 0 1 0 0 0 0.4000000059604645 0" />
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
</filter>
<clipPath id="master_svg1_0_7510">
<rect x="816.49951171875" y="28.9998779296875" width="9" height="8" rx="0" />
</clipPath>
<filter id="master_svg2_0_7517" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-20" y="-20" width="42.95000457763672" height="298.0762023925781">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feOffset dy="0" dx="0" />
<feGaussianBlur stdDeviation="5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.30588236451148987 0 0 0 0 0.8627451062202454 0 0 0 0 0.929411768913269 0 0 0 1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="master_svg3_0_7520" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-20" y="-20" width="45.95001792907715" height="572.076171875">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feOffset dy="0" dx="0" />
<feGaussianBlur stdDeviation="5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.30588236451148987 0 0 0 0 0.8627451062202454 0 0 0 0 0.929411768913269 0 0 0 1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
</defs>
<g>
<g transform="matrix(0,1,-1,0,859.499267578125,-819.49951171875)" filter="url(#master_svg0_0_7503)">
<path d="M839.4993902587045,23.9998579296875C839.4993899216626,21.7907179296875,841.2902496484375,19.9998622826875,843.4993896484375,19.9998622846875C843.4993896484375,19.9998622846875,1185.9993896484375,19.9998626050875,1185.9993896484375,19.9998626050875C1188.2093896484375,19.9998626071875,1189.9993896484375,21.7907279296875,1189.9993896484375,23.9998579296875C1189.9993896484375,23.9998579296875,1189.9993896484375,195.5048779296875,1189.9993896484375,195.5048779296875C1189.9993896484375,195.5048779296875,1189.9993896484375,295.2928779296875,1189.9993896484375,295.2928779296875C1189.9993896484375,295.8068779296875,1189.9003896484376,296.3158779296875,1189.7083896484376,296.7928779296875C1189.7083896484376,296.7928779296875,1182.2323896484374,315.2788779296875,1182.2323896484374,315.2788779296875C1182.0403896484374,315.7548779296875,1181.9413896484375,316.2638779296875,1181.9413896484375,316.7778779296875C1181.9413896484375,316.7778779296875,1181.9413896484375,508.4908779296875,1181.9413896484375,508.4908779296875C1181.9413896484375,508.4908779296875,1181.9413896484375,564.2928779296875,1181.9413896484375,564.2928779296875C1181.9413896484375,564.8068779296875,1182.0403896484374,565.3168779296875,1182.2323896484374,565.7928779296875C1182.2323896484374,565.7928779296875,1189.7083896484376,584.2788779296875,1189.7083896484376,584.2788779296875C1189.9003896484376,584.7548779296875,1189.9993896484375,585.2638779296875,1189.9993896484375,585.7778779296875C1189.9993896484375,585.7778779296875,1189.9993896484375,683.9938779296875,1189.9993896484375,683.9938779296875C1189.9993896484375,683.9938779296875,1189.9993896484375,855.4988779296875,1189.9993896484375,855.4988779296875C1189.9993896484375,857.7078779296875,1188.2093896484375,859.4988779296875,1185.9993896484375,859.4988779296875C1185.9993896484375,859.4988779296875,843.4995196484375,859.4988779296875,843.4995196484375,859.4988779296875C841.2903796484375,859.4988779296875,839.4995174554375,857.7088779296874,839.4995171184376,855.4988779296875C839.4995171184376,855.4988779296875,839.4995017184375,754.5618779296875,839.4995017184375,754.5618779296875C839.4995017184375,754.5618779296875,839.4994972184375,714.7318779296875,839.4994972184375,714.7318779296875C839.4994971164375,713.8228779296875,839.8092526484375,712.9408779296875,840.3777166484375,712.2308779296875C840.3777166484375,712.2308779296875,847.6212696484375,703.1898779296876,847.6212696484375,703.1898779296876C848.1897396484375,702.4798779296875,848.4994896484375,701.5978779296875,848.4994896484375,700.6888779296875C848.4994896484375,700.6888779296875,848.4994896484375,649.6248779296875,848.4994896484375,649.6248779296875C848.4994896484375,649.6248779296875,848.4994496484375,439.7498779296875,848.4994496484375,439.7498779296875C848.4994496484375,439.7498779296875,848.4994196484375,229.8748779296875,848.4994196484375,229.8748779296875C848.4994196484375,229.8748779296875,848.4994096484374,178.8108779296875,848.4994096484374,178.8108779296875C848.4994096484374,177.9018779296875,848.1896596484376,177.0188779296875,847.6211896484375,176.3098779296875C847.6211896484375,176.3098779296875,840.3776316484375,167.2678779296875,840.3776316484375,167.2678779296875C839.8091656484376,166.5578779296875,839.4994102606375,165.6758779296875,839.4994101579375,164.7668779296875C839.4994101579375,164.7668779296875,839.4994056584375,124.9368779296875,839.4994056584375,124.9368779296875C839.4994056584375,124.9368779296875,839.4993902587045,23.9998579296875,839.4993902587045,23.9998579296875C839.4993902587045,23.9998579296875,839.4993902587045,23.9998579296875,839.4993902587045,23.9998579296875Z" fill="#00000A" fill-opacity="1" />
<path d="M843.4993896484375,19.9998622846875C841.2902496484375,19.9998622826875,839.4993896484375,21.7907179296875,839.4993896484375,23.9998579296875L839.4994056584375,124.9368779296875L839.4994101579375,164.7668779296875C839.4994102606375,165.6758779296875,839.8091656484376,166.5578779296875,840.3776316484375,167.2678779296875L847.6211896484375,176.3098779296875C848.1896596484376,177.0188779296875,848.4994096484374,177.9018779296875,848.4994096484374,178.8108779296875L848.4994196484375,229.8748779296875L848.4994496484375,439.7498779296875L848.4994896484375,649.6248779296875L848.4994896484375,700.6888779296875C848.4994896484375,701.5978779296875,848.1897396484375,702.4798779296875,847.6212696484375,703.1898779296876L840.3777166484375,712.2308779296875C839.8092526484375,712.9408779296875,839.4994971164375,713.8228779296875,839.4994972184375,714.7318779296875L839.4995017184375,754.5618779296875L839.4995171184376,855.4988779296875C839.4995174554375,857.7088779296874,841.2903796484375,859.4988779296875,843.4995196484375,859.4988779296875L1185.9993896484375,859.4988779296875C1188.2093896484375,859.4988779296875,1189.9993896484375,857.7078779296875,1189.9993896484375,855.4988779296875L1189.9993896484375,585.7778779296875C1189.9993896484375,585.2638779296875,1189.9003896484376,584.7548779296875,1189.7083896484376,584.2788779296875L1182.2323896484374,565.7928779296875C1182.0403896484374,565.3168779296875,1181.9413896484375,564.8068779296875,1181.9413896484375,564.2928779296875L1181.9413896484375,316.7778779296875C1181.9413896484375,316.2638779296875,1182.0403896484374,315.7548779296875,1182.2323896484374,315.2788779296875L1189.7083896484376,296.7928779296875C1189.9003896484376,296.3158779296875,1189.9993896484375,295.8068779296875,1189.9993896484375,295.2928779296875L1189.9993896484375,23.9998579296875C1189.9993896484375,21.7907279296875,1188.2093896484375,19.9998626071875,1185.9993896484375,19.9998626050875L843.4993896484375,19.9998622846875ZM840.4994096484374,124.9368779296875L840.4993896484375,23.9998579296875Q840.4993896484375,22.7572179296875,841.3780696484375,21.8785379296875Q842.2567496484374,20.9998629296875,843.4993896484375,20.9998629296875L1185.9993896484375,20.9998629296875Q1187.2423896484374,20.9998629296875,1188.1213896484376,21.8784879296875Q1188.9993896484375,22.7570279296875,1188.9993896484375,23.9998579296875L1188.9993896484375,295.2928779296875Q1188.9993896484375,295.8758779296875,1188.7803896484374,296.4198779296875L1181.3053896484375,314.9038779296875Q1180.9413896484375,315.8058779296875,1180.9413896484375,316.7778779296875L1180.9413896484375,564.2928779296875Q1180.9413896484375,565.2658779296875,1181.3053896484375,566.1668779296875L1188.7813896484374,584.6538779296875Q1188.9993896484375,585.1938779296875,1188.9993896484375,585.7778779296875L1188.9993896484375,855.4988779296875Q1188.9993896484375,856.7418779296875,1188.1213896484376,857.6198779296875Q1187.2423896484374,858.4988779296875,1185.9993896484375,858.4988779296875L843.4995196484375,858.4988779296875Q842.2567196484375,858.4988779296875,841.3781496484376,857.6208779296875Q840.4995196484375,856.7418779296875,840.4995196484375,855.4988779296875L840.4994996484374,754.5618779296875L840.4994996484374,714.7318779296875Q840.4994996484374,713.6788779296875,841.1583196484376,712.8558779296875L848.4016896484375,703.8148779296876Q849.4994896484375,702.4438779296875,849.4994896484375,700.6888779296875L849.4994896484375,649.6248779296875L849.4994896484375,439.7498779296875L849.4993896484375,229.8748779296875L849.4993896484375,178.8108779296875Q849.4993896484375,177.0538779296875,848.4013796484375,175.6838779296875L841.1580796484375,166.6428779296875Q840.4994096484374,165.8198779296875,840.4994096484374,164.7668779296875L840.4994096484374,124.9368779296875Z" fill-rule="evenodd" fill="#0E9CFF" fill-opacity="1" />
</g>
<g class="btn-close">
<g class="btn-close-frame">
<path d="M795.49951171875,23.9998779296875C795.49951171875,21.7907379296875,797.29037171875,19.9998779296875,799.49951171875,19.9998779296875C799.49951171875,19.9998779296875,835.49951171875,19.9998779296875,835.49951171875,19.9998779296875C837.70861171875,19.9998779296875,839.49951171875,21.7907379296875,839.49951171875,23.9998779296875C839.49951171875,23.9998779296875,839.49951171875,42.5422779296875,839.49951171875,42.5422779296875C839.49951171875,44.7513779296875,837.70861171875,46.5422779296875,835.49951171875,46.5422779296875C835.49951171875,46.5422779296875,808.77311171875,46.5422779296875,808.77311171875,46.5422779296875C807.60931171875,46.5422779296875,806.50331171875,46.0354779296875,805.74341171875,45.1539779296875C805.74341171875,45.1539779296875,796.46987271875,34.3966779296875,796.46987271875,34.3966779296875C795.84387071875,33.6704779296875,795.49951171875,32.7436779296875,795.49951171875,31.7848779296875C795.49951171875,31.7848779296875,795.49951171875,23.9998779296875,795.49951171875,23.9998779296875C795.49951171875,23.9998779296875,795.49951171875,23.9998779296875,795.49951171875,23.9998779296875Z" fill="#02202A" fill-opacity="1" />
<path d="M799.49951171875,19.9998779296875C797.29037171875,19.9998779296875,795.49951171875,21.7907379296875,795.49951171875,23.9998779296875L795.49951171875,31.7848779296875C795.49951171875,32.7436779296875,795.84387071875,33.6704779296875,796.46987271875,34.3966779296875L805.74341171875,45.1539779296875C806.50331171875,46.0354779296875,807.60931171875,46.5422779296875,808.77311171875,46.5422779296875L835.49951171875,46.5422779296875C837.70861171875,46.5422779296875,839.49951171875,44.7513779296875,839.49951171875,42.5422779296875L839.49951171875,23.9998779296875C839.49951171875,21.7907379296875,837.70861171875,19.9998779296875,835.49951171875,19.9998779296875L799.49951171875,19.9998779296875ZM796.49951171875,31.7848779296875L796.49951171875,23.9998779296875Q796.49951171875,22.7572379296875,797.37819171875,21.8785579296875Q798.25687171875,20.9998779296875,799.49951171875,20.9998779296875L835.49951171875,20.9998779296875Q836.74211171875,20.9998779296875,837.62081171875,21.8785579296875Q838.49951171875,22.7572479296875,838.49951171875,23.9998779296875L838.49951171875,42.5422779296875Q838.49951171875,43.7848779296875,837.62081171875,44.6635779296875Q836.74211171875,45.5422779296875,835.49951171875,45.5422779296875L808.77311171875,45.5422779296875Q807.39841171875,45.5422779296875,806.50081171875,44.5010779296875L797.22728171875,33.7437779296875Q796.49951171875,32.8994779296875,796.49951171875,31.7848779296875Z" fill-rule="evenodd" fill="#0E9CFF" fill-opacity="1" />
</g>
<g clip-path="url(#master_svg1_0_7510)" class="btn-close-x">
<g>
<path d="M824.1871421548462,36.99987438659668C824.0273021548462,36.99987438659668,823.8674721548462,36.93888438659668,823.7454821548462,36.81688438659668C823.7454821548462,36.81688438659668,817.3699721548462,30.44138438659668,817.3699721548462,30.44138438659668C817.1259853548462,30.19739338659668,817.1259853548462,29.80205138659668,817.3699721548462,29.55806438659668C817.6139591548462,29.314077586596678,818.0093011548462,29.314077586596678,818.2532921548462,29.55806438659668C818.2532921548462,29.55806438659668,824.6290021548461,35.93377438659668,824.6290021548461,35.93377438659668C824.8729921548462,36.17776438659668,824.8729921548462,36.57310438659668,824.6290021548461,36.81709438659668C824.5709821548462,36.87511438659668,824.5020921548462,36.92111438659668,824.4262721548462,36.95248438659668C824.3504521548462,36.98384438659668,824.2691921548462,36.99995438659668,824.1871421548462,36.99987438659668C824.1871421548462,36.99987438659668,824.1871421548462,36.99987438659668,824.1871421548462,36.99987438659668C824.1871421548462,36.99987438659668,824.1871421548462,36.99987438659668,824.1871421548462,36.99987438659668Z" fill="#01C2FF" fill-opacity="1" />
</g>
<g>
<path d="M817.8116301548462,36.99986313415528C817.6517981548462,36.99986313415528,817.4919661548462,36.93886313415527,817.3699721548462,36.81687313415527C817.1259853548462,36.572883134155276,817.1259853548462,36.17754313415527,817.3699721548462,35.933553134155275C817.3699721548462,35.933553134155275,823.7456921548462,29.557843134155274,823.7456921548462,29.557843134155274C823.9896721548462,29.313856334155272,824.3850121548462,29.313856334155272,824.6290021548461,29.557843134155274C824.8729921548462,29.801830134155274,824.8729921548462,30.197172134155274,824.6290021548461,30.441163134155275C824.6290021548461,30.441163134155275,818.2532921548462,36.81687313415527,818.2532921548462,36.81687313415527C818.1312951548462,36.93886313415527,817.9714621548462,36.99986313415528,817.8116301548462,36.99986313415528C817.8116301548462,36.99986313415528,817.8116301548462,36.99986313415528,817.8116301548462,36.99986313415528Z" fill="#01C2FF" fill-opacity="1" />
</g>
</g>
</g>
<g class="lightbar" style="opacity:0.800000011920929;mix-blend-mode:passthrough" transform="matrix(0,1,-1,0,914.0760498046875,-184.0762939453125)" filter="url(#master_svg2_0_7517)">
<path d="M549.076171875,373.9998779296875C549.076171875,373.9998779296875,552.026171875,364.9998779296875,552.026171875,364.9998779296875C552.026171875,364.9998779296875,552.026171875,623.0758779296875,552.026171875,623.0758779296875C552.026171875,623.0758779296875,549.07617783546,615.0758779296875,549.07617783546,615.0758779296875C549.07617783546,615.0758779296875,549.076171875,373.9998779296875,549.076171875,373.9998779296875C549.076171875,373.9998779296875,549.076171875,373.9998779296875,549.076171875,373.9998779296875Z" fill="#01C2FF" fill-opacity="1" />
</g>
<g class="lightbar" transform="matrix(0,-1,1,0,128.5494384765625,180.4495849609375)" style="opacity:0.800000011920929;" filter="url(#master_svg3_0_7520)">
<path d="M154.49951171875,34.9500732421875C154.49951171875,34.9500732421875,160.44951171875,25.9500732421875,160.44951171875,25.9500732421875C160.44951171875,25.9500732421875,160.44953171875,558.0260732421875,160.44953171875,558.0260732421875C160.44953171875,558.0260732421875,154.49952957625,550.0260732421875,154.49952957625,550.0260732421875C154.49952957625,550.0260732421875,154.49951171875,34.9500732421875,154.49951171875,34.9500732421875C154.49951171875,34.9500732421875,154.49951171875,34.9500732421875,154.49951171875,34.9500732421875Z" fill="#01C2FF" fill-opacity="1" />
</g>
</g>
<foreignObject x="20" y="40" width="800" height="310">
<div class="div-content" xmlns="http://www.w3.org/1999/xhtml">
Normal HTML content.
</div>
</foreignObject>
</svg>
body {
background-color: black;
}
.btn-close {
transform-origin: center;
transition: transform 0.3s ease;
cursor: pointer;
&:hover {
stroke: #a13434;
}
&:active {
stroke: red;
}
}
.lightbar {
opacity: 0.3;
animation: fade 0.5s linear infinite alternate;
}
@keyframes fade {
to {
opacity: 1;
}
}
.div-content {
background-color: #77777777;
color: white;
font-size: 24px;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.