css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

<wakkle-image>

  <!-- Sequence gets loaded here. -->
  <img src="https://sym.design/wakkle/5346930/images/example.wakkle">

  <!-- Spacial sound gets loaded here. -->
  <wakkle-sound source="./images/example/sound.mp3"></wakkle-sound>

  <!-- HTML markup goes here. -->
  <wakkle-markup mask="./images/example/mask.svg">

    <div class="example-frame" x="-6" y="0" z="50" rotation-y="-12"></div>
    <div class="example-frame" x="8" y="0" z="70" rotation-y="14"></div>

    <svg class="example-svg" x="7" y="16" z="60" viewBox="0 0 372 97">
      <title>oh look</title>
      <path d="M64.5113431,26.0366057 C65.4027348,29.8702355 65.848424,34.4758467 65.848424,39.8535774 C65.848424,45.2313081 65.1576058,50.6089581 63.7759486,55.9866889 C62.3942914,61.3644196 60.5892503,65.8901647 58.3607709,69.5640599 C56.1322916,73.2379551 53.6810011,76.5923309 51.0068259,79.6272879 C48.3326508,82.6622448 45.6585157,85.0848495 42.9843405,86.8951747 C37.1902943,90.5158251 32.9116781,92.8585637 30.1483638,93.9234609 L28.0090343,94.562396 C20.3430655,92.0066428 14.1925548,88.1730705 9.55731781,83.0615641 C5.36777668,78.4825062 2.78277945,74.8619101 1.80224854,72.1996672 L1,70.4425957 C1,60.8585211 1.8690939,52.3128495 3.60730777,44.8053245 C5.34552164,37.2977994 7.46254524,31.6539291 9.95844208,27.8735441 C12.4543389,24.0931591 14.9501983,21.0050037 17.4460952,18.608985 C19.941992,16.2129664 22.0367311,14.6955107 23.7303754,14.0565724 L26.4045372,13.2579035 C29.2569908,17.0915333 33.6693136,19.5940041 39.6416382,20.765391 L53.4135716,7.98668885 C58.7619219,11.1813804 62.4611421,17.1979591 64.5113431,26.0366057 Z M27.8753262,74.9151414 C30.3712231,74.9151414 33.0899271,73.2379535 36.0315198,69.8835275 C38.9731125,66.5291014 41.2906962,61.763758 42.9843405,55.5873544 C43.8757322,52.712132 44.3214214,49.4110003 44.3214214,45.6838602 C44.3214214,41.9567201 43.7865944,37.8036835 42.7169243,33.2246256 C32.8224761,46.1098814 27.8753262,60.006581 27.8753262,74.9151414 Z M109.021281,27.953411 C114.280492,27.953411 119.450487,35.0348709 124.531419,49.1980033 C120.252739,56.0133452 117.043777,65.3310557 114.904437,77.1514143 C114.013045,81.7304721 113.522787,86.3094613 113.433648,90.8885191 L112.631399,90.8885191 C105.589405,90.8885191 100.998806,87.1081909 98.859466,79.547421 C98.0572134,76.7786883 97.6560932,73.9567531 97.6560932,71.0815308 C97.6560932,64.7986375 98.9040229,57.1314928 101.39992,48.0798669 C95.4275951,54.2562705 89.7227736,64.1064216 84.2852841,77.6306156 C83.9287274,80.0798791 83.572176,83.9666955 83.2156194,89.2911814 C78.1346865,88.0133048 74.3463285,86.2562508 71.8504316,84.0199667 C69.5328131,81.9966621 68.1511767,80.3460962 67.7054808,79.0682196 C67.8837592,69.2711657 68.7082842,58.2496453 70.1790805,46.0033278 C71.6498769,33.7570103 73.0537978,23.9334813 74.3908854,16.5324459 C75.727973,9.13141058 76.4856446,5.37770436 76.6639229,5.27121464 C80.9426032,3.67386889 85.2880727,2.42263348 89.7004618,1.51747088 C94.1128508,0.612308286 97.4332352,0.106489717 99.6617145,0 L103.004417,0 C97.2995097,15.2280296 92.4860666,32.3726168 88.563943,51.4342762 C91.9512316,44.1929754 95.4498916,38.469239 99.0600281,34.2628952 C102.670165,30.0565513 105.990549,27.953411 109.021281,27.953411 Z M161.137723,90.8885191 L161.137723,96 C151.332414,91.2079627 144.335094,86.0432889 140.145553,80.5058236 C140.858666,71.1347285 142.128881,60.7521368 143.956234,49.3577371 C145.783587,37.9633374 147.410352,28.9118472 148.836579,22.202995 L150.975908,12.1397671 C154.987171,9.26454469 159.310356,6.89518403 163.945593,5.03161398 C168.58083,3.16804393 172.190913,2.02329664 174.775949,1.59733777 L178.787191,0.958402662 C175.310764,9.9035389 172.324646,19.3011155 169.828749,29.1514143 C167.332852,39.0017131 165.550096,47.7071169 164.480426,55.2678869 C162.251946,71.1348547 161.137723,83.0082801 161.137723,90.8885191 Z M208.321823,20.765391 C212.333086,22.8951854 215.542048,26.4359153 217.948805,31.3876872 C220.355563,36.339459 221.558924,42.2495497 221.558924,49.1181364 C221.558924,55.9867232 220.065865,62.1364121 217.079703,67.5673877 C214.093541,72.9983633 210.572596,77.1513999 206.516764,80.0266223 C202.460931,82.9018447 198.761711,85.1114731 195.418992,86.655574 C192.076273,88.1996749 189.691836,88.9717138 188.265609,88.9717138 C184.432625,86.7354298 180.889396,84.0998488 177.635816,81.0648918 C174.382236,78.0299349 172.086937,75.5540861 170.749849,73.6372712 L168.744228,70.7620632 C168.833367,64.6921494 169.568754,59.021657 170.950412,53.750416 C172.332069,48.479175 173.958834,44.1930282 175.830757,40.8918469 C179.84202,34.1829947 183.362964,29.7104937 186.393696,27.4742097 L188.399317,25.8768719 C192.232302,27.1547485 196.02066,28.6455822 199.764505,30.3494176 L208.321823,20.765391 Z M207.385866,51.9134775 L199.898213,44.40599 C194.104167,53.8835748 190.895205,63.7337259 190.271231,73.9567388 C190.627787,73.8502491 191.095761,73.7171389 191.675166,73.5574043 C192.25457,73.3976698 193.346509,72.8386071 194.951014,71.8801997 C196.555519,70.9217922 198.070862,69.7238009 199.497089,68.2861897 C200.923316,66.8485785 202.39409,64.6921941 203.909456,61.8169717 C205.424822,58.9417494 206.583614,55.6406176 207.385866,51.9134775 Z M261.923911,20.765391 C265.935174,22.8951854 269.144136,26.4359153 271.550893,31.3876872 C273.957651,36.339459 275.161012,42.2495497 275.161012,49.1181364 C275.161012,55.9867232 273.667953,62.1364121 270.681791,67.5673877 C267.695629,72.9983633 264.174684,77.1513999 260.118852,80.0266223 C256.063019,82.9018447 252.363799,85.1114731 249.02108,86.655574 C245.678361,88.1996749 243.293924,88.9717138 241.867697,88.9717138 C238.034713,86.7354298 234.491484,84.0998488 231.237904,81.0648918 C227.984324,78.0299349 225.689025,75.5540861 224.351937,73.6372712 L222.346316,70.7620632 C222.435455,64.6921494 223.170842,59.021657 224.552499,53.750416 C225.934157,48.479175 227.560922,44.1930282 229.432845,40.8918469 C233.444108,34.1829947 236.965052,29.7104937 239.995784,27.4742097 L242.001405,25.8768719 C245.83439,27.1547485 249.622748,28.6455822 253.366593,30.3494176 L261.923911,20.765391 Z M260.987954,51.9134775 L253.500301,44.40599 C247.706255,53.8835748 244.497293,63.7337259 243.873319,73.9567388 C244.229875,73.8502491 244.697849,73.7171389 245.277254,73.5574043 C245.856658,73.3976698 246.948597,72.8386071 248.553102,71.8801997 C250.157607,70.9217922 251.67295,69.7238009 253.099177,68.2861897 C254.525404,66.8485785 255.996178,64.6921941 257.511544,61.8169717 C259.02691,58.9417494 260.185702,55.6406176 260.987954,51.9134775 Z M318.333869,2.55574043 C312.183266,16.0799345 306.166462,33.8634505 300.283276,55.906822 C309.464611,51.4342538 316.907621,40.6789537 322.612528,23.640599 C322.969084,23.9600682 323.437058,24.3593986 324.016463,24.8386023 C324.595867,25.3178061 325.643237,26.3028212 327.158603,27.7936772 C328.673969,29.2845332 330.011036,30.7753669 331.169845,32.266223 C334.557134,36.4193219 336.651873,40.2528942 337.454126,43.7670549 C336.919291,44.9384418 335.760499,46.8286059 333.977715,49.437604 C332.194932,52.0466021 330.389891,54.2562305 328.562538,56.0665557 C326.735185,57.8768809 324.26161,59.740423 321.141739,61.6572379 C318.021868,63.5740528 314.723768,65.0116425 311.24734,65.9700499 C317.487082,70.1231489 324.261558,72.7321078 331.57097,73.797005 C331.303552,75.1813713 330.590449,76.9118033 329.43164,78.9883527 C328.272831,81.0649022 327.047186,82.8752003 325.754668,84.4193012 C324.46215,85.9634021 322.590255,87.5341018 320.138928,89.1314476 C317.687601,90.7287933 314.991181,91.9001627 312.049588,92.6455907 C306.790377,86.5756768 301.664952,79.0150203 296.673158,69.9633943 L291.592251,92.6455907 C288.650658,91.9001627 285.46398,90.5158171 282.032122,88.4925125 C278.600264,86.4692079 275.992982,84.2862014 274.210199,81.9434276 C278.578018,58.3027104 282.722928,37.6972592 286.645051,20.1264559 L288.650673,11.1813644 C293.642466,8.94508033 298.611901,7.10816027 303.559125,5.67054908 C308.506349,4.2329379 312.183284,3.35441092 314.590042,3.03494176 L318.333869,2.55574043 Z M363.378639,86.2562396 C360.526185,88.9184825 357.138948,90.9151348 353.216824,92.2462562 C349.2947,93.5773777 346.330867,94.2429285 344.325236,94.2429285 C342.319605,94.2429285 340.514563,94.0299522 338.910058,93.6039933 C337.840388,89.3444047 337.283277,85.9900289 337.238707,83.5407654 C337.194138,81.0915019 337.171853,78.8020073 337.171853,76.672213 C337.171853,74.5424186 337.394698,72.4126562 337.840393,70.2828619 L338.642642,66.608985 C344.436688,66.608985 349.874096,66.9284494 354.955029,67.5673877 L357.495483,67.8868552 L363.378639,86.2562396 Z M346.798836,56.0665557 C345.818305,54.6821894 344.860073,52.7121592 343.924112,50.156406 C342.98815,47.6006528 342.408754,45.2046701 342.185906,42.968386 C341.963059,40.732102 341.851636,38.6023396 341.851636,36.5790349 C341.851636,29.6572033 343.010428,21.6705943 345.328047,12.6189684 C347.289108,11.1281123 350.899191,9.6639007 356.158402,8.22628952 C361.417613,6.78867834 366.364763,6.06988353 371,6.06988353 C370.643443,6.60233211 370.153185,7.32112692 369.529211,8.22628952 C368.905237,9.13145211 367.768729,11.2878365 366.119655,14.6955075 C364.47058,18.1031784 362.932952,21.7770186 361.506726,25.7171381 C357.76288,35.9401509 355.133314,47.8668204 353.617948,61.4975042 C353.350531,61.3910144 352.993979,61.2579043 352.548283,61.0981697 C352.102588,60.9384351 351.278063,60.3793725 350.074684,59.4209651 C348.871305,58.4625576 347.779366,57.3444323 346.798836,56.0665557 Z" fill="#343FD0"></path>
    </svg>

    <div x="11" y="9" z="66">
      <span class="example-text-1" >A canvas for your <br>custom markup.</span>
    </div>

    <div x="8" y="4" z="65">
      <p class="example-text-2">Made with <a href="https://github.com/symdesign/wakkle" target="_blank">wakkle</a></p>
    </div>

  </wakkle-markup>


