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 version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 1600 800">
    <g id="logo-top">
      <path id="logo-top-1-M" class="logo-item" d="M351.732 220.463L337.084 253.3c-2.523 5.535-4.559 9.259-6.104 11.169-1.547 1.914-3.256 2.869-5.127 2.869-1.791 0-3.378-.772-4.761-2.319-.896-.977-2.951-4.557-6.165-10.742-3.216-6.184-5.88-11.677-7.996-16.479l-16.113-36.255c-2.197-5.045-4.517-7.568-6.958-7.568-2.605 0-4.028 2.157-4.272 6.47-.57 9.604-.854 18.475-.854 26.611 0 8.465.406 14.202 1.221 17.212.568 1.791 1.322 3.094 2.258 3.906.935.814 3.479 2.279 7.629 4.395 2.686 1.385 4.028 3.784 4.028 7.202 0 9.115-11.679 13.672-35.034 13.672-19.695 0-29.541-4.435-29.541-13.306 0-2.277.507-3.925 1.526-4.944 1.017-1.016 3.641-2.542 7.874-4.577 2.686-1.221 4.496-2.888 5.432-5.005.935-2.115 1.728-6.226 2.38-12.329.732-6.51 1.423-17.19 2.075-32.044.65-14.85.977-27.566.977-38.146 0-13.264-1.019-22.257-3.052-26.978-.732-1.627-1.568-2.848-2.502-3.662-.937-.813-2.707-1.871-5.31-3.174-5.779-2.766-8.667-6.348-8.667-10.742 0-2.848 1.078-5.451 3.235-7.813 2.155-2.359 5.024-4.028 8.606-5.005 3.58-1.057 8.362-1.973 14.343-2.746s11.047-1.16 15.198-1.16c10.416 0 17.78.854 22.095 2.563 2.115.814 3.784 1.913 5.005 3.296 1.221 1.385 2.97 4.232 5.249 8.545l25.391 46.753c2.766 5.127 4.679 8.261 5.737 9.399 1.057 1.141 2.521 1.709 4.395 1.709 1.627 0 3.071-.61 4.333-1.831 1.261-1.221 2.747-3.498 4.456-6.836l17.212-33.569c2.115-4.313 3.498-7.12 4.15-8.423 3.986-8.137 7.935-13.55 11.841-16.235 4.963-3.498 13.996-5.249 27.1-5.249 23.029 0 34.546 5.249 34.546 15.747 0 2.361-.448 4.254-1.343 5.676-.896 1.426-2.728 3.155-5.493 5.188-3.744 2.85-6.104 6.958-7.08 12.329-1.873 11.23-2.808 24.902-2.808 41.016 0 20.752.977 38.94 2.93 54.565.488 3.826 1.24 6.43 2.258 7.813 1.017 1.385 3.641 3.46 7.874 6.226 2.93 1.953 4.395 4.559 4.395 7.813 0 5.697-3.784 9.726-11.353 12.085-3.906 1.301-8.017 2.155-12.329 2.563-4.314.406-10.946.61-19.897.61-13.754 0-24.008-.977-30.762-2.93-7.488-2.197-11.23-5.939-11.23-11.23 0-1.953.488-3.56 1.465-4.821s3.498-3.56 7.568-6.897c2.115-1.709 3.559-5.005 4.333-9.888.772-4.883 1.16-13.184 1.16-24.902 0-6.51-.305-10.782-.916-12.817-.61-2.033-1.892-3.052-3.845-3.052-2.279 0-4.477 1.568-6.592 4.699-2.118 3.132-5.292 9.378-9.523 18.736z" />
      <path id="logo-top-2-O" class="logo-item" d="M545.58 100.956c20.914 0 39.185 5.981 54.81 17.944 10.578 8.221 19.165 18.881 25.757 31.982 6.428 13.021 9.644 26.043 9.644 39.063 0 19.207-6.348 36.377-19.043 51.514-10.742 12.859-24.78 22.095-42.114 27.71-10.662 3.418-21.362 5.127-32.104 5.127-14.08 0-27.548-2.93-40.405-8.789-15.545-7.08-27.71-17.78-36.499-32.104-8.545-13.834-12.817-29.093-12.817-45.776 0-19.367 5.493-36.457 16.479-51.27 9.766-13.184 22.907-22.867 39.429-29.053 11.064-4.231 23.353-6.348 36.863-6.348zm-11.597 35.034c-6.836 0-12.249 3.052-16.235 9.155-3.094 4.559-4.639 9.97-4.639 16.235 0 9.197 1.871 19.836 5.615 31.922 3.742 12.084 8.463 22.808 14.16 32.165 2.521 3.988 5.634 7.162 9.338 9.521 3.702 2.361 7.465 3.54 11.292 3.54 6.184 0 11.169-2.319 14.954-6.958s5.676-10.742 5.676-18.311c0-9.846-1.587-20.466-4.761-31.86-3.174-11.393-7.284-21.118-12.329-29.175-3.094-4.963-6.674-8.869-10.742-11.719-4.07-2.846-8.178-4.351-12.329-4.515z" />
      <path id="logo-top-3-V" class="logo-item" d="M814.501 142.216l-56.03 113.403c-3.418 7-6.674 11.822-9.766 14.465-3.094 2.645-7 3.968-11.719 3.968-3.906 0-7.406-.854-10.498-2.563-2.361-1.301-4.211-2.826-5.554-4.578-1.343-1.748-3.033-4.901-5.066-9.46l-49.927-109.985c-2.768-6.184-5.27-10.395-7.507-12.635-2.239-2.236-5.432-3.723-9.583-4.455-4.883-.895-7.324-3.906-7.324-9.033 0-6.266 4.272-11.088 12.817-14.465s20.792-5.066 36.743-5.066c16.602 0 28.809 1.263 36.621 3.784 7.813 2.523 11.719 6.43 11.719 11.719 0 3.418-2.117 6.592-6.348 9.521-3.256 2.197-4.883 4.272-4.883 6.226 0 1.791.732 4.354 2.197 7.69l15.259 34.424c2.197 5.047 4.679 7.568 7.446 7.568 2.686 0 5.085-1.343 7.202-4.028 2.115-2.686 4.963-7.975 8.545-15.869 6.428-14.16 10.172-22.521 11.23-25.086 1.057-2.563 1.587-4.535 1.587-5.92 0-2.766-1.913-5.127-5.737-7.08-4.232-2.197-6.348-5.005-6.348-8.423 0-9.684 12.979-14.526 38.94-14.526 12.939 0 22.074 1.037 27.404 3.113 5.33 2.074 7.996 5.636 7.996 10.681 0 6.023-3.5 9.481-10.498 10.376-4.965.57-8.179 1.385-9.644 2.441-2.602 1.872-5.694 6.469-9.274 13.793z" />
      <path id="logo-top-4-I" class="logo-item" d="M899.34 101.811c9.277 0 18.024.814 26.245 2.441 11.066 2.197 16.602 6.878 16.602 14.038 0 2.361-.55 4.132-1.647 5.31-1.1 1.182-3.888 2.911-8.362 5.188-3.744 1.873-6.206 5.981-7.386 12.329s-1.77 18.719-1.77 37.109c0 31.088.772 50.335 2.319 57.739.568 2.361 1.444 4.171 2.624 5.433s3.235 2.624 6.165 4.089c5.371 2.441 8.057 5.981 8.057 10.62 0 6.512-4.965 10.986-14.893 13.428-10.742 2.604-23.886 3.906-39.429 3.906-26.531 0-39.795-5.045-39.795-15.137 0-3.662 2.604-7.08 7.813-10.254 3.986-2.441 6.348-5.777 7.08-10.01 1.545-9.277 2.319-28.971 2.319-59.082 0-20.832-1.059-34.18-3.174-40.039-1.141-3.336-3.866-6.348-8.179-9.033-3.338-2.197-5.575-4.028-6.714-5.493-1.141-1.465-1.709-3.336-1.709-5.615 0-3.498 1.688-6.286 5.065-8.362 3.377-2.074 9.339-3.925 17.884-5.554 10.173-2.033 20.467-3.051 30.885-3.051z" />
      <path id="logo-top-5-N" class="logo-item" d="M1017.626 110.233l60.791 53.223c5.695 4.965 9.806 7.446 12.329 7.446 4.23 0 6.348-4.517 6.348-13.55 0-10.254-.61-17.252-1.831-20.996-1.221-3.742-3.784-6.55-7.69-8.423-3.174-1.545-5.413-3.193-6.714-4.943-1.303-1.75-1.953-4.008-1.953-6.775 0-6.836 4.679-11.23 14.038-13.184 3.824-.813 10.498-1.221 20.02-1.221 12.287 0 20.792.732 25.513 2.197 7.486 2.279 11.23 6.592 11.23 12.939 0 5.291-3.052 9.277-9.155 11.963-2.441 1.059-4.11 1.995-5.005 2.808-.896.814-1.669 2.035-2.319 3.662-2.197 5.371-3.338 15.545-3.418 30.518v39.795c0 6.104.04 14.446.122 25.024.08 14.324-.774 24.658-2.563 31.006-2.197 7.895-6.186 11.841-11.963 11.841-2.523 0-4.7-.53-6.53-1.587-1.832-1.057-4.864-3.498-9.095-7.324l-72.388-64.819c-5.047-4.557-9.237-6.836-12.573-6.836-4.965 0-7.446 6.878-7.446 20.63 0 11.313.63 19.043 1.892 23.193s3.846 7.202 7.752 9.155c5.451 2.686 8.179 6.186 8.179 10.498 0 11.313-12.167 16.968-36.499 16.968-10.986 0-19.512-1.445-25.574-4.334-6.063-2.887-9.094-6.977-9.094-12.268 0-2.766.568-4.841 1.709-6.226 1.139-1.383 3.702-3.254 7.69-5.615 3.824-2.277 6.144-6.306 6.958-12.085 1.383-10.498 2.075-25.593 2.075-45.288 0-20.996-1.221-36.295-3.662-45.898-.896-3.498-2.035-6.104-3.418-7.813-1.385-1.709-3.662-3.336-6.836-4.883-3.662-1.789-6.206-3.54-7.63-5.249s-2.136-3.784-2.136-6.226c0-7.813 6.714-12.735 20.142-14.771 4.557-.65 12.531-.977 23.926-.977 6.51 0 11.25.51 14.221 1.525 2.968 1.022 6.487 3.32 10.557 6.9z" />
      <path id="logo-top-6-G" class="logo-item" d="M1251.879 100.956c10.66 0 20.71 1.507 30.151 4.517 4.23 1.385 7.12 2.075 8.667 2.075 1.627 0 5.045-.935 10.254-2.808 1.709-.568 3.458-.854 5.249-.854 4.557 0 8.911 2.686 13.062 8.057 6.672 8.627 10.01 18.066 10.01 28.32 0 7-1.771 12.655-5.31 16.968-3.541 4.314-8.2 6.47-13.978 6.47-4.721 0-9.359-1.709-13.916-5.127-1.385-1.057-4.761-4.883-10.132-11.475-8.953-10.986-19.247-16.479-30.884-16.479-10.58 0-18.981 3.866-25.208 11.597-6.225 7.732-9.338 18.148-9.338 31.25 0 19.451 4.963 36.011 14.893 49.683 3.742 4.965 8.219 8.932 13.428 11.902 5.207 2.971 10.376 4.455 15.503 4.455 4.23 0 7.71-1.404 10.437-4.211 2.727-2.809 4.09-6.409 4.09-10.804 0-3.906-1.141-6.672-3.418-8.301-.896-.65-1.729-1.038-2.502-1.159-.774-.123-3.113-.184-7.02-.184-3.5 0-6.408-1.117-8.729-3.357-2.318-2.236-3.479-5.065-3.479-8.483 0-6.754 4.475-11.555 13.428-14.404 9.846-3.092 21.198-4.639 34.058-4.639 13.752 0 25.309 1.425 34.668 4.272 8.869 2.768 13.306 7.772 13.306 15.015 0 2.93-1.019 5.474-3.052 7.63-2.035 2.156-4.681 3.438-7.935 3.845-2.85.408-4.699 1.038-5.555 1.892-.854.855-1.729 2.951-2.624 6.287-3.5 12.939-10.336 23.764-20.508 32.471-7 5.941-15.442 10.58-25.329 13.916-9.889 3.336-20.285 5.005-31.189 5.005-17.822 0-34.18-4.108-49.072-12.329-15.301-8.381-26.938-20.1-34.912-35.156-6.674-12.531-10.01-26.081-10.01-40.649 0-14.729 3.986-28.727 11.963-41.992 8.463-14.24 20.304-25.227 35.522-32.959 13.264-6.839 28.401-10.257 45.411-10.257z" />
    </g>
    <g id="logo-bottom">
      <path id="logo-bottom-1-L" class="logo-item" d="M234.748 446.938v112.061c0 25.23 2.197 41.504 6.592 48.828 5.371 8.629 16.682 12.939 33.936 12.939 18.555 0 33.203-4.066 43.945-12.207 10.742-8.137 18.227-20.832 22.461-38.086 2.441-10.578 7.973-15.869 16.602-15.869 8.625 0 15.663 3.868 21.118 11.597 5.451 7.732 8.179 17.784 8.179 30.151 0 20.184-7.488 41.748-22.461 64.697-4.723 7.324-8.873 12.329-12.451 15.015-3.582 2.686-7.896 4.028-12.939 4.028l-54.199-6.592H114.875c-11.23 0-19.127-1.301-23.682-3.906-6.676-3.742-10.01-9.357-10.01-16.846 0-4.555 1.099-7.935 3.296-10.132s7.526-5.329 15.991-9.399c9.277-4.395 15.217-10.578 17.822-18.555 2.113-6.672 3.174-26.123 3.174-58.35 0-14.973-.408-36.537-1.221-64.697-.816-27.016-1.305-47.363-1.465-61.035 0-13.02-1.019-21.931-3.052-26.733-2.037-4.799-6.31-8.259-12.817-10.376-10.742-3.742-17.578-6.752-20.508-9.033-5.211-4.066-7.813-8.705-7.813-13.916 0-11.879 9.846-20.912 29.541-27.1 16.762-5.371 39.223-8.057 67.383-8.057 31.574 0 55.176 1.629 70.801 4.883 20.18 4.395 30.273 13.184 30.273 26.367 0 5.371-1.343 9.361-4.028 11.963-2.686 2.605-9.239 6.104-19.653 10.498-6.188 2.77-10.094 7.488-11.719 14.16-1.627 6.676-2.44 21.241-2.44 43.702z" />
      <path id="logo-bottom-2-O" class="logo-item" d="M581.672 333.412c41.828 0 78.369 11.963 109.619 35.889 21.156 16.441 38.33 37.762 51.514 63.965 12.855 26.043 19.287 52.086 19.287 78.125 0 38.414-12.695 72.754-38.086 103.027-21.484 25.719-49.561 44.189-84.229 55.42-21.324 6.836-42.725 10.254-64.209 10.254-28.16 0-55.096-5.859-80.811-17.578-31.09-14.16-55.42-35.561-72.998-64.209-17.09-27.668-25.635-58.186-25.635-91.553 0-38.734 10.986-72.914 32.959-102.539 19.531-26.367 45.814-45.734 78.857-58.105 22.134-8.462 46.712-12.696 73.732-12.696zm-23.193 70.068c-13.672 0-24.498 6.104-32.471 18.311-6.188 9.117-9.277 19.939-9.277 32.471 0 18.395 3.742 39.673 11.23 63.843 7.484 24.17 16.926 45.616 28.32 64.331 5.043 7.977 11.269 14.324 18.677 19.043 7.404 4.723 14.931 7.08 22.583 7.08 12.367 0 22.339-4.639 29.907-13.916s11.353-21.484 11.353-36.621c0-19.691-3.174-40.932-9.521-63.721-6.348-22.785-14.568-42.236-24.658-58.35-6.188-9.926-13.348-17.738-21.484-23.438-8.142-5.695-16.359-8.704-24.659-9.033z" />
      <path id="logo-bottom-3-G" class="logo-item" d="M971.076 333.412c21.32 0 41.42 3.014 60.303 9.033 8.461 2.77 14.24 4.15 17.334 4.15 3.254 0 10.09-1.869 20.508-5.615 3.418-1.137 6.916-1.709 10.498-1.709 9.113 0 17.822 5.371 26.123 16.113 13.344 17.254 20.02 36.133 20.02 56.641 0 14-3.54 25.311-10.62 33.936-7.08 8.629-16.399 12.939-27.954 12.939-9.441 0-18.719-3.418-27.832-10.254-2.77-2.113-9.521-9.766-20.264-22.949-17.906-21.973-38.494-32.959-61.768-32.959-21.16 0-37.964 7.732-50.415 23.193-12.451 15.465-18.677 36.297-18.677 62.5 0 38.902 9.926 72.021 29.785 99.365 7.484 9.93 16.438 17.864 26.855 23.804 10.414 5.943 20.752 8.911 31.006 8.911 8.461 0 15.419-2.808 20.874-8.423 5.451-5.615 8.179-12.817 8.179-21.606 0-7.813-2.281-13.344-6.836-16.602-1.793-1.301-3.46-2.075-5.005-2.319-1.549-.244-6.226-.366-14.038-.366-7 0-12.817-2.235-17.456-6.714-4.639-4.475-6.958-10.132-6.958-16.968 0-13.508 8.949-23.109 26.855-28.809 19.691-6.184 42.396-9.277 68.115-9.277 27.504 0 50.617 2.85 69.336 8.545 17.738 5.535 26.611 15.545 26.611 30.029 0 5.859-2.037 10.948-6.104 15.259-4.07 4.314-9.361 6.878-15.869 7.69-5.699.816-9.399 2.075-11.108 3.784s-3.46 5.901-5.249 12.573c-7 25.879-20.672 47.527-41.016 64.941-14 11.883-30.884 21.16-50.659 27.832s-40.569 10.01-62.378 10.01c-35.645 0-68.359-8.217-98.145-24.658-30.602-16.762-53.875-40.199-69.824-70.313-13.348-25.063-20.02-52.162-20.02-81.299 0-29.457 7.973-57.453 23.926-83.984 16.926-28.48 40.607-50.453 71.045-65.918 26.529-13.67 56.803-20.506 90.822-20.506z" />
      <path id="logo-bottom-4-O" class="logo-item" d="M1367.805 333.412c41.828 0 78.369 11.963 109.619 35.889 21.156 16.441 38.33 37.762 51.514 63.965 12.855 26.043 19.287 52.086 19.287 78.125 0 38.414-12.695 72.754-38.086 103.027-21.484 25.719-49.561 44.189-84.229 55.42-21.324 6.836-42.725 10.254-64.209 10.254-28.16 0-55.096-5.859-80.811-17.578-31.09-14.16-55.42-35.561-72.998-64.209-17.09-27.668-25.635-58.186-25.635-91.553 0-38.734 10.986-72.914 32.959-102.539 19.531-26.367 45.814-45.734 78.857-58.105 22.134-8.462 46.712-12.696 73.732-12.696zm-23.194 70.068c-13.672 0-24.498 6.104-32.471 18.311-6.188 9.117-9.277 19.939-9.277 32.471 0 18.395 3.742 39.673 11.23 63.843 7.484 24.17 16.926 45.616 28.32 64.331 5.043 7.977 11.269 14.324 18.677 19.043 7.404 4.723 14.931 7.08 22.583 7.08 12.367 0 22.339-4.639 29.907-13.916s11.353-21.484 11.353-36.621c0-19.691-3.174-40.932-9.521-63.721-6.348-22.785-14.568-42.236-24.658-58.35-6.188-9.926-13.348-17.738-21.484-23.438-8.141-5.695-16.358-8.704-24.659-9.033z" />
    </g>
  </svg>
              
            
!

CSS

              
                /*ロゴCSS*/
#logo-bottom-1-L {
  fill: #00007f;
}

.logo-item {
  fill: #000; /*塗りつぶし色*/
  stroke-width: 2; /*線の太さ*/
  stroke-dasharray: 2500; /*線の間隔*/
  stroke-dashoffset: 0; /*線の始まりの開始位置*/
  animation-name: anime-logo; /*keyframe名*/
  animation-duration: 4s; /*所要時間*/
  animation-timing-function: linear; /*進行割合*/
}

/* アニメーション設定 */
@keyframes anime-logo {
  0% {
    fill: #fff; /*塗りつぶし色*/
    stroke-dashoffset: 2500; /*線の始まりの開始位置*/
    stroke: #000; /*パスの色*/
  }
  80% {
    fill: #fff; /*塗りつぶし色*/
  }
  100% {
    stroke-dashoffset: 0; /*線の始まりの開始位置*/
    stroke: white; /*パスの色*/
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console