Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <svg width="2000px" height="670px">
        <defs>
            <filter id="beerbottleblur" x="-100%" y="-100%" width="300%" height="300%">
                <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
            </filter>
            <svg id="beerbottle" t="1565578109000" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="7275" width="128" height="128">
                <path stroke="#29ABE2" stroke-width="25"
                    d="M571.907998 79.770028H452.090002c-10.226 0-17.731999-9.612-15.25-19.532l5.874-23.499999a27.725999 27.725999 0 0 1 26.897999-21.001999h84.771998c12.724 0 23.813999 8.66 26.897999 21.001999l5.874 23.499999c2.482 9.92-5.022 19.531999-15.248 19.532z"
                    fill="none" p-id="7276"></path>
                <path stroke="#009D00" stroke-width="25"
                    d="M591.767998 1008.268h-159.539996c-35.515999 0-64.308998-28.789999-64.308998-64.307998V530.552014a521.779985 521.779985 0 0 1 48.024999-218.658993l0.002-0.002A521.769985 521.769985 0 0 0 463.970001 93.234027V79.768028h96.049998v13.463999a521.797985 521.797985 0 0 0 48.025998 218.660994 521.783985 521.783985 0 0 1 48.026999 218.660993v413.407988c0.002 35.515999-28.788999 64.305998-64.304998 64.305998z"
                    fill="none" p-id="7277"></path>
                <path stroke="#00CA65" stroke-width="25"
                    d="M607.025997 311.893021c-31.639999-68.551998-47.207999-143.155996-47.207998-218.659994V80.607028H511.56v12.623999c0 75.504998 16.618 150.108996 48.257999 218.660994 31.639999 68.551998 48.257999 143.156996 48.257998 218.660993V943.960002c0 35.515999-28.815999 64.031998-64.333998 64.031998h48.025999c35.515999 0 62.466998-28.515999 62.466998-64.031998V530.554014c0-75.501998-15.569-150.106996-47.208999-218.659993z"
                    fill="none" p-id="7278"></path>
                <path stroke="#008442" stroke-width="25"
                    d="M416.094003 311.893021c31.639999-68.551998 47.207999-143.155996 47.207998-218.659994V80.607028h48.257999v12.623999c0 75.504998-15.568 150.108996-47.207999 218.660994s-47.207999 143.156996-47.207998 218.660993V943.960002c0 35.515999 27.591999 64.031998 63.109998 64.031998h-48.025999c-35.515999 0-63.339998-28.515999-63.339998-64.031998V530.554014c-0.003-75.501998 15.566-150.106996 47.205999-218.659993z"
                    fill="none" p-id="7279"></path>
                <path stroke="#29ABE2" stroke-width="25"
                    d="M592.039998 271.871022H431.954002l16.01-80.041998h128.067996zM367.927004 832.167006h288.159992v48.025998h-288.159992z"
                    fill="none" p-id="7280"></path>
                <path stroke="#FFFFFF" stroke-width="25" d="M367.927004 608.064012h288.159992V832.190006h-288.159992z"
                    fill="none" p-id="7281"></path>
                <path stroke="#C7B299" stroke-width="25"
                    d="M431.964002 608.064012a80.043998 80.043998 0 1 0 160.087996 0 80.043998 80.043998 0 1 0-160.087996 0z"
                    fill="none" p-id="7282"></path>
                <path stroke="#29ABE2" stroke-width="25"
                    d="M367.927004 560.038014h64.034998v48.025998h-64.034998z m224.124994 0h64.034998v48.025998h-64.034998zM479.990001 608.064012a32.017999 32.017999 0 1 0 64.035998 0 32.017999 32.017999 0 1 0-64.035998 0z"
                    fill="none" p-id="7283"></path>
                <path stroke="#29ABE2" stroke-width="25"
                    d="M511.998 655.807011c-26.331999 0-47.753999-21.422999-47.753999-47.754999s21.421999-47.753999 47.753999-47.753998 47.753999 21.421999 47.753999 47.753998-21.423999 47.754999-47.753999 47.754999z m0-64.034998c-8.978 0-16.282 7.304-16.282 16.281999s7.304 16.282 16.282 16.282 16.282-7.304 16.282-16.282-7.306-16.282-16.282-16.281999zM417.150003 768.805007h190.929994v31.472H417.150003z m29.373999-48.257998h130.083996v31.471999H446.524002z"
                    fill="none" p-id="7284"></path>
                <path stroke="#C7B299" stroke-width="25"
                    d="M479.990001 271.880022a32.017999 32.017999 0 1 0 64.035998 0 32.017999 32.017999 0 1 0-64.035998 0z"
                    fill="none" p-id="7285"></path>
                <path stroke="white" stroke-width="10"
                    d="M622.335997 305.301021c-30.187999-65.411998-46.251999-137.993996-46.547999-210.042994A31.217999 31.217999 0 0 0 596.699998 83.410028a31.269999 31.269999 0 0 0 5.723999-26.988l-5.873999-23.499999A43.399999 43.399999 0 0 0 554.383999 0.00003h-84.771998a43.397999 43.397999 0 0 0-42.163999 32.919999l-5.873999 23.499999a31.255999 31.255999 0 0 0 5.723999 26.988 31.213999 31.213999 0 0 0 20.914 11.847999c-0.296 72.049998-16.362 144.636996-46.549999 210.042994-32.366999 70.125998-49.474999 148.018996-49.474998 225.250993v413.407988c0 44.135999 35.908999 80.041998 80.042997 80.041998h159.539996c44.135999 0 80.042998-35.905999 80.042997-80.041998V530.554014c-0.002-77.235998-17.109999-155.128995-49.476998-225.252993z m-65.017998-48.447999c-6.312-18.991999-24.235999-32.735999-45.319999-32.735999s-39.007999 13.74-45.319999 32.735999h-12.585999a543.389984 543.389984 0 0 0 12.987999-48.257998h89.837998a543.759984 543.759984 0 0 0 12.987999 48.257998h-12.587999z m-29.039999 15.018c0 8.976-7.304 16.282-16.282 16.282s-16.282-7.304-16.282-16.282 7.304-16.282 16.282-16.281999c8.978 0.002 16.282 7.308 16.282 16.281999z m16.015999-176.362995c0.12 27.259999 2.404 54.586998 6.698 81.616998h-77.985998c4.292-27.031999 6.58-54.356998 6.7-81.616998h64.587998z m-74.681998-64.035998h84.771998a11.974 11.974 0 0 1 11.633999 9.082l5.93 23.475999-0.038 0.002h-119.799996l5.87-23.477999a11.972 11.972 0 0 1 11.631999-9.082z m-39.377999 287.014992c4.57-9.902 8.8-19.973999 12.756-30.159999h24.175999c6.718 18.249999 24.279999 31.299999 44.829999 31.299999 20.551999 0 38.111999-13.05 44.829999-31.299999H580.999998a529.687984 529.687984 0 0 0 12.756 30.161999c30.471999 66.019998 46.575999 139.352996 46.575998 212.066993V544.300014h-56.943998c-17.549999-19.635999-43.049999-32.025999-71.397998-32.025999s-53.845998 12.39-71.397998 32.025999h-56.943998v-13.748c0.01-72.709998 16.116-146.041996 46.585998-212.064993zM383.658004 817.060006V624.030012h33.919999c7.63 45.232999 47.051999 79.802998 94.419997 79.802997s86.789997-34.573999 94.419997-79.802997h33.919999v193.029994h-256.679992z m256.679992 31.471999v14.688h-256.679992v-14.688h256.679992zM417.490003 592.556013h-33.833999V575.770013h38.173999a95.157997 95.157997 0 0 0-4.34 16.786z m30.199999 15.497999c0-35.457999 28.847999-64.305998 64.305998-64.305998s64.305998 28.847999 64.305998 64.305998-28.847999 64.306998-64.305998 64.306998-64.305998-28.847999-64.305998-64.306998z m158.813995-15.497999a94.769997 94.769997 0 0 0-4.342-16.786h38.173999v16.786h-33.831999z m-14.735999 399.975988h-159.539996c-26.781999 0-48.569999-21.789999-48.569998-48.569999v-49.268998h256.679992v49.268998c0 26.779999-21.789999 48.569999-48.569998 48.569999z"
                    fill="none" p-id="7286"></path>
            </svg>
            <svg id="beerglass" t="1565581315581" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="8508" width="70" height="70">
                <path
                    d="M804.352 406.016l-82.432 0-48.64 0 0 473.6-97.792 0L575.488 408.064c-17.408 11.776-14.848 19.968-36.864 23.552l0 447.488L435.2 879.104 435.2 430.08c-19.968-4.608-20.992-12.8-36.864-24.064l0 473.6L294.4 879.616 294.4 406.016 250.88 406.016l0 445.952c0 45.568 36.864 82.432 82.432 82.432l304.128 0c45.568 0 86.528-36.864 86.528-82.432l0-64 80.384 0c36.352 0 66.048-29.696 66.048-66.048L870.4 472.064C870.4 435.712 841.216 406.016 804.352 406.016zM825.856 742.912l-101.888 0L723.968 450.048l101.888 0L825.856 742.912z"
                    p-id="8509" fill="#60B9EE"></path>
                <path class="svg-beerglass"
                    d="M485.376 403.456c-39.424 0-75.776-16.384-102.4-45.056-19.968 14.336-43.52 22.016-68.096 22.016-53.248 0-99.84-36.352-112.64-87.552-16.896-12.8-26.624-32.768-26.624-54.272 0-37.888 30.72-69.12 69.12-69.12 1.024 0 2.048 0 3.072 0 16.896-12.288 36.352-19.456 56.32-21.504 14.848-32.768 47.616-54.784 83.968-54.784 27.136 0 52.736 11.776 70.144 32.256 18.944-4.096 36.352-4.096 55.808 0.512 17.408-20.48 43.008-32.768 70.656-32.768 35.328 0 67.584 20.48 82.944 52.224 60.928 4.096 109.056 54.272 109.056 116.224 0 64-52.224 116.224-116.224 116.224-25.088 0-49.152-8.192-69.12-23.04C564.224 385.536 525.824 403.456 485.376 403.456zM386.56 319.488l8.704 11.776c22.016 28.672 54.784 45.056 90.112 45.056 36.352 0 71.168-17.92 92.672-48.128l9.216-12.8 11.264 10.752c16.896 16.384 38.912 25.088 61.952 25.088 49.152 0 89.6-39.936 89.6-89.6 0-49.152-39.936-89.088-89.088-89.6-0.512 0-1.024 0-2.048 0l-9.728 0-3.072-9.216c-9.728-25.6-34.304-43.008-61.44-43.008-21.504 0-41.984 10.752-54.272 28.672l-5.632 7.68-9.216-2.56c-21.504-6.144-38.4-6.144-59.392-0.512l-9.216 2.56L441.856 148.48c-12.288-17.408-32.256-28.16-53.76-28.16-28.16 0-52.736 17.92-61.952 45.056L323.072 174.08l-9.216 0c-19.456 0.512-37.888 7.168-53.76 19.968l-4.608 3.584-7.68-1.024c-1.024 0-2.048-0.512-3.072-0.512-23.04 0-41.984 18.944-41.984 41.984 0 14.336 7.168 27.136 18.944 35.328l4.608 3.072 1.024 5.632C236.032 323.584 272.896 353.28 314.88 353.28c22.528 0 44.032-8.704 60.416-24.064L386.56 319.488z"
                    p-id="8510" fill="#60B9EE"></path>
                <path
                    style="fill:#60b9ee;fill-opacity:1;stroke:#60b9ee;stroke-width:38.5823288;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                    d="m 250.87999,406.01599 h 470.1288" id="path1387" inkscape:connector-curvature="0" />
            </svg>
            <g id="beerbottleneon">
                <use xlink:href="#beerbottle" filter="url(#beerbottleblur)" />
                <use xlink:href="#beerbottle" opacity="0.9" />
            </g>
            <g id="beerbottleneon1">
                <use xlink:href="#beerbottleneon">
                    <animateTransform attributeName="transform" id="f1" attributeType='XML' begin='0s;t1.end' dur='2s'
                        type="rotate" from="0 0 0" to="0 0 0" />
                    <animateTransform attributeName="transform" id="s1" attributeType='XML' begin='f1.end' dur='0.1s'
                        type="rotate" from="0 64 64" to="70 64 64" />
                    <animateTransform attributeName="transform" id="t1" attributeType='XML' begin='s1.end' dur='2s'
                        type="rotate" from="70 64 64" to="70 64 64" />
                </use>
            </g>
            <g id="beerglassneon">
                <use xlink:href="#beerglass" filter="url(#beerbottleblur)" />
                <use xlink:href="#beerglass" opacity="0.5" />
            </g>
            <path id="beerpath" d="M -20.501285,20 A 97.750643,50 0 0 0 175,20" />
            <text id="beerday" fill-opacity="0.4" stroke="white" stroke-width="1" fill="none" font-size="25">
                <textPath xlink:href="#beerpath" startOffset="40">SVG园区啤酒节</textPath>
            </text>
            <g id="beerdayneon">
                <use xlink:href="#beerday" filter="url(#beerbottleblur)" />
                <use xlink:href="#beerday" opacity="0.9" />
            </g>
            <circle id="beercircleback" r="110"  fill="black" />
            <circle id="beercircle" r="110" stroke="#31FF98" stroke-width="8" fill="none" >
                    <animate attributeName="stroke" id="f2" begin="0s;t2.end" from="#FFFFFF" to="#A8A8FF" dur="2s" />
                    <animate attributeName="stroke" id="s2" begin="f2.end" from="#A8A8FF" to="#FFFF00" dur="2s" />
                    <animate attributeName="stroke" id="t2" begin="s2.end" from="#FFFF00" to="#FFFFFF" dur="2s" />
            </circle>        
            <g id="beercircleneon">
                <use xlink:href="#beercircle" filter="url(#beerbottleblur)" />
                <use xlink:href="#beercircle" opacity="0.9" />
            </g>
            <g id="beerdayboard">
                <use xlink:href="#beercircleback" x="110" y="110" />
                <use xlink:href="#beerbottleneon1" x="10" y="20" />
                <use xlink:href="#beerglassneon" x="110" y="78" />
                <use xlink:href="#beerdayneon" x="30" y="120" />
                <use xlink:href="#beercircleneon" x="110" y="110" />
            </g>
        </defs>
        <use xlink:href="#beerdayboard" />
    </svg>
              
            
!

CSS

              
                body {
            background: #1d2b29;
            width: 100vw;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        .svg-beerglass {
            animation: flicker 4.2s infinite;
        }

        @keyframes flicker {
            0% {
                opacity: 0;
            }

            49% {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                opacity: 1;
            }
        }
              
            
!

JS

              
                
              
            
!
999px

Console