</wakkle-image>


            
          
!
            
                  * {
    margin: 0;
    padding: 0;
    }
    body {
        background-color: #222;
        font-family: 'Montserrat', sans-serif;
        overflow: hidden !important;
    }
    .example-svg {
        width: 25%;
        height: auto;
    }
    .example-text-1 {

        display: inline;
        font-family: 'Eczar', serif;
        font-size: 18px;
        padding: 0px;
        padding-left: 0;
        padding-right: 0;

        color: white;
        line-height: 2em;
        
        background: #FF2B47;
        box-shadow: 0.2em 0 0 #FF2B47, -0.2em  0 0 #FF2B47;
        -webkit-box-decoration-break: clone;
        -ms-box-decoration-break: clone;
        -o-box-decoration-break: clone;
        box-decoration-break: clone;
    }
    .example-text-2 {
        display: inline;
        font-family: 'Montserrat', sans-serif;
        font-size: 7px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: white;
        padding: 0.26em 0;

        background: #343FD0;
        box-shadow: 0.6em  0 0 #343FD0, -0.6em 0 0 #343FD0;
        -webkit-box-decoration-break: clone;
        -ms-box-decoration-break: clone;
        -o-box-decoration-break: clone;
        box-decoration-break: clone;
    }
    a {
        color: inherit;
        text-decoration: none;

    }
    .example-frame {
        border: 1.5px solid #19E090;
        width: 20%;
        height: 20%;
        transform: translateY(-55%);

    }
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console