HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<main>
<h1>The CSS <code>clip-path</code> property</h1>
<p>The <code>clip-path</code> property is defined in the <a href="https://www.w3.org/TR/css-masking-1/">CSS Masking Module Level 1</a> specification. It defines a clipping region that determines what part of an element should be visible, and anything outside this region is hidden.</p>
<p>It can take 3 types of values: a <strong>clip-source</strong>, a <strong>basic shape</strong>, or none (which means no clipping takes place). This demo features using a clip-source as the clipping path. A clip source is a URL which references a clipping path element. This clipping path is defined by an SVG clipPath element.</p>
<p>In order to ensure the clipPath scales with the element it's being applied to, a scaling transform attribute should be used in the clipPath element. Please refer to <a href="http://meyerweb.com/eric/thoughts/2017/02/24/scaling-svg-clipping-paths-for-css-use/">Eric Meyer's detailed write-up and explanation</a> for this.</p>
<section class="diva">
<div class="original">
<img src="https://rawgit.com/huijing/filerepo/gh-pages/beyonce5.jpg">
</div>
<div class="path">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 131.1 262.2"><path d="M44.068 259.383c-.188-2.514-.144-2.95.414-4.043.915-1.793.826-3.841-.275-6.35-.495-1.127-.9-2.458-.9-2.956 0-.498-.2-1.826-.446-2.95-.893-4.083-1.775-7.8-2.479-10.443-.395-1.485-.822-3.59-.948-4.675-.126-1.086-.318-2.119-.427-2.294-.272-.442-1.532-6.37-2.312-10.881-.549-3.175-.642-4.808-.607-10.643.035-5.884.131-7.246.658-9.3.514-2.007.589-2.981.45-5.857-.266-5.575-.444-8.44-.635-10.255-.126-1.204-.043-2.03.284-2.812.706-1.691.587-2.797-1.005-9.283-.81-3.3-1.633-6.81-1.83-7.8-.197-.99-.61-2.88-.92-4.2a270.76 270.76 0 0 1-1.155-5.25c-1.17-5.606-1.813-8.427-2.276-9.977-1.462-4.895-1.837-12.055-.85-16.273.568-2.434.585-3.338.102-5.4-.193-.825-.449-3.12-.567-5.1-.119-1.98-.438-4.545-.71-5.7a76.45 76.45 0 0 1-.86-4.35c-.716-4.412-2.03-6.06-6.828-8.558-1.703-.888-3.793-2.138-4.643-2.78a50.51 50.51 0 0 0-2.896-2.011c-.742-.467-2.227-1.684-3.3-2.707-1.072-1.022-2.76-2.365-3.75-2.984-2.21-1.38-3.237-2.317-4.428-4.035-.752-1.083-.92-1.629-.929-3-.018-2.952 1.76-5.524 5.855-8.468 1-.72 2.677-1.982 3.726-2.807 2.353-1.85 4.762-3.115 9.431-4.95 3.52-1.385 10.195-5.372 10.195-6.09 0-.166.55-.81 1.224-1.432 1.048-.968 1.177-1.216.9-1.734-.556-1.04-.38-2.287.43-3.048.912-.856 1.33-2.321 1.253-4.397-.045-1.234.078-1.693.603-2.253 1.069-1.139 1.83-3.223 2.172-5.94.479-3.82.408-4.847-.441-6.445-.883-1.66-.797-2.165.633-3.748.556-.616 1.387-1.985 1.846-3.042 1.52-3.498 3.072-5.885 5.295-8.137 1.208-1.223 3.01-3.436 4.006-4.916 2.31-3.435 3.814-4.567 9.51-7.156C60.884.024 61.206-.074 62.788.087c.918.093 4.164 1.045 7.213 2.115l5.544 1.947 1.77 1.896c.973 1.042 2.144 2.3 2.602 2.796.459.495 1.032 1.372 1.274 1.95.52 1.243 2.457 4.002 3.516 5.009 1.644 1.563 3.534 3.09 3.823 3.09.65 0 2.175 1.94 2.342 2.979.309 1.929 1.41 3.96 2.53 4.673 1.715 1.09 2.215 1.801 1.943 2.763-.13.46-.213 1.843-.184 3.074.045 1.894.178 2.42.862 3.407.638.92.832 1.592.913 3.161.127 2.44.741 4.004 2.221 5.65.621.692 1.212 1.637 1.312 2.1.1.464.366 1.316.59 1.894.226.577.499 1.725.608 2.55.37 2.803 1.552 5.853 3.25 8.378.907 1.35 1.726 2.817 1.82 3.262.093.445.24 1.145.324 1.554.085.41.561 1.207 1.058 1.773.707.806 1.213 1.071 2.335 1.225 1.663.229 1.94.375 2.408 1.263.51.968.418 2.522-.21 3.552-.305.499-.72 1.411-.923 2.027-.204.616-.63 1.259-.946 1.428-.725.389-.719.838.024 1.788.323.412.59.994.593 1.294.004.299.406 1.379.893 2.4 1.293 2.707 2.165 6.26 2.334 9.506.18 3.437-.163 4.84-1.57 6.446-.577.658-1.246 1.603-1.487 2.1-.806 1.662-7.665 8.04-11.144 10.364-5.657 3.778-6.992 5.169-7.911 8.24-.198.66-.538 1.605-.755 2.1-1.307 2.974-1.412 3.435-1.572 6.953-.16 3.53-.137 3.724.693 5.7.472 1.126 1.234 2.647 1.693 3.38.458.734.836 1.544.84 1.8.01.628 3.505 10.686 6.155 17.717 2.273 6.028 3.178 8.93 3.462 11.1.92 7.033 1.103 7.844 2.325 10.35.483.99 1.259 2.61 1.724 3.6.466.99 1.166 2.293 1.558 2.896.391.603.912 1.864 1.157 2.802.244.938.758 2.402 1.14 3.254.751 1.672 5.638 16.407 8.422 25.398.946 3.052 2.041 6.563 2.435 7.8.393 1.239.715 2.983.715 3.876 0 .894.321 2.918.714 4.5.392 1.58.937 4.156 1.21 5.724.274 1.567.641 3.66.816 4.65.176.99.568 2.61.872 3.6.745 2.423 1.188 5.08 1.188 7.12 0 .926.13 2.335.288 3.132.159.796.429 2.393.6 3.548.17 1.155.394 2.403.496 2.775l.186.675H113.89l-.53-1.387c-.291-.763-.767-2.479-1.056-3.813-.51-2.346-.507-2.536.06-5.783.582-3.33.582-3.367.001-4.512-.322-.636-.683-1.763-.803-2.505-.12-.743-.457-1.755-.749-2.25-.292-.495-.767-2.25-1.055-3.9-.599-3.426-1.173-4.74-2.797-6.396-1.317-1.344-2.618-3.445-2.926-4.725-.305-1.267-.868-2.295-2.505-4.569-2.027-2.817-5.637-11.099-5.935-13.619-.108-.915-.569-2.118-1.217-3.181-.573-.94-1.474-2.6-2-3.686-.528-1.087-1.264-2.404-1.637-2.927-.372-.523-1.02-1.794-1.438-2.824-.418-1.03-1.016-2.231-1.328-2.67-1.154-1.62-4.62-9.509-4.908-11.169-.14-.813-.636-1.628-1.64-2.7-.791-.844-1.626-1.886-1.854-2.317-.228-.43-1.13-1.78-2.005-3-2.125-2.963-4.38-6.528-5.344-8.45a67.134 67.134 0 0 0-1.758-3.217c-.534-.908-1.847-3.135-2.919-4.95a222.51 222.51 0 0 1-3.347-5.888c-.854-1.578-1.978-3.129-2.883-3.975-2.523-2.36-2.468-2.506-2.3 6.188.174 8.986.296 10.138 1.262 11.972.631 1.198.746 1.86.807 4.65.04 1.789-.118 4.468-.351 5.953-.436 2.782-.448 3.134-.278 7.95.092 2.611.032 2.99-.724 4.53-.685 1.394-.825 2.075-.825 4.005 0 1.801-.208 2.945-.922 5.07-.639 1.902-.871 3.067-.757 3.795.196 1.24.813 6.851.826 7.5.012.642-.544 5.575-1.072 9.495-.306 2.277-.36 3.658-.17 4.322.183.639.166 1.427-.048 2.28a5.435 5.435 0 0 0-.041 2.578c.256 1.137.267 5.185.023 8.467-.078 1.045.013 1.242.734 1.59 1.034.5 1.074.692 1.362 6.538l.237 4.82 1.264 2.633c1.389 2.895 1.449 3.406.861 7.377l-.377 2.55-8.274.08-8.274.079-.211-2.817zm48.668-155.829c2.498-2.357 4.418-4.467 5.326-5.85.78-1.19 1.832-2.79 2.337-3.556.504-.766 1.292-1.614 1.751-1.885.521-.308.95-.909 1.14-1.6.268-.97.215-1.237-.427-2.164-.462-.667-.81-1.706-.939-2.81-.132-1.12-.365-1.813-.65-1.921-.434-.167-1.975.248-3.272.882-.85.416-1.595.117-1.595-.64 0-.712-.854-3.36-1.204-3.729-.134-.142-.722.735-1.306 1.95-1.103 2.297-1.892 5.312-2.27 8.669-.12 1.077-.43 2.292-.688 2.7-.258.407-.566 1.078-.684 1.49a19.158 19.158 0 0 1-.585 1.65 34.295 34.295 0 0 0-.734 2.02c-.459 1.413-.795 8.741-.394 8.59.158-.06 2.045-1.768 4.194-3.796zm-52.625-.126c.52-.365 1.124-.906 1.34-1.204.218-.298.93-.814 1.584-1.148.899-.458 1.367-.988 1.919-2.17.401-.861.992-2.038 1.313-2.615 1.45-2.61 2.102-6.4 1.429-8.298-.244-.686-.535-2.373-.648-3.75-.13-1.582-.414-2.867-.773-3.495-.312-.545-.568-1.312-.568-1.704 0-.75-1.36-1.953-2.207-1.953-1.838 0-2.927 1.72-2.73 4.31.145 1.915-.254 2.423-1.868 2.377-1.316-.037-2.666-1.254-2.925-2.637-.244-1.302-.946-1.92-1.454-1.278-.384.483-2.435.975-2.892.692-.146-.09.193-1.075.754-2.19 1.187-2.355 1.237-2.935.415-4.74l-.608-1.334h-1.796c-1.127 0-2.27.214-3.067.574-.7.317-1.812.735-2.472.93-.66.196-1.807.636-2.55.977-1.605.739-6 3.25-6 3.43 0 .263 4.218 5.16 4.924 5.714.408.322 2.08 1.828 3.715 3.348 1.635 1.52 3.634 3.214 4.442 3.765 2.44 1.665 4.252 3.743 4.92 5.64.33.938.6 1.96.6 2.27 0 .31.337.928.75 1.373.412.445.75 1.062.75 1.371 0 .799 1.44 2.408 2.154 2.408.332 0 1.028-.299 1.549-.663z"/></svg>
</div>
<div class="clipped">
<img src="https://rawgit.com/huijing/filerepo/gh-pages/beyonce5.jpg">
</div>
</section>
<section class="fierce">
<div class="original">
<img src="https://rawgit.com/huijing/filerepo/gh-pages/beyonce4.jpg">
</div>
<div class="path">
<svg viewBox="0 0 500 409"><path d="M25.917 402.98c-3.342-3.22-6.974-7.012-8.071-8.427-1.098-1.415-3.33-3.859-4.96-5.431-3.709-3.577-5.623-6.652-8.291-13.321-2.316-5.788-3.393-10.649-4.284-19.328-.714-6.958-.226-10.542 2.59-19.008 2.08-6.258 2.292-6.696 7.902-16.34 1.816-3.12 3.628-6.602 4.028-7.736.4-1.133 1.883-3.854 3.295-6.046 1.412-2.191 4.042-6.558 5.845-9.702 1.803-3.145 3.594-6.104 3.981-6.575.387-.472 1.363-2.016 2.17-3.43.808-1.416 3.415-4.89 5.794-7.72 4.524-5.38 10.85-16.451 16.159-28.274 2.85-6.347 6.459-12.74 9.478-16.788 5.08-6.81 9.721-12.458 13.682-16.647 4.92-5.205 6.215-7.358 6.215-10.34 0-1.138.239-2.515.532-3.062.666-1.244-.129-2.636-1.509-2.642-.592-.003-1.095-.496-1.19-1.166-.092-.639-.735-1.41-1.429-1.715-.76-.335-1.38-1.237-1.56-2.27-.198-1.127-.455-1.47-.75-1-.248.392-.803.714-1.234.714-1.165 0-2.691-1.744-2.336-2.67.17-.443-.002-1.304-.382-1.912-.541-.867-.54-1.259.008-1.806.55-.551.406-1.008-.681-2.158-1.87-1.978-4.64-12.709-3.677-14.25.895-1.432.227-3.67-1.302-4.362-2.073-.939-2.616-2.326-1.424-3.642 1.235-1.365.771-3.505-.76-3.505-1.476 0-2.207-1.114-2.42-3.687-.161-1.968-.015-2.282 1.202-2.58 1-.245 1.636-1.05 2.29-2.897 1.761-4.981 3.447-7.492 5.665-8.44 2.104-.897 2.11-.908 1.956-4.084-.085-1.75-.324-4.341-.533-5.757-.208-1.415-.342-5.917-.297-10.005.072-6.628.202-7.532 1.2-8.35 1-.82 1.026-1.01.254-1.783-.772-.772-.737-1.294.325-4.862.655-2.198 1.19-4.822 1.19-5.83 0-2.429.923-4.047 2.308-4.047.618 0 1.123-.249 1.123-.554 0-.697-2.244-5.162-3.17-6.307-1.08-1.335-1.347-4.676-.534-6.66.407-.99 2.186-3.865 3.954-6.389 3.208-4.579 7.183-12.37 7.183-14.08 0-.496.23-1.349.512-1.895.282-.546.872-2.28 1.312-3.852.791-2.83.825-2.86 3.32-3.04 1.7-.122 2.774-.542 3.297-1.29.427-.61 1.597-1.523 2.6-2.03 1.003-.507 2.931-2.172 4.286-3.7 1.553-1.752 3.773-3.402 6.015-4.472 1.954-.933 4.191-2.377 4.97-3.209.78-.832 2.19-1.837 3.133-2.234.944-.397 3.26-2.04 5.146-3.65 7.978-6.808 12.78-10.582 17.951-14.104 3.02-2.058 6.425-4.53 7.567-5.492 1.94-1.637 4.087-2.473 8.216-3.202.943-.166 2.744-1.276 4.002-2.466 2.567-2.428 5.671-4.128 9.342-5.117 2.118-.57 2.689-.525 3.97.314 1.053.69 1.562.781 1.72.307.5-1.5 4.19-2.314 10.853-2.392 11.835-.139 17.37-.837 21.168-2.67C207.839.465 207.976.453 225.415.23l17.556-.225 12.292 2.583c10.394 2.183 12.973 2.937 16.695 4.878 3.706 1.933 4.943 2.296 7.818 2.296 3.7 0 3.976-.2 7.125-5.135 1.61-2.525 5.156-3.94 9.976-3.982 3.958-.034 7.16 1.019 8.028 2.64.31.578.842 2.563 1.184 4.41.721 3.903 7.426 17.259 10.969 21.851 1.899 2.461 2.302 3.447 2.404 5.88.095 2.243.336 2.923 1.036 2.924 1.449 0 2.075.905 7.324 10.577.512.944 1.348 2.311 1.859 3.039.51.728.797 1.823.637 2.433-.16.61.009 1.469.373 1.908.645.778.8 3.618.606 11.187-.066 2.573-.418 4.156-1.158 5.195-.934 1.311-.961 1.595-.225 2.33.461.462.938 2.104 1.06 3.65.122 1.546.504 2.905.849 3.02 1.06.354.699 3.21-.775 6.12-1.282 2.534-1.39 3.344-1.267 9.468.086 4.222.393 7.006.83 7.533 1.01 1.216-.181 9.939-1.636 11.99-1.284 1.81-1.342 2.267-.408 3.2.396.397.73 2.51.784 4.96.081 3.716-.045 4.313-.977 4.608-1.284.408-1.38 1.176-.227 1.82.742.416.742.666 0 2.096-1.146 2.208-1.058 3.258.301 3.614 1.472.385 1.45 1.56-.071 3.696-.98 1.376-1.147 2.203-.865 4.266.281 2.049.07 3.112-1.055 5.333-.773 1.526-1.837 4.406-2.365 6.4-.528 1.995-1.452 4.066-2.053 4.604-1.073.96-1.069 1.01.219 2.75 1.241 1.68 1.262 1.859.396 3.368-.779 1.357-.801 1.797-.153 2.966.418.756.77 1.872.78 2.48.012.609.501 1.638 1.088 2.287 1.876 2.075 7.51 10.655 7.51 11.436 0 .415.37 1.062.823 1.437 1.356 1.126 3.75 8.146 3.75 10.996 0 2.243.264 2.875 1.707 4.089.938.79 3.19 1.99 5.003 2.667 1.813.677 4.068 1.576 5.012 1.997 3.765 1.682 12.662 5.319 14.008 5.727 2.91.881 11.388 5.442 16.056 8.636 6.807 4.657 11.027 8.124 15.962 13.11 6.605 6.676 15.454 12.492 30.875 20.293 8.979 4.542 15.885 8.978 21.6 13.874 8.255 7.072 10.582 8.912 14.706 11.63 3.657 2.41 9.025 7.386 24.28 22.504 5.803 5.751 11.452 14.077 13.357 19.685 2.166 6.379.655 12.148-4.013 15.324-1.512 1.028-5.322 4.327-8.467 7.332-3.144 3.004-7.553 6.915-9.796 8.69-2.244 1.776-5.837 5.184-7.985 7.574-2.147 2.39-4.814 4.899-5.926 5.574-2.587 1.57-16.286 12.803-21.159 17.349-2.053 1.916-5.663 4.86-8.021 6.544-2.359 1.684-5.972 4.62-8.03 6.523-2.059 1.904-6.136 5.07-9.06 7.036l-5.317 3.575-137.31-.145-137.31-.144-4.703-9.336c-3.31-6.568-5.154-11.044-6.222-15.093-.835-3.166-2.764-9.177-4.286-13.358-1.918-5.269-2.964-9.213-3.406-12.853-.352-2.888-1.022-6.312-1.49-7.609-.47-1.296-1.1-5.83-1.404-10.075-.79-11.074-1.719-20.47-2.315-23.442-1.61-8.016-2.167-11.342-2.178-12.974-.006-1.004-.268-1.984-.583-2.178-.314-.194-.574-2.075-.578-4.179-.009-5.651-.524-8.114-1.696-8.114-1.393 0-4.21 1.495-5.495 2.917-.6.665-2.327 1.835-3.835 2.6-1.509.765-2.879 1.745-3.045 2.177-.166.433-1.308 1.484-2.538 2.336-2.642 1.831-11.467 11.808-14.546 16.445-1.189 1.791-2.47 3.257-2.847 3.257-.377 0-.981.65-1.343 1.445-.363.795-1.047 1.594-1.522 1.777-.474.182-.862.68-.862 1.107 0 .427-.772 1.656-1.715 2.73-.944 1.075-1.716 2.112-1.716 2.305 0 .193-1.236 2.089-2.748 4.213-1.511 2.124-2.928 4.337-3.149 4.92-.395 1.044-1.18 2.137-4.823 6.718-1.022 1.286-1.858 2.94-1.858 3.679 0 .738-.258 1.5-.572 1.695-.314.194-.572.835-.572 1.424 0 .59-.484 1.225-1.076 1.413-.852.27-1.14 1.081-1.386 3.898-.286 3.28-.138 3.912 1.907 8.13 2.508 5.175 10.456 15.997 13.394 18.238 1.203.917 2.997 3.476 4.69 6.687 2.203 4.179 8.094 12.356 10.333 14.345.242.215 1.598 1.43 3.013 2.702l2.573 2.31-28.016.01-28.016.008-6.076-5.855zm326.03-1.071c1.07-.357 3.488-2.222 5.375-4.145 1.886-1.923 4.974-4.511 6.86-5.752 6.036-3.968 11.334-7.875 15.152-11.172 2.044-1.766 4.617-3.83 5.718-4.588 4.715-3.247 23.151-21.658 26.234-26.197 1.248-1.838 2.906-3.76 3.685-4.27.779-.51 4.144-3.633 7.479-6.94l6.063-6.012-3.863-2.555c-2.125-1.406-7.466-5.426-11.868-8.935-4.403-3.508-10.835-8.506-14.294-11.106-3.46-2.6-6.804-5.306-7.433-6.014-3.34-3.759-14.725-12.002-24.56-17.783-6.701-3.94-7.952-4.415-14.89-5.666-1.888-.34-4.59-.918-6.004-1.285-1.415-.366-4.681-.76-7.258-.875-4.13-.184-4.887-.06-6.396 1.057-.942.696-2 1.962-2.354 2.814-.352.851-2.684 3.554-5.181 6.006-3.6 3.533-4.54 4.8-4.54 6.112 0 .91-.495 2.624-1.1 3.81-.605 1.185-1.5 3.703-1.991 5.595-.49 1.892-2.323 7.904-4.073 13.36-3.35 10.445-6.189 16.06-8.809 17.423-2.115 1.1-3.801 3.077-5.134 6.017-2.24 4.941-.99 9.895 3.198 12.684 1.306.869 2.46 2.234 2.866 3.39a551.147 551.147 0 0 1 2.199 6.51c.835 2.516 1.851 5.218 2.258 6.004 1.102 2.126 7.099 6.8 9.722 7.576 1.363.403 3.337 1.73 4.866 3.27 1.415 1.424 3.52 3.09 4.68 3.7a7.04 7.04 0 0 1 3.114 3.345c.955 2.119 3.935 4.98 5.186 4.98.319 0 1.497 1.485 2.617 3.3 2.475 4.01 3.681 5.15 6.52 6.163 2.718.969 3.52.993 5.957.179z"/></svg>
</div>
<div class="clipped">
<img src="https://rawgit.com/huijing/filerepo/gh-pages/beyonce4.jpg">
</div>
</section>
</main>
<svg height="0" width="0" viewBox="0 0 131.1 262.2">
<defs>
<clipPath id="diva" clipPathUnits="objectBoundingBox"
transform="scale(0.00762776506 0.00381388253)">
<path d="M44.068 259.383c-.188-2.514-.144-2.95.414-4.043.915-1.793.826-3.841-.275-6.35-.495-1.127-.9-2.458-.9-2.956 0-.498-.2-1.826-.446-2.95-.893-4.083-1.775-7.8-2.479-10.443-.395-1.485-.822-3.59-.948-4.675-.126-1.086-.318-2.119-.427-2.294-.272-.442-1.532-6.37-2.312-10.881-.549-3.175-.642-4.808-.607-10.643.035-5.884.131-7.246.658-9.3.514-2.007.589-2.981.45-5.857-.266-5.575-.444-8.44-.635-10.255-.126-1.204-.043-2.03.284-2.812.706-1.691.587-2.797-1.005-9.283-.81-3.3-1.633-6.81-1.83-7.8-.197-.99-.61-2.88-.92-4.2a270.76 270.76 0 0 1-1.155-5.25c-1.17-5.606-1.813-8.427-2.276-9.977-1.462-4.895-1.837-12.055-.85-16.273.568-2.434.585-3.338.102-5.4-.193-.825-.449-3.12-.567-5.1-.119-1.98-.438-4.545-.71-5.7a76.45 76.45 0 0 1-.86-4.35c-.716-4.412-2.03-6.06-6.828-8.558-1.703-.888-3.793-2.138-4.643-2.78a50.51 50.51 0 0 0-2.896-2.011c-.742-.467-2.227-1.684-3.3-2.707-1.072-1.022-2.76-2.365-3.75-2.984-2.21-1.38-3.237-2.317-4.428-4.035-.752-1.083-.92-1.629-.929-3-.018-2.952 1.76-5.524 5.855-8.468 1-.72 2.677-1.982 3.726-2.807 2.353-1.85 4.762-3.115 9.431-4.95 3.52-1.385 10.195-5.372 10.195-6.09 0-.166.55-.81 1.224-1.432 1.048-.968 1.177-1.216.9-1.734-.556-1.04-.38-2.287.43-3.048.912-.856 1.33-2.321 1.253-4.397-.045-1.234.078-1.693.603-2.253 1.069-1.139 1.83-3.223 2.172-5.94.479-3.82.408-4.847-.441-6.445-.883-1.66-.797-2.165.633-3.748.556-.616 1.387-1.985 1.846-3.042 1.52-3.498 3.072-5.885 5.295-8.137 1.208-1.223 3.01-3.436 4.006-4.916 2.31-3.435 3.814-4.567 9.51-7.156C60.884.024 61.206-.074 62.788.087c.918.093 4.164 1.045 7.213 2.115l5.544 1.947 1.77 1.896c.973 1.042 2.144 2.3 2.602 2.796.459.495 1.032 1.372 1.274 1.95.52 1.243 2.457 4.002 3.516 5.009 1.644 1.563 3.534 3.09 3.823 3.09.65 0 2.175 1.94 2.342 2.979.309 1.929 1.41 3.96 2.53 4.673 1.715 1.09 2.215 1.801 1.943 2.763-.13.46-.213 1.843-.184 3.074.045 1.894.178 2.42.862 3.407.638.92.832 1.592.913 3.161.127 2.44.741 4.004 2.221 5.65.621.692 1.212 1.637 1.312 2.1.1.464.366 1.316.59 1.894.226.577.499 1.725.608 2.55.37 2.803 1.552 5.853 3.25 8.378.907 1.35 1.726 2.817 1.82 3.262.093.445.24 1.145.324 1.554.085.41.561 1.207 1.058 1.773.707.806 1.213 1.071 2.335 1.225 1.663.229 1.94.375 2.408 1.263.51.968.418 2.522-.21 3.552-.305.499-.72 1.411-.923 2.027-.204.616-.63 1.259-.946 1.428-.725.389-.719.838.024 1.788.323.412.59.994.593 1.294.004.299.406 1.379.893 2.4 1.293 2.707 2.165 6.26 2.334 9.506.18 3.437-.163 4.84-1.57 6.446-.577.658-1.246 1.603-1.487 2.1-.806 1.662-7.665 8.04-11.144 10.364-5.657 3.778-6.992 5.169-7.911 8.24-.198.66-.538 1.605-.755 2.1-1.307 2.974-1.412 3.435-1.572 6.953-.16 3.53-.137 3.724.693 5.7.472 1.126 1.234 2.647 1.693 3.38.458.734.836 1.544.84 1.8.01.628 3.505 10.686 6.155 17.717 2.273 6.028 3.178 8.93 3.462 11.1.92 7.033 1.103 7.844 2.325 10.35.483.99 1.259 2.61 1.724 3.6.466.99 1.166 2.293 1.558 2.896.391.603.912 1.864 1.157 2.802.244.938.758 2.402 1.14 3.254.751 1.672 5.638 16.407 8.422 25.398.946 3.052 2.041 6.563 2.435 7.8.393 1.239.715 2.983.715 3.876 0 .894.321 2.918.714 4.5.392 1.58.937 4.156 1.21 5.724.274 1.567.641 3.66.816 4.65.176.99.568 2.61.872 3.6.745 2.423 1.188 5.08 1.188 7.12 0 .926.13 2.335.288 3.132.159.796.429 2.393.6 3.548.17 1.155.394 2.403.496 2.775l.186.675H113.89l-.53-1.387c-.291-.763-.767-2.479-1.056-3.813-.51-2.346-.507-2.536.06-5.783.582-3.33.582-3.367.001-4.512-.322-.636-.683-1.763-.803-2.505-.12-.743-.457-1.755-.749-2.25-.292-.495-.767-2.25-1.055-3.9-.599-3.426-1.173-4.74-2.797-6.396-1.317-1.344-2.618-3.445-2.926-4.725-.305-1.267-.868-2.295-2.505-4.569-2.027-2.817-5.637-11.099-5.935-13.619-.108-.915-.569-2.118-1.217-3.181-.573-.94-1.474-2.6-2-3.686-.528-1.087-1.264-2.404-1.637-2.927-.372-.523-1.02-1.794-1.438-2.824-.418-1.03-1.016-2.231-1.328-2.67-1.154-1.62-4.62-9.509-4.908-11.169-.14-.813-.636-1.628-1.64-2.7-.791-.844-1.626-1.886-1.854-2.317-.228-.43-1.13-1.78-2.005-3-2.125-2.963-4.38-6.528-5.344-8.45a67.134 67.134 0 0 0-1.758-3.217c-.534-.908-1.847-3.135-2.919-4.95a222.51 222.51 0 0 1-3.347-5.888c-.854-1.578-1.978-3.129-2.883-3.975-2.523-2.36-2.468-2.506-2.3 6.188.174 8.986.296 10.138 1.262 11.972.631 1.198.746 1.86.807 4.65.04 1.789-.118 4.468-.351 5.953-.436 2.782-.448 3.134-.278 7.95.092 2.611.032 2.99-.724 4.53-.685 1.394-.825 2.075-.825 4.005 0 1.801-.208 2.945-.922 5.07-.639 1.902-.871 3.067-.757 3.795.196 1.24.813 6.851.826 7.5.012.642-.544 5.575-1.072 9.495-.306 2.277-.36 3.658-.17 4.322.183.639.166 1.427-.048 2.28a5.435 5.435 0 0 0-.041 2.578c.256 1.137.267 5.185.023 8.467-.078 1.045.013 1.242.734 1.59 1.034.5 1.074.692 1.362 6.538l.237 4.82 1.264 2.633c1.389 2.895 1.449 3.406.861 7.377l-.377 2.55-8.274.08-8.274.079-.211-2.817zm48.668-155.829c2.498-2.357 4.418-4.467 5.326-5.85.78-1.19 1.832-2.79 2.337-3.556.504-.766 1.292-1.614 1.751-1.885.521-.308.95-.909 1.14-1.6.268-.97.215-1.237-.427-2.164-.462-.667-.81-1.706-.939-2.81-.132-1.12-.365-1.813-.65-1.921-.434-.167-1.975.248-3.272.882-.85.416-1.595.117-1.595-.64 0-.712-.854-3.36-1.204-3.729-.134-.142-.722.735-1.306 1.95-1.103 2.297-1.892 5.312-2.27 8.669-.12 1.077-.43 2.292-.688 2.7-.258.407-.566 1.078-.684 1.49a19.158 19.158 0 0 1-.585 1.65 34.295 34.295 0 0 0-.734 2.02c-.459 1.413-.795 8.741-.394 8.59.158-.06 2.045-1.768 4.194-3.796zm-52.625-.126c.52-.365 1.124-.906 1.34-1.204.218-.298.93-.814 1.584-1.148.899-.458 1.367-.988 1.919-2.17.401-.861.992-2.038 1.313-2.615 1.45-2.61 2.102-6.4 1.429-8.298-.244-.686-.535-2.373-.648-3.75-.13-1.582-.414-2.867-.773-3.495-.312-.545-.568-1.312-.568-1.704 0-.75-1.36-1.953-2.207-1.953-1.838 0-2.927 1.72-2.73 4.31.145 1.915-.254 2.423-1.868 2.377-1.316-.037-2.666-1.254-2.925-2.637-.244-1.302-.946-1.92-1.454-1.278-.384.483-2.435.975-2.892.692-.146-.09.193-1.075.754-2.19 1.187-2.355 1.237-2.935.415-4.74l-.608-1.334h-1.796c-1.127 0-2.27.214-3.067.574-.7.317-1.812.735-2.472.93-.66.196-1.807.636-2.55.977-1.605.739-6 3.25-6 3.43 0 .263 4.218 5.16 4.924 5.714.408.322 2.08 1.828 3.715 3.348 1.635 1.52 3.634 3.214 4.442 3.765 2.44 1.665 4.252 3.743 4.92 5.64.33.938.6 1.96.6 2.27 0 .31.337.928.75 1.373.412.445.75 1.062.75 1.371 0 .799 1.44 2.408 2.154 2.408.332 0 1.028-.299 1.549-.663z"/>
</clipPath>
</defs>
</svg>
<svg height="0" width="0" viewBox="0 0 500 409">
<defs>
<clipPath id="fierce" clipPathUnits="objectBoundingBox"
transform="scale(0.002 0.00244498777)">
<path d="M25.917 402.98c-3.342-3.22-6.974-7.012-8.071-8.427-1.098-1.415-3.33-3.859-4.96-5.431-3.709-3.577-5.623-6.652-8.291-13.321-2.316-5.788-3.393-10.649-4.284-19.328-.714-6.958-.226-10.542 2.59-19.008 2.08-6.258 2.292-6.696 7.902-16.34 1.816-3.12 3.628-6.602 4.028-7.736.4-1.133 1.883-3.854 3.295-6.046 1.412-2.191 4.042-6.558 5.845-9.702 1.803-3.145 3.594-6.104 3.981-6.575.387-.472 1.363-2.016 2.17-3.43.808-1.416 3.415-4.89 5.794-7.72 4.524-5.38 10.85-16.451 16.159-28.274 2.85-6.347 6.459-12.74 9.478-16.788 5.08-6.81 9.721-12.458 13.682-16.647 4.92-5.205 6.215-7.358 6.215-10.34 0-1.138.239-2.515.532-3.062.666-1.244-.129-2.636-1.509-2.642-.592-.003-1.095-.496-1.19-1.166-.092-.639-.735-1.41-1.429-1.715-.76-.335-1.38-1.237-1.56-2.27-.198-1.127-.455-1.47-.75-1-.248.392-.803.714-1.234.714-1.165 0-2.691-1.744-2.336-2.67.17-.443-.002-1.304-.382-1.912-.541-.867-.54-1.259.008-1.806.55-.551.406-1.008-.681-2.158-1.87-1.978-4.64-12.709-3.677-14.25.895-1.432.227-3.67-1.302-4.362-2.073-.939-2.616-2.326-1.424-3.642 1.235-1.365.771-3.505-.76-3.505-1.476 0-2.207-1.114-2.42-3.687-.161-1.968-.015-2.282 1.202-2.58 1-.245 1.636-1.05 2.29-2.897 1.761-4.981 3.447-7.492 5.665-8.44 2.104-.897 2.11-.908 1.956-4.084-.085-1.75-.324-4.341-.533-5.757-.208-1.415-.342-5.917-.297-10.005.072-6.628.202-7.532 1.2-8.35 1-.82 1.026-1.01.254-1.783-.772-.772-.737-1.294.325-4.862.655-2.198 1.19-4.822 1.19-5.83 0-2.429.923-4.047 2.308-4.047.618 0 1.123-.249 1.123-.554 0-.697-2.244-5.162-3.17-6.307-1.08-1.335-1.347-4.676-.534-6.66.407-.99 2.186-3.865 3.954-6.389 3.208-4.579 7.183-12.37 7.183-14.08 0-.496.23-1.349.512-1.895.282-.546.872-2.28 1.312-3.852.791-2.83.825-2.86 3.32-3.04 1.7-.122 2.774-.542 3.297-1.29.427-.61 1.597-1.523 2.6-2.03 1.003-.507 2.931-2.172 4.286-3.7 1.553-1.752 3.773-3.402 6.015-4.472 1.954-.933 4.191-2.377 4.97-3.209.78-.832 2.19-1.837 3.133-2.234.944-.397 3.26-2.04 5.146-3.65 7.978-6.808 12.78-10.582 17.951-14.104 3.02-2.058 6.425-4.53 7.567-5.492 1.94-1.637 4.087-2.473 8.216-3.202.943-.166 2.744-1.276 4.002-2.466 2.567-2.428 5.671-4.128 9.342-5.117 2.118-.57 2.689-.525 3.97.314 1.053.69 1.562.781 1.72.307.5-1.5 4.19-2.314 10.853-2.392 11.835-.139 17.37-.837 21.168-2.67C207.839.465 207.976.453 225.415.23l17.556-.225 12.292 2.583c10.394 2.183 12.973 2.937 16.695 4.878 3.706 1.933 4.943 2.296 7.818 2.296 3.7 0 3.976-.2 7.125-5.135 1.61-2.525 5.156-3.94 9.976-3.982 3.958-.034 7.16 1.019 8.028 2.64.31.578.842 2.563 1.184 4.41.721 3.903 7.426 17.259 10.969 21.851 1.899 2.461 2.302 3.447 2.404 5.88.095 2.243.336 2.923 1.036 2.924 1.449 0 2.075.905 7.324 10.577.512.944 1.348 2.311 1.859 3.039.51.728.797 1.823.637 2.433-.16.61.009 1.469.373 1.908.645.778.8 3.618.606 11.187-.066 2.573-.418 4.156-1.158 5.195-.934 1.311-.961 1.595-.225 2.33.461.462.938 2.104 1.06 3.65.122 1.546.504 2.905.849 3.02 1.06.354.699 3.21-.775 6.12-1.282 2.534-1.39 3.344-1.267 9.468.086 4.222.393 7.006.83 7.533 1.01 1.216-.181 9.939-1.636 11.99-1.284 1.81-1.342 2.267-.408 3.2.396.397.73 2.51.784 4.96.081 3.716-.045 4.313-.977 4.608-1.284.408-1.38 1.176-.227 1.82.742.416.742.666 0 2.096-1.146 2.208-1.058 3.258.301 3.614 1.472.385 1.45 1.56-.071 3.696-.98 1.376-1.147 2.203-.865 4.266.281 2.049.07 3.112-1.055 5.333-.773 1.526-1.837 4.406-2.365 6.4-.528 1.995-1.452 4.066-2.053 4.604-1.073.96-1.069 1.01.219 2.75 1.241 1.68 1.262 1.859.396 3.368-.779 1.357-.801 1.797-.153 2.966.418.756.77 1.872.78 2.48.012.609.501 1.638 1.088 2.287 1.876 2.075 7.51 10.655 7.51 11.436 0 .415.37 1.062.823 1.437 1.356 1.126 3.75 8.146 3.75 10.996 0 2.243.264 2.875 1.707 4.089.938.79 3.19 1.99 5.003 2.667 1.813.677 4.068 1.576 5.012 1.997 3.765 1.682 12.662 5.319 14.008 5.727 2.91.881 11.388 5.442 16.056 8.636 6.807 4.657 11.027 8.124 15.962 13.11 6.605 6.676 15.454 12.492 30.875 20.293 8.979 4.542 15.885 8.978 21.6 13.874 8.255 7.072 10.582 8.912 14.706 11.63 3.657 2.41 9.025 7.386 24.28 22.504 5.803 5.751 11.452 14.077 13.357 19.685 2.166 6.379.655 12.148-4.013 15.324-1.512 1.028-5.322 4.327-8.467 7.332-3.144 3.004-7.553 6.915-9.796 8.69-2.244 1.776-5.837 5.184-7.985 7.574-2.147 2.39-4.814 4.899-5.926 5.574-2.587 1.57-16.286 12.803-21.159 17.349-2.053 1.916-5.663 4.86-8.021 6.544-2.359 1.684-5.972 4.62-8.03 6.523-2.059 1.904-6.136 5.07-9.06 7.036l-5.317 3.575-137.31-.145-137.31-.144-4.703-9.336c-3.31-6.568-5.154-11.044-6.222-15.093-.835-3.166-2.764-9.177-4.286-13.358-1.918-5.269-2.964-9.213-3.406-12.853-.352-2.888-1.022-6.312-1.49-7.609-.47-1.296-1.1-5.83-1.404-10.075-.79-11.074-1.719-20.47-2.315-23.442-1.61-8.016-2.167-11.342-2.178-12.974-.006-1.004-.268-1.984-.583-2.178-.314-.194-.574-2.075-.578-4.179-.009-5.651-.524-8.114-1.696-8.114-1.393 0-4.21 1.495-5.495 2.917-.6.665-2.327 1.835-3.835 2.6-1.509.765-2.879 1.745-3.045 2.177-.166.433-1.308 1.484-2.538 2.336-2.642 1.831-11.467 11.808-14.546 16.445-1.189 1.791-2.47 3.257-2.847 3.257-.377 0-.981.65-1.343 1.445-.363.795-1.047 1.594-1.522 1.777-.474.182-.862.68-.862 1.107 0 .427-.772 1.656-1.715 2.73-.944 1.075-1.716 2.112-1.716 2.305 0 .193-1.236 2.089-2.748 4.213-1.511 2.124-2.928 4.337-3.149 4.92-.395 1.044-1.18 2.137-4.823 6.718-1.022 1.286-1.858 2.94-1.858 3.679 0 .738-.258 1.5-.572 1.695-.314.194-.572.835-.572 1.424 0 .59-.484 1.225-1.076 1.413-.852.27-1.14 1.081-1.386 3.898-.286 3.28-.138 3.912 1.907 8.13 2.508 5.175 10.456 15.997 13.394 18.238 1.203.917 2.997 3.476 4.69 6.687 2.203 4.179 8.094 12.356 10.333 14.345.242.215 1.598 1.43 3.013 2.702l2.573 2.31-28.016.01-28.016.008-6.076-5.855zm326.03-1.071c1.07-.357 3.488-2.222 5.375-4.145 1.886-1.923 4.974-4.511 6.86-5.752 6.036-3.968 11.334-7.875 15.152-11.172 2.044-1.766 4.617-3.83 5.718-4.588 4.715-3.247 23.151-21.658 26.234-26.197 1.248-1.838 2.906-3.76 3.685-4.27.779-.51 4.144-3.633 7.479-6.94l6.063-6.012-3.863-2.555c-2.125-1.406-7.466-5.426-11.868-8.935-4.403-3.508-10.835-8.506-14.294-11.106-3.46-2.6-6.804-5.306-7.433-6.014-3.34-3.759-14.725-12.002-24.56-17.783-6.701-3.94-7.952-4.415-14.89-5.666-1.888-.34-4.59-.918-6.004-1.285-1.415-.366-4.681-.76-7.258-.875-4.13-.184-4.887-.06-6.396 1.057-.942.696-2 1.962-2.354 2.814-.352.851-2.684 3.554-5.181 6.006-3.6 3.533-4.54 4.8-4.54 6.112 0 .91-.495 2.624-1.1 3.81-.605 1.185-1.5 3.703-1.991 5.595-.49 1.892-2.323 7.904-4.073 13.36-3.35 10.445-6.189 16.06-8.809 17.423-2.115 1.1-3.801 3.077-5.134 6.017-2.24 4.941-.99 9.895 3.198 12.684 1.306.869 2.46 2.234 2.866 3.39a551.147 551.147 0 0 1 2.199 6.51c.835 2.516 1.851 5.218 2.258 6.004 1.102 2.126 7.099 6.8 9.722 7.576 1.363.403 3.337 1.73 4.866 3.27 1.415 1.424 3.52 3.09 4.68 3.7a7.04 7.04 0 0 1 3.114 3.345c.955 2.119 3.935 4.98 5.186 4.98.319 0 1.497 1.485 2.617 3.3 2.475 4.01 3.681 5.15 6.52 6.163 2.718.969 3.52.993 5.957.179z"/>
</clipPath>
</defs>
</svg>
html {
box-sizing: border-box;
height: 100%;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
@import url('https://fonts.googleapis.com/css?family=EB+Garamond');
main {
font-family: 'EB Garamond', serif;
max-width: 60em;
margin: 0 auto;
padding: 1em;
}
h1 {
text-align: center;
margin-bottom: 0.5em;
}
p {
line-height: 1.4;
margin-bottom: 1em;
}
section {
display: flex;
justify-content: space-evenly;
padding: 2em 1em;
}
img {
max-width: 100%;
}
.diva {
img,
svg {
width: 13em;
}
.clipped img {
clip-path: url(#diva);
}
}
.fierce {
img,
svg {
width: 17em;
}
.clipped img {
clip-path: url(#fierce);
}
}
Also see: Tab Triggers